/* ============================================================
   Wyra — unified order-review card (.osum-*)
   Shared across the 3 checkout confirm steps: recargas, eSIM, gift cards.
   Goal: ONE coherent "review before you pay" component.

   The brand palette is inlined as literal hex (not CSS vars) on purpose, so
   the component renders identically on every page regardless of each page's
   own --var names (recargar/giftcards define --cyan etc.; the eSIM modal uses
   literal hex). The .osum- namespace avoids collisions with each page's CSS.

   Palette: cyan #00C4D8 / cyan-dark #008C9A / cyan-light #E6FAFB
            text #0D1B2A / text2 #5A6B7F / text3 #8A9BB0 / border #E8ECF2
            green-dark #009668 / green-light #E8FAF2  (delivery badge)
            gift  #8A5A00 on #FFF6E9 / #F6E2BE        (gift recipient strip)
   ============================================================ */

/* --- identity card: logo + name + sub-detail, with the "what they get" line --- */
.osum-card{border:1px solid #E8ECF2;border-radius:16px;padding:15px 16px;margin:0 0 12px;background:#fff}
.osum-id{display:flex;align-items:center;gap:12px}
.osum-id--bordered{padding-bottom:13px;border-bottom:1px solid #E8ECF2}
.osum-logo{width:46px;height:46px;border-radius:12px;flex-shrink:0;object-fit:contain;background:#fff;border:1px solid #E8ECF2;padding:5px;display:block}
.osum-logo-fallback{width:46px;height:46px;border-radius:12px;flex-shrink:0;background:#E6FAFB;color:#008C9A;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;line-height:1}
.osum-logo-fallback.osum-logo--emoji{font-size:26px;font-weight:400}
.osum-id-info{min-width:0;flex:1}
.osum-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:#0D1B2A;line-height:1.25}
.osum-subrow{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:13px;color:#5A6B7F;line-height:1.3}
.osum-subrow .osum-flag{width:20px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0}

/* --- the headline deliverable ("Recipient gets" / "Card value") --- */
.osum-gets{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:13px}
.osum-gets-label{font-size:13px;color:#5A6B7F;font-weight:600}
.osum-gets-val{font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;color:#008C9A;text-align:right;line-height:1.2}

/* --- detail rows inside the identity card (Data / Validity ...) --- */
.osum-rows{margin-top:11px}
.osum-rows .osum-row{padding:9px 0}
.osum-rows .osum-row:first-child{border-top:1px solid #E8ECF2}

/* --- price breakdown card (subtotal / fee / total) --- */
.osum-breakdown{border:1px solid #E8ECF2;border-radius:16px;padding:3px 16px;margin:0 0 12px;background:#fff}
.osum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14px;border-bottom:1px solid #E8ECF2}
.osum-row:last-child{border-bottom:none}
.osum-row .osum-l{color:#5A6B7F;font-weight:500}
.osum-row .osum-r{font-weight:700;color:#0D1B2A}
.osum-row--total{border-bottom:none;padding-top:13px;padding-bottom:13px}
.osum-row--total .osum-l{color:#0D1B2A;font-weight:700;font-size:16px}
.osum-row--total .osum-r{color:#00C4D8;font-weight:800;font-size:19px}

/* --- delivery promise badge (green) --- */
.osum-delivery{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:#009668;background:#E8FAF2;border-radius:11px;padding:11px 12px;margin:0 0 14px;text-align:center;line-height:1.4}

/* --- gift recipient strip (amber) --- */
.osum-giftstrip{display:flex;align-items:center;gap:8px;background:#FFF6E9;border:1px solid #F6E2BE;border-radius:11px;padding:9px 12px;margin:12px 0 0;font-size:12.5px;color:#8A5A00;line-height:1.4}

/* --- optional creator-code field --- */
.osum-code{display:flex;flex-direction:column;gap:4px;margin:0 0 14px}
.osum-code label{font-size:13px;font-weight:600;color:#5A6B7F}
.osum-code input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #CBD5E1;border-radius:11px;font-size:15px;font-family:monospace;letter-spacing:.04em;text-transform:uppercase;background:#FAFBFD;color:#0D1B2A}
.osum-code input:focus{outline:none;border-color:#00C4D8;box-shadow:0 0 0 4px rgba(0,194,214,.12)}
.osum-code .osum-codenote{font-size:12px;color:#8A9BB0;margin:2px 0 0;line-height:1.45}

/* --- consent + Stripe trust line --- */
.osum-consent{font-size:13px;color:#5A6B7F;text-align:center;line-height:1.5;margin:14px 0 0}
.osum-consent a{color:#00C4D8;text-decoration:underline}
.osum-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#5A6B7F;line-height:1.5;margin:8px 0 0;text-align:center}

/* --- Wyra promise signals (refund + human support + link) at the decision moment --- */
.osum-signals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:2px;font-size:11.5px;color:#5A6B7F;line-height:1.5;margin:6px 0 0;text-align:center}
.osum-signals a{color:#008C9A;font-weight:600;text-decoration:underline}
.osum-sig-sep{color:#B9C4D2}

/* --- RTL: keep the right-aligned values flush to the reading edge --- */
[dir="rtl"] .osum-gets-val,[dir="rtl"] .osum-row .osum-r{text-align:left}