/* GringoBox customer portal, Step 8 Phase 2: the approved dashboard look (#03/#04, screens per #05) carried into
   every other signed-in portal page. Scoped to body.d4-on, so the login screen and public pages are untouched. */
body.d4-on .gb-h1{font-family:var(--d4-head);font-weight:800;font-size:28px;line-height:1.1;color:var(--d4-ink);letter-spacing:0;margin:2px 0 12px}
body.d4-on .gb-h2{font-family:var(--d4-head);font-weight:800;font-size:20px;line-height:1.15;color:var(--d4-ink);letter-spacing:0}
body.d4-on .gb-headline,body.d4-on .gb-feature h3{font-family:var(--d4-head);font-weight:800;color:var(--d4-ink);letter-spacing:0}
body.d4-on .gb-card{border-radius:16px;border-color:var(--d4-line);box-shadow:0 1px 2px rgba(14,47,120,.05),0 8px 22px rgba(14,47,120,.08)}
body.d4-on .gb-sub{color:#4A5F86;font-weight:600}
body.d4-on .gb-money.big{font-family:var(--d4-head);font-weight:800;color:var(--d4-ink)}
body.d4-on .gb-code{font-family:var(--d4-head);font-weight:800}
body.d4-on .gb-back{font-family:var(--d4-head);font-weight:700;font-size:16px;color:var(--d4-blue)}

/* buttons */
body.d4-on .gb-btn{font-family:var(--d4-head);font-weight:700;font-size:17px;border-radius:12px;padding:0 20px}
body.d4-on .gb-btn.green{background:linear-gradient(180deg,#22B26C,#168A52)}
body.d4-on .gb-btn.blue{background:linear-gradient(180deg,#1B7BF2,#0D5FD6)}
body.d4-on .gb-btn.red{background:linear-gradient(180deg,#F0525E,#D32F3C)}
body.d4-on .gb-btn.ghost{border-color:var(--d4-blue);color:var(--d4-blue)}

/* forms */
body.d4-on .gb-form label{color:var(--d4-ink);font-size:13.5px}
body.d4-on .gb-form input,body.d4-on .gb-form select,body.d4-on .gb-form textarea,body.d4-on .gb-search input{border-color:#CFE0F0;border-radius:12px}
body.d4-on .gb-form input:focus,body.d4-on .gb-form select:focus,body.d4-on .gb-form textarea:focus,body.d4-on .gb-search input:focus{outline:3px solid rgba(18,87,214,.25);border-color:var(--d4-blue)}
body.d4-on .gb-choice label{border-color:#CFE0F0;font-weight:700;color:var(--d4-ink)}
body.d4-on .gb-choice label:has(input:checked){border-color:var(--d4-blue);background:#E3F1FD}
body.d4-on .gb-quote,body.d4-on .gb-method{border-color:var(--d4-line);background:#F5FAFE}
body.d4-on .gb-kv{border-color:var(--d4-line)}

/* pills, steps, stores */
body.d4-on .gb-filters button{border-color:#CFE0F0;color:var(--d4-ink);font-weight:700;padding:8px 16px;min-height:38px}
body.d4-on .gb-filters button.on{background:linear-gradient(180deg,#1B7BF2,#0D5FD6);border-color:#0D5FD6;color:#fff}
body.d4-on .gb-steps li{border-color:#CFE0F0;font-weight:700}
body.d4-on .gb-steps li.now{border-color:var(--d4-blue);color:var(--d4-blue);background:#E3F1FD}
body.d4-on .gb-steps li.now span{background:var(--d4-blue)}
body.d4-on .gb-store{border-color:#CFE0F0;color:var(--d4-ink)}
body.d4-on .gb-store.on{border-color:var(--d4-blue);background:#E3F1FD;color:var(--d4-blue)}

/* lists */
body.d4-on .gb-note{border-color:var(--d4-line);border-radius:14px}
body.d4-on .gb-note b{color:var(--d4-ink)}
body.d4-on .gb-note .ic{background:linear-gradient(180deg,#1B7BF2,#0D5FD6)}
body.d4-on .gb-note.payments .ic{background:linear-gradient(180deg,#22B26C,#168A52)}
body.d4-on .gb-note.delivery .ic{background:linear-gradient(180deg,#FF9A2E,#F2780C)}
body.d4-on .gb-menu a,body.d4-on .gb-faq summary{color:var(--d4-ink)}
body.d4-on .gb-menu svg{color:var(--d4-blue)}
body.d4-on .gb-empty img{width:min(300px,86%);border-radius:14px;box-shadow:0 3px 9px rgba(14,47,120,.16)}
body.d4-on .gb-stat{border-color:var(--d4-line);border-radius:14px}
body.d4-on .gb-stat .n{font-family:var(--d4-head);font-weight:800}
body.d4-on .gb-vt .t b{color:var(--d4-ink)}

/* ---------- page header card ---------- */
.p8-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--d4-line);border-radius:16px;
  box-shadow:0 1px 2px rgba(14,47,120,.05),0 8px 22px rgba(14,47,120,.08);padding:14px 16px;margin-bottom:14px}
.p8-head h1{font-family:var(--d4-head);font-weight:800;font-size:28px;line-height:1.1;color:var(--d4-ink);margin:0 0 4px}
.p8-head p{margin:0;font-size:14.5px;font-weight:600;color:#33456B;line-height:1.35}
.p8-head .art{border-radius:12px;overflow:hidden;box-shadow:0 3px 9px rgba(14,47,120,.16);background:#DCEEFC;justify-self:center;width:min(100%,340px)}
.p8-head .art img{display:block;width:100%;height:auto}
.p8-head .art.plain{background:#F4F4F1;box-shadow:none;width:min(100%,170px)}
.p8-head .art.ico{display:grid;place-items:center;aspect-ratio:2/1;background:linear-gradient(135deg,#C9E6FB,#8FD0F5);color:#fff;width:min(100%,220px)}
.p8-head .art.ico svg{width:64px;height:64px;filter:drop-shadow(0 2px 3px rgba(14,47,120,.3))}
@media(min-width:700px){.p8-head{grid-template-columns:minmax(0,1fr) auto;padding:16px 20px}.p8-head .art{width:250px}.p8-head .art.plain{width:150px}.p8-head .art.ico{width:200px}}

/* ---------- My Packages (#05) ---------- */
.p8-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-bottom:12px}
.p8-bar .gb-search{flex:1 1 220px;margin:0}
.p8-bar .gb-btn{flex:0 0 auto}
@media(max-width:480px){.p8-bar .gb-btn{flex:1 1 100%}}
.p8-pkg{display:grid;grid-template-columns:96px minmax(0,1fr) auto 18px;gap:14px;align-items:center;padding:10px 14px 10px 10px;border:1px solid var(--d4-line);border-radius:16px;background:#fff;
  margin-bottom:10px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(14,47,120,.05),0 6px 16px rgba(14,47,120,.06);transition:transform .15s,box-shadow .15s}
.p8-pkg:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(14,47,120,.14)}
.p8-pkg:focus-visible{outline:3px solid rgba(18,87,214,.45);outline-offset:2px}
.p8-pkg .th{width:96px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#DCEEFC}
.p8-pkg .th img{display:block;width:100%;height:100%;object-fit:cover}
.p8-pkg .code{font-size:12.5px;font-weight:800;color:var(--d4-blue)}
.p8-pkg h4{margin:0 0 2px;font-family:var(--d4-head);font-weight:700;font-size:17.5px;line-height:1.15;color:var(--d4-ink);overflow-wrap:anywhere}
.p8-pkg .meta{font-size:12.5px;color:#4A5F86;font-weight:600;overflow-wrap:anywhere}
.p8-pkg .right{display:grid;gap:5px;justify-items:start}
.p8-amt{display:flex;align-items:center;gap:8px;font-family:var(--d4-head);font-weight:800;font-size:16px;color:var(--d4-ink);white-space:nowrap;line-height:1}
.p8-amt img{width:26px;height:auto;border-radius:3px}
.p8-amt small{font-size:.75em}
.p8-pkg .go{width:10px;height:10px;border-right:2.5px solid var(--d4-ink);border-top:2.5px solid var(--d4-ink);transform:rotate(45deg);justify-self:center}
@media(max-width:620px){.p8-pkg{grid-template-columns:76px minmax(0,1fr) 14px;gap:10px}.p8-pkg .th{width:76px}
  .p8-pkg .right{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.p8-pkg .go{grid-column:3;grid-row:1}}

/* ---------- package tracking (#05) ---------- */
.p8-pic{position:relative;aspect-ratio:3/2;background:#DCEEFC}
.p8-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p8-loc{background:#F1F8FE;border:1px solid var(--d4-line);border-radius:14px;padding:12px 14px}
.p8-loc h2{margin:0 0 2px}
.p8-where{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--d4-ink)}
.p8-where svg{width:18px;height:18px;color:var(--d4-blue);flex:0 0 auto}
.p8-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:12px}
.p8-route .end{text-align:center;font-family:var(--d4-head);font-weight:700;font-size:15px;color:var(--d4-ink);line-height:1.2}
.p8-route .end img{display:block;width:52px;height:auto;margin:0 auto 4px;border-radius:4px}
.p8-route .mid{position:relative;height:46px;margin-bottom:22px}
.p8-route .mid::before{content:'';position:absolute;left:0;right:0;top:22px;border-top:3px dashed #9DB7D3}
.p8-route .mid i{position:absolute;left:0;top:21px;height:4px;border-radius:2px;background:#1FA463}
.p8-route .mid span{position:absolute;top:4px;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:linear-gradient(180deg,#1B7BF2,#0D5FD6);color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(18,87,214,.4)}
.p8-route .mid span svg{width:21px;height:21px}

/* ---------- payments (#05) ---------- */
.p8-total{display:grid;gap:6px;margin:2px 0 6px}
.p8-total .d4-cur b{font-size:clamp(24px,7vw,30px)}
.p8-paylist{display:grid;gap:8px;margin-top:4px}
.p8-pm{display:flex;gap:12px;align-items:flex-start;border:1.5px solid #CFE0F0;border-radius:12px;padding:11px 12px;background:#fff;font-size:14px;overflow-wrap:anywhere;min-width:0}
.p8-pm .dot{width:18px;height:18px;border-radius:50%;border:2px solid #9DB7D3;flex:0 0 auto;margin-top:2px}
.p8-pm b{display:block;color:var(--d4-ink);font-size:15px}
.p8-pm .tx{min-width:0;flex:1;color:#33456B;font-weight:600}
.p8-pm.soon{background:#F3F6FA;border-style:dashed;color:#6B7A93}
.p8-pm.soon b{color:#5C6F92}
.p8-pm.soon .dot{border-color:#C5D2E0;background:#E6ECF3}
.p8-soon{display:inline-block;background:#FFF1D6;color:#8A5200;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;margin-left:6px;white-space:nowrap}
.p8-cardic{display:inline-flex;gap:5px;margin-top:6px;opacity:.75}
.p8-cardic i{width:34px;height:22px;border-radius:4px;background:#C9D5E3;position:relative;display:block}
.p8-cardic i::before{content:'';position:absolute;left:0;right:0;top:5px;height:4px;background:#8FA1B8}

/* ---------- account (#05) ---------- */
.p8-prof{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--d4-line);border-radius:16px;padding:12px 16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(14,47,120,.05),0 8px 22px rgba(14,47,120,.08)}
.p8-prof .d4-avatar{width:60px;height:60px}
.p8-prof b{display:block;font-family:var(--d4-head);font-weight:800;font-size:21px;color:var(--d4-ink);line-height:1.1;overflow-wrap:anywhere}
.p8-prof span.s{font-size:13px;font-weight:700;color:#4A5F86}
.p8-prof .tx{min-width:0;flex:1}
.p8-cardic{display:flex}
@media(max-width:699px){.p8-head .art.ico{display:none}}