/* ==========================================================================
   Service reviews + customer feedback
   Used on: /service/{slug}/feedback (dedicated page) and the reviews
   section inline on the service detail page (services._reviews partial).
   ========================================================================== */

/* ---------- Shared: review / feedback primitives ---------- */

.feedback-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:22px 24px;
    position:relative;
    overflow:hidden;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.feedback-card::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--grad-accent);opacity:.9;
}
.feedback-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.feedback-card-head,.feedback-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.feedback-card-head b,.feedback-head b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.feedback-card > p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.7}
.feedback-stars{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    color:var(--accent);
    font-size:14px;letter-spacing:4px;
}
.feedback-stars small,.feedback-stars span{color:var(--faint);font-size:12px;font-weight:700;letter-spacing:0}
.feedback-admin-reply{
    margin-top:14px;padding:12px 14px 12px 16px;
    background:var(--brand-soft);border-left:3px solid var(--brand);
    border-radius:var(--radius-sm);
}
.feedback-admin-reply b{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--brand);margin-bottom:4px}
.feedback-admin-reply span{color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.feedback-empty{color:var(--muted);text-align:center;padding:34px 16px;font-size:14.5px;line-height:1.6;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper)}

/* Star rating widget (detail page partial) */
.star-input{margin:16px 0 0}
.star-input-label{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.6px;margin-bottom:8px}
.star-options{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.star-option{position:relative;cursor:pointer}
.star-option input{position:absolute;opacity:0;pointer-events:none}
.star-option span{
    display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
    background:#fff;border:1.5px solid var(--line);color:var(--faint);
    font-size:20px;transition:all .25s var(--ease);
}
.star-option:hover span,.star-option:hover ~ .star-option span{color:var(--brand-bright);border-color:#f3c9a1;background:var(--accent-soft)}
.star-option input:checked + span{color:#fff;background:var(--grad-accent);border-color:transparent;box-shadow:0 8px 20px rgba(235,127,49,.35)}
.star-option input:checked ~ .star-option span{background:var(--accent-soft);border-color:#f6d3ae;color:var(--accent)}

/* ==========================================================================
   DEDICATED FEEDBACK PAGE  /service/{slug}/feedback
   ========================================================================== */

.feedback-main{max-width:var(--container);margin:38px auto 90px;padding:0 26px}

.feedback-hero{
    display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
    background:
        radial-gradient(1200px 420px at 88% -20%,rgba(235,127,49,.16),transparent 58%),
        linear-gradient(120deg,var(--brand-deep),var(--brand));
    color:#FFF1E3;border-radius:var(--radius-lg);
    padding:38px 40px;margin-bottom:34px;position:relative;overflow:hidden;
    box-shadow:var(--shadow-md);
}
.feedback-hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 40%);
}
.feedback-hero .eyebrow{color:#FFD9A6;margin-bottom:10px}
.feedback-hero .eyebrow::after{display:none}
.feedback-hero h1{
    margin:0;font-family:var(--font-display);font-weight:700;
    font-size:clamp(26px,3.6vw,40px);line-height:1.15;letter-spacing:-1px;color:#fff;
    max-width:760px;
}
.feedback-sub{margin:10px 0 0;color:rgba(255,241,227,.82);font-size:14.5px;font-weight:500}
.feedback-hero-cta{
    flex:none;display:inline-flex;align-items:center;gap:9px;
    background:#fff;color:var(--brand-deep);font-weight:800;font-size:14.5px;
    padding:14px 24px;border-radius:99px;box-shadow:0 12px 26px rgba(0,0,0,.22);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative;z-index:1;
}
.feedback-hero-cta:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.28)}

.feedback-layout{
    display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:38px;align-items:start;
}
.feedback-list{display:flex;flex-direction:column;gap:18px;min-width:0}

/* pagination (Laravel default links) */
.feedback-list .pagination{display:flex;justify-content:center;margin-top:26px;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.feedback-list .pagination li{display:inline-flex}
.feedback-list .pagination .page-link,.feedback-list .pagination span{
    display:block;min-width:36px;height:36px;line-height:36px;text-align:center;padding:0 10px;
    border:1px solid var(--line);border-radius:10px;background:var(--paper);
    color:var(--ink-soft);font-size:13.5px;font-weight:600;transition:all .25s var(--ease);
}
.feedback-list .pagination .active > span,.feedback-list .pagination .active > .page-link{
    background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(117,27,27,.28);
}
.feedback-list .pagination .page-link:hover,.feedback-list .pagination a:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------- Review form panel (sidebar) ---------- */

.feedback-form-panel{
    position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-md);
    padding:26px 28px;position:sticky;top:96px;
}
.feedback-form-panel::before{
    content:'';position:absolute;left:0;right:0;top:0;height:4px;border-radius:var(--radius) var(--radius) 0 0;
    background:var(--grad-accent);
}
.feedback-form-panel .eyebrow{margin-bottom:8px}
.feedback-form-panel h2{margin:0 0 20px;font-family:var(--font-display);font-size:26px;letter-spacing:-.5px;color:var(--ink)}
.feedback-form{display:flex;flex-direction:column;gap:0}
.feedback-field{border:0;padding:0;margin:0 0 16px}
.feedback-field legend{
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
    color:var(--muted);margin-bottom:8px;
}
.feedback-field input,.feedback-field textarea{
    width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 14px;font-size:14px;font-family:inherit;color:var(--ink);
    background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.feedback-field textarea{resize:vertical;min-height:120px;line-height:1.6}
.feedback-field input:focus,.feedback-field textarea:focus{outline:none;border-color:var(--brand-bright);box-shadow:0 0 0 4px var(--ring)}
.feedback-star-input{display:flex;gap:8px}
.feedback-star-input label{position:relative;flex:1}
.feedback-star-input input{position:absolute;opacity:0;pointer-events:none}
.feedback-star-input span{
    display:grid;place-items:center;padding:11px 0;border-radius:var(--radius-sm);
    border:1.5px solid var(--line);background:#fff;color:var(--faint);
    font-size:15px;font-weight:700;transition:all .25s var(--ease);cursor:pointer;
}
.feedback-star-input label:hover span{color:var(--accent);border-color:#f3c9a1;background:var(--accent-soft)}
.feedback-star-input input:checked + span{color:#fff;background:var(--grad-accent);border-color:transparent;box-shadow:0 6px 16px rgba(235,127,49,.32)}
.feedback-submit{
    width:100%;margin-top:4px;border:0;border-radius:99px;padding:15px;
    background:var(--grad-brand);color:#fff;font-weight:800;font-size:15px;letter-spacing:.2px;
    box-shadow:0 12px 26px rgba(117,27,27,.30);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feedback-submit:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(117,27,27,.36)}

/* ==========================================================================
   REVIEWS SECTION inline on the service detail page (services._reviews)
   ========================================================================== */

.service-reviews{
    margin-top:30px;padding-top:30px;border-top:1px solid var(--line);
}
.feedback-view-all{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    font-size:13.5px;font-weight:800;color:var(--brand);
    border:1.5px solid var(--line);border-radius:99px;padding:8px 16px;background:var(--paper);
    white-space:nowrap;transition:all .25s var(--ease);
}
.feedback-view-all:hover{border-color:var(--brand);background:var(--brand-soft)}

.review-summary{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    margin-bottom:22px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--paper);
}
.review-avg{display:flex;align-items:center;gap:14px}
.review-avg b{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--ink);letter-spacing:-1px}
.review-avg span{color:var(--accent);font-size:16px;letter-spacing:4px}
.review-avg small{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}

.feedback-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feedback-meta{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
    color:var(--faint);font-size:12px;font-weight:600;
}
.feedback-meta time{white-space:nowrap}

/* ---------- Inline form box (detail page partial) ---------- */

.feedback-form-box{
    margin-top:30px;padding:26px 28px;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
    position:relative;overflow:hidden;
}
.feedback-form-box::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-accent)}
.feedback-form-box h3{margin:0 0 18px;font-family:var(--font-display);font-size:24px;letter-spacing:-.4px;color:var(--ink)}
.feedback-form{display:grid;gap:0}
.feedback-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feedback-form-box input,.feedback-form-box textarea{
    width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);background:#fff;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.feedback-form-box input{margin-bottom:12px}
.feedback-form-box textarea{margin-bottom:12px;resize:vertical;min-height:110px;line-height:1.6}
.feedback-form-box input:focus,.feedback-form-box textarea:focus{outline:none;border-color:var(--brand-bright);box-shadow:0 0 0 4px var(--ring)}
.feedback-form-box .feedback-submit{width:auto;min-width:200px}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1020px){
    .feedback-layout{grid-template-columns:1fr}
    .feedback-form-panel{position:static}
}
@media (max-width:860px){
    .feedback-main{margin:24px auto 60px;padding:0 16px}
    .feedback-hero{padding:28px 24px;border-radius:var(--radius)}
    .feedback-hero-cta{margin-top:6px;width:100%;justify-content:center}
    .feedback-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
    .feedback-card{padding:18px 18px}
    .feedback-card-head,.feedback-head{flex-direction:column;align-items:flex-start;gap:6px}
    .feedback-row{grid-template-columns:1fr}
    .review-avg{gap:10px}
    .review-avg b{font-size:36px}
    .feedback-form-box{padding:20px 18px}
    .feedback-form-panel{padding:22px 20px}
}