/* oga-gift-picker.css — the Oga Gift picker (_OgaGiftPicker.cshtml) in the site's look (myoga-theme.css,
   the poll card's design system): the balance chip, the strip of gifts + More, the quantity, the action;
   the "every gift" panel (centered on desktop, a bottom sheet on phones). Mobile first. */
.ogagp, .ogagp-panel {
    --gp-navy: #0B2C57; --gp-navy2: #0A2340; --gp-blue: #1F7BC0; --gp-cyan: #2BB3E3; --gp-red: #E63329; --gp-redD: #C4271E;
    --gp-border: #CFE6F5; --gp-line: #E3EEF6; --gp-muted: #6C8098; --gp-section: #E9F5FC; --gp-section2: #F2FAFF; --gp-gold: #8B6508;
    font-family: 'Nunito', system-ui, -apple-system, sans-serif; color: var(--gp-navy); text-align: left;
}
.ogagp *, .ogagp *::before, .ogagp *::after, .ogagp-panel *, .ogagp-panel *::before, .ogagp-panel *::after { box-sizing: border-box; }
.ogagp { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fff; border: 1.5px solid var(--gp-border); border-radius: 16px; }

/* the hint (left) + the balance chip (right) */
.ogagp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.ogagp-hint { min-width: 0; font-size: 13px; font-weight: 700; color: var(--gp-muted); }
.ogagp-hint b { color: var(--gp-navy); }
.ogagp-hint img { width: 14px; height: 14px; vertical-align: -2px; }
.ogagp-hint .over, .ogagp-hint .bad { color: var(--gp-redD); }
.ogagp-top .ogarecharge-chip { margin-left: auto; flex: none; }

/* the strip */
.ogagp-strip { display: flex; align-items: stretch; gap: 8px; }
.ogagp-row { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.ogagp-row::-webkit-scrollbar { display: none; }
.ogagp-gift {
    position: relative; flex: none; display: flex; align-items: center; gap: 6px; max-width: 180px; height: 46px; padding: 0 10px 0 6px;
    border: 1.5px solid var(--gp-border); border-radius: 12px; background: #fff; cursor: pointer; scroll-snap-align: start;
    font: 800 13px 'Nunito', system-ui, sans-serif; color: var(--gp-navy); transition: border-color .15s ease, background .15s ease;
}
.ogagp-gift:hover { border-color: var(--gp-cyan); }
.ogagp-gift.on { border-color: var(--gp-cyan); background: var(--gp-section); box-shadow: 0 0 0 2px rgba(43,179,227,.25); }
.ogagp-gift .ck { display: none; position: absolute; top: -6px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--gp-cyan); color: #fff; align-items: center; justify-content: center; font-size: 11px; }
.ogagp-gift.on .ck { display: flex; }
.ogagp .gi, .ogagp-panel .gi { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.ogagp .gi img, .ogagp-panel .gi img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* a gift card: the light green of the Recharge chip, around the gift's image only */
.ogagp-gift .gi, .ogagp-tile .gi { background: #E7F7EE; border-radius: 9px; }
.ogagp-gift .gi { width: 34px; height: 34px; padding: 3px; }
.ogagp .gn, .ogagp-panel .gn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogagp .gp, .ogagp-panel .gp { flex: none; display: inline-flex; align-items: center; gap: 3px; font: 800 13px 'Poppins', system-ui, sans-serif; color: var(--gp-gold); }
.ogagp .gp img, .ogagp-panel .gp img { width: 15px; height: 15px; }
.ogagp-more { flex: none; width: 46px; border: none; border-radius: 12px; background: var(--gp-navy); color: #fff; font-size: 16px; cursor: pointer; }
.ogagp-more:hover { background: var(--gp-navy2); }
.ogagp-skel { flex: none; width: 120px; height: 46px; border-radius: 12px; background: linear-gradient(90deg, var(--gp-section2), #fff, var(--gp-section2)); background-size: 200% 100%; animation: ogagpShimmer 1.2s linear infinite; }
@keyframes ogagpShimmer { to { background-position: -200% 0; } }
.ogagp-none { padding: 12px 4px; font-size: 13px; font-weight: 700; color: var(--gp-muted); }

/* the gift picked, × quantity = total — in the foot, between the quantity and the action */
.ogagp-sel { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--gp-section2); font-size: 14px; font-weight: 800; }
.ogagp-sel[hidden] { display: none; }
.ogagp-sel .mult { color: var(--gp-blue); font-family: 'Poppins', system-ui, sans-serif; flex: none; }
.ogagp-sel .eq { color: var(--gp-muted); flex: none; }
.ogagp-sel .gp { margin-left: auto; font-size: 15px; }
.ogagp-sel .gi { width: 30px; height: 30px; padding: 3px; background: #E7F7EE; border-radius: 8px; }

/* the quantity + the action */
.ogagp-foot { display: flex; align-items: stretch; gap: 10px; }
.ogagp-qty { flex: none; display: flex; align-items: center; gap: 4px; width: 96px; height: 50px; margin: 0; padding: 0 12px; border: 1.5px solid var(--gp-border); border-radius: 12px; background: #fff; cursor: text; }
.ogagp-qty:focus-within { border-color: var(--gp-cyan); box-shadow: 0 0 0 2px rgba(43,179,227,.2); }
.ogagp-qty span { font: 800 16px 'Poppins', system-ui, sans-serif; color: var(--gp-muted); }
.ogagp .ogagp-qty input[type="text"] { width: 100%; min-width: 0; height: auto; padding: 0; border: none; border-radius: 0; outline: none; box-shadow: none; background: transparent; font: 800 17px 'Poppins', system-ui, sans-serif; color: var(--gp-navy); }
.ogagp-action {
    flex: none; margin-left: auto; min-width: 140px; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 22px; border: none; border-radius: 12px;
    background: var(--gp-red); color: #fff !important; font: 800 15px 'Poppins', system-ui, sans-serif; text-decoration: none !important; cursor: pointer; transition: background .15s ease;
}
.ogagp-action:hover { background: var(--gp-redD); }
.ogagp-action:disabled { opacity: .45; cursor: not-allowed; }
.ogagp-msg { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--gp-section2); color: var(--gp-blue); }
.ogagp-msg[hidden] { display: none; }
.ogagp-msg.err { background: #FDECEB; color: var(--gp-redD); }
.ogagp-msg.ok { background: #E7F7EE; color: #1E7A45; }
.ogagp-msg a { color: inherit; text-decoration: underline; font-weight: 800; }

/* a phone: the total on its own line above, the quantity and the action below */
@media (max-width: 560px) {
    .ogagp-foot { flex-wrap: wrap; }
    .ogagp-sel { order: -1; flex-basis: 100%; }
    .ogagp-action { flex: 1 1 auto; }
}
/* vertical gift cards (o.vertical) */
.ogagp-vert .ogagp-gift { flex-direction: column; justify-content: center; gap: 4px; width: 86px; max-width: none; height: auto; padding: 8px 3px 7px; text-align: center; }
.ogagp-vert .ogagp-gift .gi { width: 46px; height: 46px; padding: 5px; font-size: 26px; }
.ogagp-vert .ogagp-gift .gn { max-width: 100%; font-size: 12px; }
.ogagp-vert .ogagp-gift .gp { font-size: 12px; }
.ogagp-vert .ogagp-skel { width: 92px; height: 104px; }
.ogagp-vert .ogagp-more { width: 46px; }
@media (max-width: 400px) {
    .ogagp { padding: 10px; }
    .ogagp-gift { height: 42px; max-width: 150px; font-size: 12.5px; }
    .ogagp-more { width: 42px; }
    .ogagp-qty { width: 84px; height: 48px; }
    .ogagp-action { min-height: 48px; font-size: 14px; }
}

/* ---- every gift: the "More" flyout — small, attached to the button that opens it (a tooltip, not a modal):
   directly above the button, right edges aligned, kept on screen; placed by JS (position: fixed) ---- */
.ogagp-panel { position: fixed; z-index: 5500; width: calc(100vw - 16px); max-width: 460px; max-height: 420px; }
.ogagp-panel[hidden] { display: none; }
.ogagp-sheet { width: 100%; height: 100%; max-height: inherit; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gp-border); border-radius: 16px; box-shadow: 0 18px 48px rgba(11,44,87,.28); overflow: hidden; }
/* the navy header band of the site's windows (the Studio's question modal): white title, white × */
.ogagp-phead { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: var(--gp-navy); }
.ogagp-phead h3 { flex: 1; margin: 0; font: 700 14px 'Poppins', system-ui, sans-serif; color: #fff; }
.ogagp-x { width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; cursor: pointer; }
.ogagp-x:hover { background: rgba(255,255,255,.22); color: #fff; }
.ogagp-pbody { padding: 2px 10px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ogagp-pbody section { content-visibility: auto; contain-intrinsic-size: 240px; }
.ogagp-pbody h4 { margin: 10px 2px 6px; font: 800 10.5px 'Nunito', system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--gp-muted); }
.ogagp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.ogagp-tile {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 7px 3px 6px; border: 1.5px solid var(--gp-border);
    border-radius: 10px; background: #fff; cursor: pointer; font: 800 11px 'Nunito', system-ui, sans-serif; color: var(--gp-navy); text-align: center;
}
.ogagp-tile:hover { border-color: var(--gp-cyan); }
.ogagp-tile.on { border-color: var(--gp-cyan); background: var(--gp-section); }
.ogagp-tile .gi { width: 38px; height: 38px; padding: 4px; font-size: 22px; }
.ogagp-tile .gn { max-width: 100%; }
.ogagp-panel .ogagp-tile .gp { font-size: 11px; }
.ogagp-panel .ogagp-tile .gp img { width: 12px; height: 12px; }
.ogagp-more.open { border-color: var(--gp-cyan); color: var(--gp-cyan); }
@media (max-width: 400px) {
    .ogagp-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 5px; }
}