/* ============================================================
   Abushaikha Hospitality Consultancy — css/product.css v1.0
   Product pages: Operator Report Audit (/audit) and the
   Owner's Brief (/owners-brief), the sample brief sheets,
   and the calculator cross-sell block.

   Depends only on the tokens and shared classes in style.css
   (colors, .wrap, .card, .eyebrow, .btn, .grid). Every rule
   is scoped under .ahp-* or .pb-* so nothing here can leak
   into existing pages that do not opt in.
   ============================================================ */

/* ---------- 1. Price band ---------- */
.ahp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin:20px 0 4px}
.ahp-price .pr{font-family:var(--disp);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--gold-text)}
.bg-verde .ahp-price .pr,.bg-merlot .ahp-price .pr{color:var(--gold)}
.ahp-price .per{font-size:.9rem;color:var(--mut)}
.bg-verde .ahp-price .per,.bg-merlot .ahp-price .per{color:var(--cream)}
.ahp-note{font-size:.92rem;color:var(--gold-text);font-weight:600}
.bg-verde .ahp-note{color:var(--gold-h)}

/* ---------- 2. Trust strip ---------- */
.ahp-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ahp-trust span{border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:.8rem;color:var(--mut);background:var(--paper)}
.band .ahp-trust span{background:rgba(252,250,244,.08);color:var(--cream);border-color:rgba(198,165,92,.45)}

/* ---------- 3. Send / Get split ---------- */
.ahp-sendget{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
@media(max-width:760px){.ahp-sendget{grid-template-columns:1fr}}
.ahp-sendget .card h3{margin-bottom:10px}
.ahp-sendget .klist li{margin-bottom:12px}

/* ---------- 4. Memo part list ---------- */
.ahp-parts{counter-reset:part;margin-top:30px;display:grid;gap:14px}
.ahp-parts .pt{counter-increment:part;border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:18px 22px 18px 66px;position:relative}
[dir=rtl] .ahp-parts .pt{padding:18px 66px 18px 22px}
.ahp-parts .pt::before{content:counter(part);position:absolute;inset-inline-start:18px;top:16px;width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);color:var(--gold-text);font-size:.95rem}
.ahp-parts .pt h3{font-size:1.02rem;margin-bottom:4px}
.ahp-parts .pt p{font-size:.9rem;color:var(--mut);margin:0}

/* ---------- 5. 5-day steps ---------- */
.ahp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:900px){.ahp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ahp-steps{grid-template-columns:1fr}}
.ahp-steps .st{border-top:2px solid var(--gold);background:var(--paper);border-radius:0 0 3px 3px;border-inline-start:1px solid var(--line);border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 18px}
.ahp-steps .st .d{font:600 .72rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:8px}
.ahp-steps .st h3{font-size:1rem;margin-bottom:6px}
.ahp-steps .st p{font-size:.85rem;color:var(--mut);margin:0}

/* ---------- 6. NDA / confidentiality panel ---------- */
.ahp-nda{background:var(--verde);color:var(--cream);border-radius:3px;padding:30px 34px;margin-top:40px}
.ahp-nda h3{color:var(--gold);margin-bottom:10px;font-size:1.25rem}
.ahp-nda ul{margin-top:12px}
.ahp-nda .klist li::before{color:var(--gold)}

/* ---------- 7. Tier cards ---------- */
.ahp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;align-items:stretch}
@media(max-width:900px){.ahp-tiers{grid-template-columns:1fr}}
.ahp-tier{border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;position:relative}
.ahp-tier.featured{border-color:var(--gold);border-width:2px;background:var(--cream);box-shadow:0 14px 34px rgba(11,54,36,.10)}
.ahp-tier .flag{position:absolute;top:-13px;inset-inline-start:24px;background:var(--gold);color:#172018;font:700 .68rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:99px}
.ahp-tier h3{font-size:1.15rem}
.ahp-tier .tp{font-family:var(--disp);font-size:1.9rem;color:var(--gold-text);margin:10px 0 2px}
.ahp-tier .tp small{font-family:var(--body);font-size:.8rem;color:var(--mut);letter-spacing:0}
.ahp-tier .klist{margin-top:14px;flex:1}
.ahp-tier .klist li{font-size:.88rem}
.ahp-tier .btn{margin-top:18px;text-align:center}

/* ---------- 8. Compare table ---------- */
.ahp-cmp{width:100%;border-collapse:collapse;margin-top:26px;font-size:.88rem}
.ahp-cmp th,.ahp-cmp td{border:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top}
.ahp-cmp thead th{background:var(--verde);color:var(--cream);font-weight:600;font-size:.8rem}
.ahp-cmp tbody th{background:var(--cream);font-weight:600;width:30%}
.ahp-cmp td{background:var(--paper)}

/* ---------- 9. Forms (reuse gate-card look, wider) ---------- */
.ahp-form{max-width:860px;margin:34px auto 0;border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:34px}
.ahp-form form{display:grid;gap:14px}
.ahp-form .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.ahp-form .g2{grid-template-columns:1fr}.ahp-form{padding:22px}}
.ahp-form .field{margin:0}
.ahp-form label{display:block;font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:7px}
.ahp-form input,.ahp-form select,.ahp-form textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:2px;padding:12px 13px;font:400 16px var(--body);color:var(--ink)}
.ahp-form input:focus,.ahp-form select:focus,.ahp-form textarea:focus{outline:2px solid var(--gold-text);outline-offset:2px}
.ahp-nda .ahp-form input:focus,.ahp-nda .ahp-form select:focus,.ahp-nda .ahp-form textarea:focus{outline-color:var(--gold)}
.ahp-form input[name=email],.ahp-form input[name=phone]{direction:ltr;text-align:start}
[dir=rtl] .ahp-form input[name=email],[dir=rtl] .ahp-form input[name=phone]{text-align:right}
.ahp-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--mut)}
.ahp-form .consent input{width:auto;margin-top:3px}
.ahp-form .hp-field{display:none!important}

/* ---------- 10. FAQ ---------- */
.ahp-faq details{border:1px solid var(--line);border-radius:3px;background:var(--paper);margin-bottom:10px}
.ahp-faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:.95rem;list-style:none;position:relative;padding-inline-end:44px}
.ahp-faq summary::-webkit-details-marker{display:none}
.ahp-faq summary::after{content:"+";position:absolute;inset-inline-end:18px;top:12px;font-size:1.3rem;color:var(--gold-text);font-weight:400}
.ahp-faq details[open] summary::after{content:"–"}
.ahp-faq details p{padding:0 20px 18px;font-size:.9rem;color:var(--mut);margin:0}

/* ---------- 11. Calculator cross-sell block ---------- */
.pb-block{margin:26px 0 0;border:1px solid #E4CE9E;border-radius:3px;background:#FBF3DF;padding:22px 26px;max-width:920px;margin-inline:auto}
.pb-block p{font-size:.92rem;color:#5C4A1E;margin:0 0 6px;line-height:1.6}
.pb-block a.fl{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#5C4A1E}
.pb-block .cta-row{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 12. Sample brief — sheets & charts ---------- */
.pb-sample-tools{background:var(--sand);padding:14px 0}
.pb-sample-tools .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--mut)}
.sheet{background:#fff;color:#232822;max-width:830px;margin:26px auto;padding:38px 44px;box-shadow:0 8px 30px rgba(35,40,34,.14);border-top:4px solid var(--verde)}
.sheet h2{font-size:1.15rem;color:var(--verde)}
.sheet .sh-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px;flex-wrap:wrap}
.sheet .sh-head .ttl{font-family:var(--disp);font-size:1.05rem;color:var(--verde)}
.sheet .sh-head .meta{font-size:.74rem;color:var(--mut)}
.sheet p{font-size:.86rem;line-height:1.65;margin:8px 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media(max-width:640px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px solid var(--line);border-radius:3px;padding:10px 12px;background:var(--paper)}
.kpi .kl{font:600 .62rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.kpi .kv{font-family:var(--disp);font-size:1.22rem;color:var(--verde);margin:3px 0 1px}
.kpi .kd{font-size:.68rem;font-weight:600}
.kpi .kd.up{color:var(--ok)}.kpi .kd.dn{color:var(--bad)}.kpi .kd.wn{color:var(--warn)}
.kpi svg{display:block;margin-top:6px}
.gauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
@media(max-width:640px){.gauge-row{grid-template-columns:1fr}}
.gauge{border:1px solid var(--line);border-radius:3px;padding:10px 12px;text-align:center;background:var(--paper)}
.gauge .gl{font:600 .62rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.gauge .gv{font-family:var(--disp);font-size:1.05rem;color:var(--verde)}
.gauge .gs{font-size:.66rem;font-weight:600}
.gauge .gs.ok{color:var(--ok)}.gauge .gs.wn{color:var(--warn)}
.chart-box{border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:14px 16px;margin:12px 0}
.rg2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:640px){.rg2{grid-template-columns:1fr}}
.chart-box .cl{font:600 .68rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:8px;display:block}
.chart-box svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.68rem;color:var(--mut);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;vertical-align:middle}
.act{border-inline-start:3px solid var(--gold);background:var(--paper);border-radius:0 3px 3px 0;padding:10px 14px;margin:10px 0}
.act .at{font-weight:700;font-size:.85rem;color:var(--verde)}
.act .am{font-family:var(--disp);color:var(--gold-text);font-size:.95rem}
.act p{margin:2px 0 0;font-size:.82rem;color:var(--mut)}
.sauz{margin:12px 0}
.sauz .srow{display:grid;grid-template-columns:150px 1fr 92px;gap:10px;align-items:center;margin:8px 0;font-size:.8rem}
@media(max-width:640px){.sauz .srow{grid-template-columns:110px 1fr 80px}}
.sauz .bar{height:14px;border-radius:99px;background:var(--sand);position:relative;overflow:hidden}
.sauz .bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--verde)}
.sauz .bar.mst i{background:transparent;border-inline-start:2px dashed var(--gold-d)}
.sauz .sv{font-weight:700;color:var(--verde);text-align:end}
.vt{width:100%;border-collapse:collapse;font-size:.82rem;margin:10px 0}
.vt th,.vt td{border:1px solid var(--line);padding:8px 10px;text-align:start}
.vt th{background:var(--cream);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.sheet-foot{border-top:1px solid var(--line);margin-top:18px;padding-top:10px;font-size:.68rem;color:var(--mut);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pill{display:inline-block;border:1px solid var(--gold-d);color:var(--gold-text);border-radius:99px;font:700 .6rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;vertical-align:middle}

@media print{
  #hd,#ft,#mm,.wa,.pb-sample-tools,.skip-link{display:none!important}
  body{background:#fff}
  .sheet{box-shadow:none;margin:0 auto;max-width:none;width:100%;page-break-after:always;border-top-width:4px}
  .sheet:last-of-type{page-break-after:auto}
  .ahp-faq,.sec{page-break-inside:avoid}
}
[dir=rtl] .sheet{border-top:4px solid var(--verde)}