/* ===========================================================
   MONUMENTAS — subscriptionm.css
   All styles for the optional "Selection of the month" feature:
   the carousel, the post-setup offer modal, and the "How it works"
   Part 5 buttons. Delete this file to remove every subscription style.
   Nothing here overrides the base site styles in stylem.css.
=========================================================== */

/* Fenced markup starts hidden; subscriptionm.js removes .subHidden only when
   the feature is enabled. Keeps the site visually identical when it's off. */
.subHidden{
    display:none !important;
}

/* ---------- carousel section ---------- */
#selection-carousel{
    width:95%;
    max-width:1400px;
    margin:0 auto 150px;
    text-align:center;
}

#selection-carousel .selTitle{
    font-size:34px;
    letter-spacing:-1px;
    margin-bottom:30px;
}

#selection-carousel .selViewport{
    overflow:hidden;
    width:100%;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

#selection-carousel .selTrack{
    display:flex;
    gap:24px;
    width:max-content;
    will-change:transform;
}

#selection-carousel .selCard{
    flex:0 0 auto;
    width:200px;
    text-decoration:none;
    color:inherit;
    display:block;
}

#selection-carousel .selCardImg{
    width:200px;
    height:200px;
    border-radius:20px;
    background:#eee center/cover no-repeat;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    transition:transform .25s;
}

#selection-carousel .selCard:hover .selCardImg{
    transform:translateY(-4px);
}

#selection-carousel .selCardName{
    margin-top:12px;
    font-size:15px;
    font-weight:500;
    color:#444;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ---------- post-setup offer modal ---------- */
.subOfferOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:10000;
}

.subOfferCard{
    width:460px;
    max-width:100%;
    background:#fff;
    border-radius:30px;
    padding:45px;
    text-align:center;
    animation:popup .25s ease;
}

.subOfferCard h2{
    margin-bottom:18px;
    font-size:26px;
    letter-spacing:-1px;
}

.subOfferCard p{
    margin-bottom:26px;
    font-size:16px;
    line-height:1.5;
    color:#555;
}

.subOfferCard button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:16px;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
}

.subOfferCard .subOfferJoin{
    background:#111;
    color:#fff;
    margin-bottom:12px;
    transition:.25s;
}

.subOfferCard .subOfferJoin:hover{
    background:#000;
    transform:translateY(-2px);
}

.subOfferCard .subOfferLater{
    background:none;
    color:#888;
}

.subOfferCard .subOfferLater:hover{
    color:#333;
}

/* ---------- "How it works" Part 5 buttons ---------- */
#selectionPart5 .selStepButtons{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
}

#selectionPart5 .selStepButtons button{
    padding:12px 16px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:.2s;
}

#selectionPart5 .selStepButtons #selJoinButton{
    background:#111;
    color:#fff;
    border-color:#111;
}

#selectionPart5 .selStepButtons #selJoinButton:hover{
    background:#000;
}

#selectionPart5 .selStepButtons #selManageButton:hover{
    background:#f2f2f2;
}

@media(max-width:900px){
    #selection-carousel .selCard,
    #selection-carousel .selCardImg{
        width:150px;
    }
    #selection-carousel .selCardImg{
        height:150px;
    }
    #selection-carousel .selTitle{
        font-size:26px;
    }
}