/**
 * sponsors.css — GYM-S POWER · IT5
 * Carrusel de regalos, panel VER REGALOS y modal REGALAR.
 * Depende de: base.css (variables --ac, --bg, etc.)
 * @package GymsPower
 */

/* ═══════════════════════════════════════════════════════════
   GIFT CARDS — estilos movidos a base.css (IT7 rediseño)
   Los estilos .hud-gift-card ahora viven en base.css
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PANEL VER REGALOS (slide desde la izquierda)
═══════════════════════════════════════════════════════════ */
.gifts-panel {
    position: fixed; inset: 0; z-index: 150;
    display: flex; align-items: stretch; justify-content: flex-start;
}
.gifts-panel[hidden]   { display: none; }
.gifts-panel.is-open .gifts-panel__box      { transform: translateX(0); }
.gifts-panel.is-open .gifts-panel__backdrop { opacity: 1; }

.gifts-panel__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .32s ease;
}

.gifts-panel__box {
    position: relative; z-index: 1;
    background: rgba(8,4,14,.97);
    border-right: 1px solid rgba(232,121,249,.2);
    width: min(420px, 100vw);
    height: 100%;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
}
.gifts-panel__box .hud-corner {
    position: absolute; width: 10px; height: 10px;
    border-color: #e879f9; border-style: solid; opacity: .5;
}
.gifts-panel__box .hud-corner--tl { top:6px; left:6px;  border-width:1px 0 0 1px; }
.gifts-panel__box .hud-corner--tr { top:6px; right:6px; border-width:1px 1px 0 0; }

/* Header */
.gifts-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(232,121,249,.12);
    flex-shrink: 0;
    background: rgba(0,0,0,.4);
}
.gifts-panel__title {
    font-family: var(--font-hud); font-size: .85rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #f3d8fe;
    display: flex; align-items: center; gap: .5rem;
}
.gifts-panel__controls {
    display: flex; align-items: center; gap: .5rem;
}

/* Filtros del panel */
.gifts-filter {
    display: flex; gap: .2rem;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(232,121,249,.15);
    border-radius: var(--r); padding: .15rem;
}
.gifts-filter__btn {
    font-family: var(--font-hud); font-size: .58rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); background: transparent; border: none;
    padding: .25rem .45rem; border-radius: 2px;
    transition: all var(--t);
}
.gifts-filter__btn.is-active {
    background: #e879f9; color: #0a0010;
    box-shadow: 0 0 8px rgba(232,121,249,.35);
}
.gifts-filter__btn:hover:not(.is-active) { color: var(--text); }

/* Grid de regalos */
.gifts-grid {
    flex: 1; overflow-y: auto; padding: .75rem;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .6rem; align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,121,249,.2) transparent;
}
.gifts-grid::-webkit-scrollbar { width: 4px; }
.gifts-grid::-webkit-scrollbar-thumb {
    background: rgba(232,121,249,.2); border-radius: 2px;
}

/* Gift card en el grid del panel */
.gift-card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 5px; overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    transition: border-color var(--t), transform var(--t);
}
.gift-card:hover { border-color: rgba(232,121,249,.25); transform: translateY(-1px); }

.gift-card--featured {
    border-color: rgba(232,121,249,.18);
    background: linear-gradient(160deg, rgba(12,6,16,.98), rgba(6,3,10,.98));
}
.gift-card--featured:hover {
    border-color: rgba(232,121,249,.5);
    box-shadow: 0 0 10px rgba(232,121,249,.15);
}
.gift-card__glow {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 18px rgba(232,121,249,.07);
}

.gift-card__img-wrap {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: linear-gradient(160deg,#0c0a0f,#060408);
}
.gift-card__img { width:100%; height:100%; object-fit:cover; display:block; }
.gift-card__img-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem;
}
.gift-card__type-badge {
    position: absolute; bottom:0; left:0; right:0;
    font-family: var(--font-hud); font-size: .52rem; font-weight: 700;
    letter-spacing: .1em; text-align: center;
    padding: .15rem;
    background: rgba(0,0,0,.82);
    color: var(--ac);
    border-top: 1px solid rgba(170,255,0,.1);
}
.gift-card--featured .gift-card__type-badge {
    color: #e879f9;
    border-top-color: rgba(232,121,249,.2);
}

.gift-card__body { padding: .45rem .5rem .5rem; flex:1; }
.gift-card__sponsor-row {
    display: flex; align-items: center; gap: .3rem;
    margin-bottom: .2rem;
}
.gift-card__avatar {
    width:18px; height:18px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    border: 1px solid rgba(255,255,255,.08);
}
.gift-card__sponsor {
    font-family: var(--font-hud); font-size: .58rem; font-weight: 700;
    color: var(--text-muted); letter-spacing:.06em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.gift-card__title {
    font-family: var(--font-hud); font-size: .68rem; font-weight: 700;
    color: var(--text); letter-spacing:.02em; line-height:1.3;
    overflow:hidden; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical;
    margin-bottom: .2rem;
}
.gift-card--featured .gift-card__title { color: #f3d8fe; }
.gift-card__desc {
    font-size: .6rem; color: var(--text-muted); line-height:1.4;
    overflow:hidden; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:0;
}

/* Estado vacío / filtro vacío */
.gifts-empty {
    grid-column: 1/-1; text-align:center;
    padding:2rem 1rem;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.gifts-empty__icon { font-size:2.5rem; opacity:.4; }
.gifts-empty p { font-size:.78rem; color:var(--text-muted); font-family:var(--font-hud); letter-spacing:.05em; }
.gifts-empty__sub { font-size:.68rem !important; }

.gifts-filter-empty { padding: 1.5rem .5rem; }

/* Footer del panel */
.gifts-panel__footer {
    padding: .7rem 1rem;
    border-top: 1px solid rgba(232,121,249,.1);
    flex-shrink: 0;
    background: rgba(0,0,0,.3);
}
.gifts-panel__footer .hud-btn { width:100%; justify-content:center; }

body.gifts-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   MODAL REGALAR — multi-paso
═══════════════════════════════════════════════════════════ */
.regalar-modal {
    position: fixed; inset: 0; z-index: 210;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.regalar-modal[hidden]   { display: none; }
.regalar-modal.is-open .regalar-modal__box      { opacity:1; transform:scale(1) translateY(0); }
.regalar-modal.is-open .regalar-modal__backdrop { opacity:1; }

.regalar-modal__backdrop {
    position:absolute; inset:0;
    background: rgba(0,0,0,.8);
    backdrop-filter: blur(8px);
    opacity:0; transition: opacity .3s ease;
}

.regalar-modal__box {
    position: relative; z-index:1;
    background: rgba(8,4,14,.97);
    border: 1px solid rgba(232,121,249,.25);
    border-radius: 8px;
    width:100%; max-width:500px;
    max-height: 90vh; max-height: 90dvh;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    opacity:0;
    transform: scale(.96) translateY(16px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
    scrollbar-width: thin;
    scrollbar-color: rgba(232,121,249,.2) transparent;
}
.regalar-modal__box .hud-corner {
    position:absolute; width:10px; height:10px;
    border-color:#e879f9; border-style:solid; opacity:.6;
}
.regalar-modal__box .hud-corner--tl { top:6px; left:6px;  border-width:1px 0 0 1px; }
.regalar-modal__box .hud-corner--tr { top:6px; right:6px; border-width:1px 1px 0 0; }
.regalar-modal__box .hud-corner--bl { bottom:6px; left:6px;  border-width:0 0 1px 1px; }
.regalar-modal__box .hud-corner--br { bottom:6px; right:6px; border-width:0 1px 1px 0; }

/* Header del modal */
.regalar-modal__header {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem .7rem;
    border-bottom: 1px solid rgba(232,121,249,.12);
    flex-shrink:0;
}
.regalar-modal__title {
    flex:1;
    font-family: var(--font-hud); font-size: .85rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:#f3d8fe;
    display:flex; align-items:center; gap:.4rem;
}
.regalar-modal__title-icon { font-size:1rem; }

/* Dots de progreso */
.regalar-modal__steps {
    display: flex; align-items:center; gap:.35rem;
}
.regalar-step-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(232,121,249,.18);
    border: 1px solid rgba(232,121,249,.25);
    transition: all .25s ease;
    flex-shrink:0;
}
.regalar-step-dot.is-active {
    background: #e879f9;
    box-shadow: 0 0 6px rgba(232,121,249,.6);
    width: 18px; border-radius: 4px;
}
.regalar-step-dot.is-completed {
    background: rgba(232,121,249,.5);
}

/* Contenido de cada paso */
.regalar-step-content {
    padding: 1.2rem 1rem 1.4rem;
}

/* ── Paso 1: Elegir tipo ───────────────────────── */
.regalar-intro {
    font-family: var(--font-hud); font-size: .75rem;
    color: var(--text-muted); letter-spacing:.04em;
    margin-bottom: 1rem; text-align:center;
}
.regalar-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.regalar-type-card {
    display: flex; flex-direction:column; align-items:center;
    text-align: center;
    padding: 1rem .75rem 1.1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: border-color var(--t), background var(--t), transform var(--t);
    gap: .35rem;
}
.regalar-type-card:hover {
    border-color: rgba(170,255,0,.35);
    background: rgba(170,255,0,.04);
    transform: translateY(-2px);
}
.regalar-type-card--featured {
    border-color: rgba(232,121,249,.2);
    background: linear-gradient(160deg, rgba(14,6,20,.8), rgba(8,3,12,.8));
}
.regalar-type-card--featured:hover {
    border-color: rgba(232,121,249,.55);
    background: rgba(232,121,249,.06);
}
.regalar-type-card.is-disabled {
    opacity: .45; cursor: not-allowed;
}
.regalar-type-card.is-disabled:hover {
    transform: none;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.regalar-type-card__badge {
    position: absolute; top: -10px; left:50%; transform:translateX(-50%);
    font-family: var(--font-hud); font-size: .5rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    background: #e879f9; color: #0a0010;
    padding: .15rem .5rem; border-radius: 20px;
    white-space: nowrap;
}
.regalar-type-card__icon {
    font-size: 2rem; line-height:1;
}
.regalar-type-card__name {
    font-family: var(--font-hud); font-size: .8rem; font-weight:700;
    letter-spacing:.1em; color: var(--text);
}
.regalar-type-card--featured .regalar-type-card__name { color: #f3d8fe; }
.regalar-type-card__desc {
    font-family: var(--font-hud); font-size: .65rem;
    color: var(--text-muted); line-height:1.45;
    margin:0;
}
.regalar-type-card__price {
    display: block; margin-top:.3rem;
    font-size: .75rem; font-weight:700;
    color: var(--ac);
}
.regalar-type-card--featured .regalar-type-card__price { color: #e879f9; }
.regalar-type-card__select-btn {
    margin-top:.4rem;
    font-family: var(--font-hud); font-size: .62rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color: var(--ac); border: 1px solid rgba(170,255,0,.3);
    border-radius: var(--r); padding: .2rem .6rem;
    transition: background var(--t), color var(--t);
}
.regalar-type-card:hover .regalar-type-card__select-btn {
    background: var(--ac); color:#000;
}
.regalar-type-card__select-btn--featured { color:#e879f9; border-color:rgba(232,121,249,.3); }
.regalar-type-card--featured:hover .regalar-type-card__select-btn--featured {
    background:#e879f9; color:#0a0010;
}

/* ── Paso 2: Formulario ───────────────────────── */
.regalar-form-type-badge {
    display: inline-block;
    font-family: var(--font-hud); font-size: .62rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    background: rgba(170,255,0,.1); color: var(--ac);
    border: 1px solid rgba(170,255,0,.3);
    border-radius: var(--r); padding: .2rem .7rem;
    margin-bottom: .9rem;
}
.regalar-form-type-badge.is-featured {
    background: rgba(232,121,249,.1);
    color: #e879f9;
    border-color: rgba(232,121,249,.3);
}

.regalar-field {
    margin-bottom: .9rem;
}
.regalar-label {
    display: block;
    font-family: var(--font-hud); font-size: .62rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color: var(--text-muted); margin-bottom: .35rem;
}
.regalar-optional {
    font-weight:400; color:var(--text-faint); text-transform:none; letter-spacing:0;
}
.regalar-input {
    width:100%; padding: .55rem .7rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r);
    font-family: var(--font-body); font-size: .82rem;
    color: var(--text);
    transition: border-color var(--t), box-shadow var(--t);
    outline: none;
}
.regalar-input:focus {
    border-color: rgba(232,121,249,.5);
    box-shadow: 0 0 0 2px rgba(232,121,249,.12);
}
.regalar-input.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,.12);
}
.regalar-input--textarea {
    resize: vertical; min-height: 72px; line-height:1.5;
}
.regalar-field__hint {
    display:block; margin-top:.25rem;
    font-family:var(--font-hud); font-size:.58rem;
    color: var(--text-faint); letter-spacing:.04em;
}
.regalar-field__hint.is-error { color:#fca5a5; }

/* Info de pago MP */
.regalar-mp-info {
    margin-bottom: .9rem;
    border: 1px solid rgba(232,121,249,.2);
    border-radius: var(--r);
    background: rgba(232,121,249,.05);
    padding: .65rem .8rem;
}
.regalar-mp-info__inner {
    display: flex; align-items: flex-start; gap: .6rem;
}
.regalar-mp-info__icon { font-size:1.3rem; flex-shrink:0; }
.regalar-mp-info strong {
    display:block;
    font-family: var(--font-hud); font-size: .68rem; font-weight:700;
    letter-spacing:.1em; color:#f3d8fe;
    margin-bottom:.25rem;
}
.regalar-mp-info p {
    font-size: .68rem; color: var(--text-muted); line-height:1.45; margin:0;
}

/* Acciones del form */
.regalar-form-actions {
    display: flex; gap: .5rem; justify-content:flex-end;
    flex-wrap:wrap; margin-top: 1rem;
}

/* ── Paso 3: Resultado ────────────────────────── */
.regalar-result {
    text-align:center; padding: .5rem 0 .3rem;
    display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.regalar-result-icon { font-size:3rem; line-height:1; }
.regalar-result-icon--success { animation: result-pop .5s cubic-bezier(.16,1,.3,1) both; }
.regalar-result-icon--mp { animation: result-pop .5s cubic-bezier(.16,1,.3,1) both; }
.regalar-result-icon--warn { animation: result-pop .4s ease both; }

@keyframes result-pop {
    0%   { transform: scale(0); opacity:0; }
    100% { transform: scale(1); opacity:1; }
}

.regalar-result-title {
    font-family: var(--font-hud); font-size:1rem; font-weight:700;
    letter-spacing:.08em; color: var(--text); margin:0;
}
.regalar-result-msg {
    font-size:.78rem; color:var(--text-muted);
    line-height:1.5; max-width:340px; margin:0;
}
.regalar-result-sub {
    font-size:.7rem; color:var(--text-faint); margin:0;
}
.regalar-result-link { color:var(--ac); text-decoration:underline; }
.regalar-result-link:hover { color:#fff; }

/* Barra de progreso de redireccionamiento MP */
.regalar-result-loader {
    width:100%; max-width:280px;
    height:3px;
    background: rgba(232,121,249,.15);
    border-radius:2px;
    overflow:hidden;
}
.regalar-mp-bar {
    height:100%; width:0%;
    background: #e879f9;
    border-radius:2px;
    animation: mp-load 2.3s ease-in forwards;
}
@keyframes mp-load {
    0%   { width:0%; }
    80%  { width:85%; }
    100% { width:95%; }
}

body.regalar-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — IT5
═══════════════════════════════════════════════════════════ */

/* MD+ (≥768px): gift cards un poco más anchas */
@media (min-width: 768px) {
    .hud-gift-card { min-width: 260px; max-width: 320px; }
}

/* SM (480-767px): ocultar gift cards extras */
@media (max-width: 767px) {
    .hud-gift-card:nth-child(n+4) { display:none; }
}

/* XS (<480px): panel desde abajo, modal full-width */
@media (max-width: 479px) {
    /* Panel de regalos: desde abajo (bottom sheet) */
    .gifts-panel {
        align-items: flex-end;
        justify-content: stretch;
    }
    .gifts-panel__box {
        width: 100vw !important;
        height: 90vh;
        max-height: 90dvh;
        border-right: none;
        border-top: 1px solid rgba(232,121,249,.25);
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }
    .gifts-panel.is-open .gifts-panel__box {
        transform: translateY(0);
    }

    /* Modal REGALAR: bottom sheet */
    .regalar-modal {
        align-items: flex-end;
        padding: 0;
    }
    .regalar-modal__box {
        max-width: 100vw;
        width: 100vw;
        border-radius: 12px 12px 0 0;
        border-left: none; border-right: none; border-bottom: none;
        max-height: 94vh; max-height: 94dvh;
        transform: scale(1) translateY(16px);
    }
    .regalar-modal.is-open .regalar-modal__box {
        transform: scale(1) translateY(0);
    }

    /* Tipo grid: 1 columna en XS muy estrecho */
    @media (max-width: 359px) {
        .regalar-type-grid { grid-template-columns: 1fr; }
    }

    /* Acciones del form: columna */
    .regalar-form-actions { flex-direction: column-reverse; }
    .regalar-form-actions .hud-btn { width:100%; justify-content:center; }

    /* Gifts grid: 1 columna en XS */
    .gifts-grid { grid-template-columns: 1fr; }

    /* Gift cards del carrusel: solo 3 visibles */
    .hud-gift-card:nth-child(n+4) { display:none; }
}

/* Safe area iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .gifts-panel__box {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .regalar-modal__box {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ═══════════════════════════════════════════════════════════
   LISTA DE REGALOS ESTILO FEED  (gifts-fc + gift-expand-modal)
   IT: reemplaza el grid .gifts-grid por feed-panel idéntico al
   feed de posts. Sólo se añaden los deltas mínimos.
═══════════════════════════════════════════════════════════ */

/* La gift-card en el feed usa las mismas clases .fc del base.css.
   Solo necesitamos indicadores visuales de tipo regalo. */
.gifts-fc .fc__rating-type { color: var(--ac); }

/* Badge de tipo en la imagen — reutiliza .fc__cat */
.gifts-fc .fc__cat {
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
    color: var(--ac);
    font-size: .58rem;
    letter-spacing: .08em;
    padding: .2rem .45rem;
    border-radius: 3px;
}

/* Destacados: borde sutil con color de acento */
.gifts-fc[data-gift-type="featured"] {
    border-color: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.3);
}

/* Flash cuando se vota */
.fc__vote-btn.is-voted {
    color: var(--ac) !important;
    transform: scale(1.2);
    transition: transform .2s, color .2s;
}

/* ── Modal expand de regalo ── */
/* Reutiliza todos los estilos del .pex-modal que ya están en base.css.
   Solo la animación de apertura via is-open ya está definida ahí. */
#gift-expand-modal .pex-topbar__badge {
    padding: .15rem .5rem;
    border-radius: 3px;
    font-size: .58rem;
    letter-spacing: .07em;
    background: rgba(var(--ac-r),var(--ac-g),var(--ac-b),.15);
    color: var(--ac);
    border: 1px solid rgba(var(--ac-r),var(--ac-g),var(--ac-b),.35);
}

/* Cuando el regalo no tiene imagen, ocultar el wrap de imagen para no dejar espacio vacío */
#gift-expand-modal .pex-card__img-wrap:empty,
#gift-expand-modal .pex-card__img[src=""] {
    display: none;
}

/* body lock: cuando gift-expand-modal está abierto */
body.gift-expand-open { overflow: hidden; }

/* Botón "PUBLICAR" dentro del header de la lista de regalos */
.gifts-panel__publish-btn {
    font-size: .6rem !important;
    padding: .3rem .7rem !important;
    height: auto !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Header 2 filas para la lista de regalos ── */
.gifts-panel__header {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* Fila 1: título + botón + cerrar */
.gifts-panel__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem .5rem;
    width: 100%;
    box-sizing: border-box;
}
.gifts-panel__row1-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Fila 2: filtros */
.gifts-panel__row2 {
    display: flex;
    align-items: center;
    padding: 0 1rem .55rem;
    gap: .4rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    width: 100%;
    box-sizing: border-box;
}
.gifts-panel__row2 #gifts-panel-filter {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

/* Botón publicar: tamaño proporcional a la fila 1 */
.gifts-panel__publish-btn {
    font-size: .62rem !important;
    padding: .32rem .75rem !important;
    height: auto !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MODAL EXPANDIDO — UN SOLO SCROLL
   Estrategia: el box tiene altura fija, el body-scroll externo
   NO scrollea (overflow hidden), y solo el pex-card__text-scroll
   scrollea cuando está abierto. El contenido estático del card
   (imagen, título, rating) NO usa overflow:hidden para no clipear.
═══════════════════════════════════════════════════════════ */

/* 1. Box: altura fija, sin scroll propio */
#post-expand-modal .pex-modal__box,
#gift-expand-modal .pex-modal__box {
    height: min(92vh, 820px) !important;
    max-height: min(92vh, 820px) !important;
    overflow: hidden !important;
}

/* 2. Body-scroll: flex column, NO scrollea — distribuye espacio */
#post-expand-modal .pex-modal__body-scroll,
#gift-expand-modal .pex-modal__body-scroll {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* 3. Card: flex column para ceder espacio al body */
#post-expand-modal .pex-card,
#gift-expand-modal .pex-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    /* SIN overflow:hidden — no clipear imagen ni contenido */
}

/* 4. Body del card: flex column, crece y absorbe el espacio libre */
#post-expand-modal .pex-card__body,
#gift-expand-modal .pex-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;  /* solo aquí para contener el text-scroll */
}

/* 5. El text-scroll ocupa TODO el espacio restante cuando está abierto */
#post-expand-modal .pex-card__text-scroll.is-open,
#gift-expand-modal .pex-card__text-scroll.is-open {
    flex: 1 1 0 !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow-y: auto !important;
}
/* Cancelar el max-height del base.css cuando está cerrado */
#post-expand-modal .pex-card__text-scroll,
#gift-expand-modal .pex-card__text-scroll {
    max-height: none !important;
}

/* 6. Mobile: full screen */
@media (max-width: 480px) {
    #post-expand-modal .pex-modal__box,
    #gift-expand-modal .pex-modal__box {
        height: 100svh !important;
        max-height: 100svh !important;
    }
}