/* ============================================================
   Kasaya.ph — Template Detail Page
   Layout and structure only.
   Slide previews use global CSS + TemplateModel variables.
   ============================================================ */

/* ── Page ───────────────────────────────────────────────────── */
.td-page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #FAF6F1;
    min-height: 100svh;
    overflow-x: hidden;
    padding-bottom: 80px;
}

/* ── Not found ──────────────────────────────────────────────── */
.td-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    gap: 16px;
    font-family: 'Jost', sans-serif;
    color: #9E8C87;
}

/* ── Top nav ────────────────────────────────────────────────── */
.td-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(250,246,241,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #E8DDD4;
}

.td-nav-back {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    color: #9E8C87;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .2s;
}
.td-nav-back:hover { color: #3A3230; }

.td-nav-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: #3A3230;
}

.td-nav-cta {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FAF6F1;
    background: #3A3230;
    border: none;
    padding: 8px 16px;
    border-radius: 1px;
    cursor: pointer;
    transition: background .2s;
}
.td-nav-cta:hover { background: #5A3828; }

/* ══════════════════════════════════════════════════════════════
   HERO CAROUSEL
══════════════════════════════════════════════════════════════ */
.td-hero {
    position: relative;
    min-height: 55svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Carousel scrollable row */
.td-carousel {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 55svh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.td-carousel::-webkit-scrollbar { display: none; }

/* Each slide */
.td-carousel-slide {
    position: relative;
    min-width: 100%;
    min-height: 55svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    padding: 40px 0; /* ← remove horizontal padding */
    flex-shrink: 0;
}


/* Slide background layer */
.td-slide-bg {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    z-index: 0;
}

/* ── Invitation frame — portrait card ───────────────────────── */
.td-inv-frame {
    position: relative;
    z-index: 2;
    width: 52%;
    aspect-ratio: 5 / 7;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.22),
                0 4px 12px rgba(0,0,0,.10);
}

/* Force TemplateHeroPreview to fill frame */
.td-inv-frame > div {
    position: absolute;
    inset: 0;
    min-height: unset !important;
    max-width: unset !important;
}

.td-inv-frame .inv-hero {
    position: absolute !important;
    inset: 0 !important;
    aspect-ratio: unset !important;
    min-height: unset !important;
}

/* ── Entourage preview inside frame ─────────────────────────── */
.td-ent-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    text-align: center;
    gap: 6px;
}

.td-ent-label { font-size: 6px !important; margin-bottom: 2px; }
.td-ent-title { font-size: 15px !important; line-height: 1.2; }

.td-ent-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 80%;
    margin: 3px 0;
}
.td-ent-line { flex: 1; height: 1px; opacity: .4; }
.td-ent-dot  { font-size: 7px; }

.td-ent-roles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.td-ent-role {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-radius: 1px;
    border-width: 1px;
    border-style: solid;
}
.td-ent-role-title { font-size: 5px !important; letter-spacing: .12em !important; }
.td-ent-role-name  { font-size: 11px !important; }

/* ── Closing preview inside frame ───────────────────────────── */
.td-closing-preview {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.td-closing-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.td-closing-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 12px;
    text-align: center;
}

.td-closing-verse {
    font-size: 8px !important;
    line-height: 1.5 !important;
    max-width: 95%;
    font-style: italic;
}
.td-closing-ref   { font-size: 5px !important; letter-spacing: .1em !important; }
.td-closing-names { font-size: 16px !important; line-height: 1.2 !important; }
.td-closing-date  { font-size: 5px !important; letter-spacing: .14em !important; }

.td-closing-content .badge-square {
    font-size: 6px !important;
    padding: 2px 8px !important;
    margin-top: 2px;
}
.td-closing-content .accent-floral {
    font-size: 8px !important;
    letter-spacing: 4px !important;
    margin-bottom: 2px;
}

/* ── Slide label below card ─────────────────────────────────── */
.td-slide-label {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: #3A3230;
    opacity: .65;
}

/* ── Arrow buttons — desktop only ───────────────────────────── */
.td-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(58,50,48,.2);
    background: rgba(250,246,241,.9);
    color: #3A3230;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
    line-height: 1;
}
.td-carousel-arrow:hover { background: #FAF6F1; }
.td-arrow-prev { left: 12px; }
.td-arrow-next { right: 12px; }

@media (max-width: 480px) {
    .td-carousel-arrow { display: none; }
}

/* ── Dot indicators ─────────────────────────────────────────── */
.td-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.td-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(58,50,48,.25);
    cursor: pointer;
    transition: background .3s, transform .3s;
}
.td-dot--active {
    background: #C48B9F;
    transform: scale(1.3);
}

/* Scroll hint */
.td-scroll-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Jost', sans-serif;
    font-size: 8px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(58,50,48,.4);
    z-index: 10;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   INFO STRIP
══════════════════════════════════════════════════════════════ */
.td-info-strip {
    padding: 28px 24px 32px;
    background: #FAF6F1;
    border-bottom: 1px solid #E8DDD4;
}

.td-info-strip-top { margin-bottom: 24px; }

.td-info-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.td-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.td-mood, .td-category, .td-sep {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9E8C87;
}

.td-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 36px;
    color: #1A0F0C;
    line-height: 1.15;
    margin-bottom: 10px;
}

.td-desc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #9E8C87;
    line-height: 1.7;
}

.td-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
}

.td-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #E8DDD4;
    border-radius: 2px;
}

.td-feature-icon {
    font-size: 8px;
    color: #C9A96E;
    flex-shrink: 0;
}

.td-feature-text {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    color: #6B5B54;
    line-height: 1.3;
}

.td-cta-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.td-btn-primary {
    width: 100%;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #FAF6F1;
    background: #3A3230;
    border: none;
    padding: 15px;
    border-radius: 1px;
    cursor: pointer;
    transition: background .2s;
}
.td-btn-primary:hover { background: #5A3828; }

.td-btn-ghost {
    width: 100%;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #6B5B54;
    background: transparent;
    border: 1px solid #D4C4B0;
    padding: 14px;
    border-radius: 1px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.td-btn-ghost:hover { border-color: #3A3230; color: #3A3230; }

/* ══════════════════════════════════════════════════════════════
   STICKY BOTTOM CTA
══════════════════════════════════════════════════════════════ */
.td-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(250,246,241,.95);
    backdrop-filter: blur(8px);
    border-top: 1px solid #E8DDD4;
    z-index: 50;
}

.td-sticky-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.td-sticky-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: #3A3230;
}

.td-sticky-mood {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #9E8C87;
}

.td-sticky-btn {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FAF6F1;
    background: #3A3230;
    border: none;
    padding: 12px 20px;
    border-radius: 1px;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.td-sticky-btn:hover { background: #5A3828; }



/* ── Full preview section ───────────────────────────────────── */
.td-full-preview-section {
    background: #F5F0E8;
    padding-bottom: 32px;
}

/* Label divider */
.td-full-preview-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 32px 24px 24px;
}

.td-full-preview-line {
    flex: 1;
    height: 1px;
    background: #E8DDD4;
}

.td-full-preview-text {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #C48B9F;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Wrapper — centers the preview card */
.td-full-preview-wrap {
    position: relative;
    width: 72%;
    margin: 0 auto;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(139,90,106,.15), 0 4px 12px rgba(0,0,0,.08);
}

/* ── Body row wrapper ───────────────────────────────────────── */
.td-body {
    display: flex;
    flex-direction: column; /* stacked on mobile */
}

/* ── Section preview frame ───────────────────────────────────── */
.td-inv-frame--section {
    overflow: hidden;
    position: relative;
}

.td-section-preview {
    position: absolute;
    top: 0;
    left: 0;
}

/* ── Swipe hint — no layout impact ──────────────────────────── */
.td-swipe-hint {
    position: absolute;
    bottom: 40px; /* ← sits below the carousel */
    left: 0;
    right: 0;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    color: rgb(220, 88, 235, 0.40);
    text-align: center;
    transition: opacity .8s ease;
    pointer-events: none;
}

.td-swipe-hint--hidden {
    opacity: 0;
}

.td-swipe-hint-inner {
    background: rgb(255, 106, 0);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.3);
    border-top: 1px solid rgba(255,255,255,.5); /* ← top highlight */
    border-radius: 20px;
    padding: 6px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    color: rgba(250,246,241,.9);
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.4); /* ← inner top shine */
    animation: tdHintPulse 2s ease-in-out infinite;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

@keyframes tdHintPulse {
    0%, 100% {
        opacity: .7;
    }

    50% {
        opacity: 1;
    }
}

/* ── Tier badge in nav ───────────────────────────────────────── */
.td-nav-tier {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 2px;
}

.td-nav-tier--free {
    background: #F5F0E8;
    color: #9E8C87;
    border: 1px solid #E8DDD4;
}

.td-nav-tier--premium {
    background: linear-gradient(135deg, rgba(201,169,110,.15) 0%, rgba(196,139,159,.15) 100%);
    color: #8A6520;
    border: 1px solid rgba(201,169,110,.3);
}

/* ── Tier selector ───────────────────────────────────────────── */
.td-tier-selector {
    display: flex;
    gap: 10px;
    padding: 0 16px;
    margin-top: 16px;
}

/* ── Tier card ───────────────────────────────────────────────── */
.td-tier-card {
    flex: 1;
    border: 1px solid #E8DDD4;
    border-radius: 6px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

    .td-tier-card:hover {
        border-color: #C48B9F;
        box-shadow: 0 4px 12px rgba(196,139,159,.15);
    }

.td-tier-card--active {
    border-color: #C48B9F;
    border-width: 2px;
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(196,139,159,.35), 0 6px 16px rgba(196,139,159,.25), 0 2px 6px rgba(196,139,159,.15), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ── Premium card ────────────────────────────────────────────── */
.td-tier-card--premium {
    border-color: rgba(196,139,159,.3);
    background: rgba(196,139,159,.02);
}

    .td-tier-card--premium.td-tier-card--active {
        border-color: #C48B9F;
        background: rgba(196,139,159,.06);
        box-shadow: 0 16px 40px rgba(196,139,159,.40), 0 6px 16px rgba(196,139,159,.28), 0 2px 6px rgba(196,139,159,.15), inset 0 1px 0 rgba(255,255,255,.8);
    }

/* ── Premium Plus card ───────────────────────────────────────── */
.td-tier-card--premium-plus {
    border-color: rgba(201,169,110,.3);
    background: rgba(201,169,110,.02);
}

    .td-tier-card--premium-plus.td-tier-card--active {
        border-color: #C9A96E;
        background: rgba(201,169,110,.08);
        box-shadow: 0 16px 40px rgba(201,169,110,.40), 0 6px 16px rgba(201,169,110,.28), 0 2px 6px rgba(201,169,110,.15), inset 0 1px 0 rgba(255,255,255,.8);
    }

/* ── Card header ─────────────────────────────────────────────── */
.td-tier-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.td-tier-icon {
    font-size: 20px;
}

.td-tier-name {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1A0F0C;
    margin: 0;
}

.td-tier-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    color: #C48B9F;
    margin: 0;
}

/* ── Features list ───────────────────────────────────────────── */
.td-tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .td-tier-features li {
        font-family: 'Jost', sans-serif;
        font-size: 10px;
        color: #6B5B54;
        line-height: 1.4;
    }

.td-tier-locked {
    color: #C4B4A8 !important;
    text-decoration: line-through;
}

/* ── Selected badge ──────────────────────────────────────────── */
.td-tier-selected {
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C48B9F;
    padding-top: 6px;
    border-top: 1px solid #E8DDD4;
}

/* ── CTA button ──────────────────────────────────────────────── */
.td-cta-btn {
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    padding: 14px;
    border: none;
    border-radius: 4px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    transition: opacity .2s;
}

    .td-cta-btn:hover {
        opacity: .85;
    }

.td-cta-btn--free {
    background: #1A0F0C;
    color: #FAF6F1;
}

.td-cta-btn--premium {
    background: #C48B9F;
    color: #fff;
}

.td-cta-btn--premium-plus {
    background: linear-gradient(135deg, #C9A96E 0%, #C48B9F 100%);
    color: #fff;
}

/* ── Mobile — stacked layout ─────────────────────────────────── */
@media (max-width: 480px) {
    .td-info-strip-top {
        display: none;
    }

    .td-tier-selector {
        flex-direction: column;
        gap: 8px;
        padding: 0 12px;
    }

    .td-tier-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }

    .td-tier-card-header {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
        flex-shrink: 0;
        min-width: 100px;
    }

    .td-tier-icon {
        font-size: 16px;
    }

    .td-tier-name {
        font-size: 10px;
    }

    .td-tier-price {
        font-size: 15px;
    }

    /* ── Features — horizontal on mobile ─────────────────────── */
    .td-tier-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

        .td-tier-features li {
            font-size: 9px;
            background: #F5F0E8;
            padding: 2px 6px;
            border-radius: 2px;
        }

    .td-tier-locked {
        display: none; /* ← hide locked features on mobile */
    }

    /* ── Selected badge — inline on mobile ───────────────────── */
    .td-tier-selected {
        position: absolute;
        top: 8px;
        right: 10px;
        border: none;
        padding: 0;
        font-size: 8px;
    }

    /* ── CTA button ──────────────────────────────────────────── */
    .td-cta-btn {
        width: calc(100% - 24px);
        margin: 12px 12px 0;
    }

    .td-tier-card--active {
        transform: none;
        border-left-width: 3px; /* ← left accent on mobile */
    }
}


@media (min-width: 768px) {

    /* ── Page wrapper ────────────────────────────────────────── */
    .td-page {
        max-width: 75%;
        padding-bottom: 0;
    }

    /* ── Body row — 50/50 split ──────────────────────────────── */
    .td-body {
        flex-direction: row;
        align-items: flex-start;
    }

    /* ── Hero — 50% sticky ───────────────────────────────────── */
    .td-hero {
        flex: 1;
        position: sticky;
        top: 57px;
        height: calc(100svh - 70px);
        width: unset;
        min-width: unset;
        max-width: unset;
        flex-shrink: unset;
        min-height: unset;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Carousel — fills hero half ──────────────────────────── */
    .td-carousel {
        width: 100%;
        height: 100%;
        min-width: unset;
        min-height: unset;
    }

    /* ── Each slide — fills carousel ─────────────────────────── */
    .td-carousel-slide {
        position: relative;
        min-width: 100%;
        height: 100%;
        min-height: unset;
        aspect-ratio: unset; /* ← height fills instead */
        padding: 0;
        overflow: hidden;
    }

    /* ── Invitation frame — untouched, stays 52% + 5/7 ─────────
       DO NOT override width or aspect-ratio here             */
    /* .td-inv-frame intentionally not overridden */

    /* ── Info strip — 50% ───────────────────────────────────── */
    .td-info-strip {
        flex: 1;
        padding: 40px 48px;
        overflow-y: auto;
        height: calc(100svh - 70px);
    }

    /* ── Nav ─────────────────────────────────────────────────── */
    .td-nav {
        padding: 16px 40px;
    }

    .td-nav-brand {
        font-size: 22px;
    }

    .td-nav-back {
        font-size: 11px;
    }

    .td-nav-cta {
        font-size: 11px;
        padding: 10px 22px;
    }

    /* ── Info content ────────────────────────────────────────── */
    .td-title {
        font-size: 32px;
    }

    .td-desc {
        font-size: 15px;
        max-width: 600px;
    }

    /* ── Features grid ───────────────────────────────────────── */
    .td-features {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px 24px;
    }

    /* ── CTA buttons ─────────────────────────────────────────── */
    .td-cta-block {
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .td-btn-primary,
    .td-btn-ghost {
        flex: 1;
    }

    /* ── Sticky bottom CTA ───────────────────────────────────── */
    .td-sticky-cta {
        display: none;
    }
}