@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --brand: #FF3F57;
    --brand-dark: #C7172D;
    --brand-glow: rgba(255,63,87,.22);
    --ink: #0E0E14;
    --ink-2: #1C1C27;
    --slate: #8A8A9C;
    --muted: #B2B2C0;
    --border: rgba(255,255,255,.09);
    --white: #FFFFFF;
    --success: #22C55E;
    --error: #EF4444;
    --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
    --font-head: 'Sora', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

body { font-family: var(--font-body); background: var(--ink); min-height: 100vh; }

/* OVERLAY */
.tg-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 1rem;
}

/* SHELL  */
.tg-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    width: 100%; max-width: 900px;
    height: min(90vh, 680px);
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}

.tg-sidebar {
    background: linear-gradient(160deg, #1a0d12 0%, #0E0E14 60%);
    padding: 2rem 1.6rem;
    display: flex; flex-direction: column;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.tg-sidebar::before {
    content: '';
    position: absolute; top: -80px; left: -80px;
    width: 260px; height: 260px;
    background: var(--brand-glow);
    border-radius: 50%; filter: blur(80px);
    pointer-events: none;
}

.tg-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-head); font-size: 1rem; font-weight: 700;
    color: var(--white); letter-spacing: -.02em;
    flex-shrink: 0; /* brand never shrinks */
}

.tg-sidebar-hero {
    flex-shrink: 1; /* allowed to shrink a little */
    min-height: 0;
}
.tg-sidebar-eyebrow {
    font-size: .66rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .1em; color: var(--brand); margin-bottom: .4rem;
}
.tg-sidebar-headline {
    font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
    color: var(--white); line-height: 1.35; letter-spacing: -.02em;
    margin-bottom: .45rem;
}
.tg-sidebar-sub { font-size: .8rem; color: var(--slate); line-height: 1.6; }

.tg-trust-list {
    list-style: none; display: flex; flex-direction: column;
    gap: .75rem;
    flex-shrink: 1; min-height: 0; /* ← can compress */
    overflow: hidden;
}
.tg-trust-list li { display: flex; align-items: flex-start; gap: 10px; }
.tg-trust-icon {
    flex-shrink: 0; width: 19px; height: 19px;
    background: var(--brand); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; color: #fff; margin-top: 1px;
}
.tg-trust-list strong { display: block; font-size: .78rem; font-weight: 600; color: var(--white); margin-bottom: 1px; }
.tg-trust-list span   { font-size: .7rem; color: var(--slate); }

/* Social proof pinned at bottom — never pushed out */
.tg-social-proof {
    margin-top: auto;
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--border); padding-top: .9rem;
    flex-shrink: 0;             /* never squash */
}
.tg-avatars { display: flex; margin-left: 4px; }
.tg-avatars img {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--ink-2); margin-left: -7px; object-fit: cover;
}
.tg-avatars img:first-child { margin-left: 0; }
.tg-social-proof p { font-size: .73rem; color: var(--muted); line-height: 1.4; }
.tg-social-proof strong { color: var(--white); font-weight: 600; }

/* MAIN */
.tg-main {
    background: #fff; display: flex; flex-direction: column;
    height: 100%; overflow: hidden; position: relative;
}
#checkoutForm { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.tg-main-header { flex-shrink: 0; padding: 1.2rem 1.75rem 0; position: relative; }

.tg-main-body {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: visible;
    padding: 1.2rem 1.75rem;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent 100%);
}
.tg-main-body::-webkit-scrollbar { width: 4px; }
.tg-main-body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

.tg-main-footer {
    flex-shrink: 0; padding: .8rem 1.75rem 1.2rem;
    border-top: 1px solid #f3f4f6; background: #fff;
    box-shadow: 0 -4px 12px rgba(0,0,0,.04);
}

/* CLOSE */
.tg-close {
    position: absolute; top: 1rem; right: 1.25rem;
    background: none; border: 1px solid #e5e7eb; border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #6b7280; transition: all .15s;
}
.tg-close:hover { background: #f3f4f6; color: var(--brand); border-color: var(--brand); }

/* STEPPER */
.tg-stepper { display: flex; align-items: center; margin: 2.5rem 0 0; }
.tg-step { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tg-step-circle {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 600; color: #9ca3af;
    font-family: var(--font-head);
    transition: all .3s cubic-bezier(.4,0,.2,1); background: #fff;
}
.tg-step-label { font-size: .67rem; font-weight: 500; color: #9ca3af; white-space: nowrap; transition: color .3s; }
.tg-step.active .tg-step-circle { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(255,63,87,.14); }
.tg-step.active .tg-step-label  { color: var(--brand); font-weight: 600; }
.tg-step.done  .tg-step-circle  { background: #ecfdf5; border-color: var(--success); color: var(--success); }
.tg-step.done  .tg-step-label   { color: #059669; }
.tg-step-line { flex: 1; height: 2px; background: #e5e7eb; margin: 0 6px; margin-bottom: 18px; transition: background .3s; }
.tg-step-line.done { background: var(--success); }

/* ALERTS */
.tg-alert { display: flex; align-items: center; gap: 8px; padding: .58rem .85rem; border-radius: var(--r-sm); font-size: .82rem; font-weight: 500; margin-bottom: 1rem; }
.tg-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.tg-alert--error   { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }

/* PAGES */
.tg-page { display: none; }
.tg-page.active { display: block; animation: tgFadeIn .25s ease; }
@keyframes tgFadeIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }

.tg-page-header { margin-bottom: 1.1rem; }
.tg-page-title { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; color: #111827; letter-spacing: -.025em; margin-bottom: .18rem; }
.tg-page-desc  { font-size: .82rem; color: #6b7280; line-height: 1.5; }

/* AUTH TABS */
.tg-auth-tabs {
    display: flex; gap: 6px;
    background: #f3f4f6; border-radius: var(--r-sm);
    padding: 4px; margin-bottom: 2px;
}
.tg-auth-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: .45rem .75rem;
    border: none; border-radius: calc(var(--r-sm) - 2px);
    font-size: .8rem; font-weight: 600; font-family: var(--font-body);
    color: #6b7280; background: transparent; cursor: pointer;
    transition: all .18s;
}
.tg-auth-tab.active { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.tg-auth-tab:hover:not(.active) { color: #374151; }

/* PLAN CARDS */
.tg-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px,1fr)); gap: 9px; }
.tg-plan-card {
    position: relative; border: 1.5px solid #e5e7eb; border-radius: var(--r-md);
    cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); overflow: hidden; display: block;
}
.tg-plan-card:hover { border-color: #fca5a5; background: #fff8f8; }
.tg-plan-card:has(.tg-plan-radio:checked) { border-color: var(--brand); background: #fff5f5; box-shadow: 0 0 0 3px rgba(255,63,87,.11); }
.tg-plan-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tg-plan-card-inner { padding: .82rem .72rem; }
.tg-plan-badge { display: inline-block; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--brand); color: #fff; border-radius: 4px; padding: 2px 6px; margin-bottom: 7px; }
.tg-plan-name { font-size: .7rem; font-weight: 600; color: #374151; margin-bottom: 4px; }
.tg-plan-qty { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: #111827; letter-spacing: -.03em; line-height: 1; margin-bottom: 3px; }
.tg-plan-qty span { font-size: .66rem; font-weight: 500; color: #9ca3af; }
.tg-plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 2px; }
.tg-price-currency { font-size: .6rem; font-weight: 600; color: #6b7280; }
.tg-price-amount { font-family: var(--font-head); font-size: .92rem; font-weight: 700; color: var(--brand); }
.tg-plan-unit { font-size: .58rem; color: #9ca3af; }
.tg-plan-check { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; display: none; align-items: center; justify-content: center; }
.tg-plan-card:has(.tg-plan-radio:checked) .tg-plan-check { display: flex; }
.tg-empty-notice { font-size: .82rem; color: #9ca3af; padding: 1rem; text-align: center; grid-column: 1/-1; }

/* FORM FIELDS */
.tg-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tg-field { display: flex; flex-direction: column; gap: 5px; }
.tg-label { font-size: .76rem; font-weight: 600; color: #374151; display: flex; align-items: center; justify-content: space-between; }
.tg-label-hint { font-weight: 400; color: #9ca3af; font-size: .7rem; }
.tg-input {
    width: 100%; padding: .58rem .78rem;
    border: 1.5px solid #e5e7eb; border-radius: var(--r-sm);
    font-size: .86rem; font-family: var(--font-body);
    color: #111827; background: #fff;
    transition: border-color .15s, box-shadow .15s;
    outline: none; -webkit-appearance: none;
}
.tg-input::placeholder { color: #d1d5db; }
.tg-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,63,87,.09); }
.tg-input.invalid { border-color: var(--error); box-shadow: 0 0 0 3px rgba(239,68,68,.09); }
.tg-input--suffixed { padding-right: 2.6rem; }
.tg-input-suffix-wrap { position: relative; }
.tg-eye-btn { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: #9ca3af; display: flex; align-items: center; }
.tg-eye-btn:hover { color: #374151; }


.tg-select-wrap { position: relative; }
.tg-select { width: 100%; padding: .58rem 2rem .58rem .78rem; border: 1.5px solid #e5e7eb; border-radius: var(--r-sm); font-size: .86rem; font-family: var(--font-body); color: #111827; background: #fff; -webkit-appearance: none; outline: none; cursor: pointer; transition: border-color .15s; }
.tg-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,63,87,.09); }
.tg-select-arrow { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }

/* SUMMARY */
.tg-summary { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: var(--r-md); padding: 1.05rem; margin-bottom: .8rem; }
.tg-summary-section { margin-bottom: .8rem; }
.tg-summary-section:last-child { margin-bottom: 0; }
.tg-summary-eyebrow { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin-bottom: .5rem; }
.tg-summary-row { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; font-size: .81rem; }
.tg-summary-row + .tg-summary-row { border-top: 1px solid #f3f4f6; }
.tg-summary-key { color: #6b7280; } .tg-summary-val { font-weight: 600; color: #111827; }
.tg-summary-divider { height: 1px; background: #e5e7eb; margin: .6rem 0; }
.tg-summary-total-row { display: flex; justify-content: space-between; align-items: center; }
.tg-summary-total-label { font-weight: 700; color: #111827; font-size: .86rem; }
.tg-summary-total-val { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--brand); }

.tg-tnc { font-size: .72rem; color: #9ca3af; line-height: 1.5; text-align: center; margin-top: .5rem; }
.tg-link { color: var(--brand); text-decoration: none; font-weight: 500; }
.tg-link:hover { text-decoration: underline; }

/* ACTION ROWS */
.tg-actions { display: flex; justify-content: space-between; align-items: center; }
.tg-actions--hidden { display: none; }

/* BUTTONS */
.tg-btn { display: inline-flex; align-items: center; gap: 7px; padding: .6rem 1.2rem; border-radius: var(--r-sm); font-size: .84rem; font-weight: 600; font-family: var(--font-body); cursor: pointer; border: none; transition: all .18s cubic-bezier(.4,0,.2,1); letter-spacing: .01em; }
.tg-btn--primary { background: var(--brand); color: #fff; }
.tg-btn--primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,63,87,.28); }
.tg-btn--primary:active { transform: none; box-shadow: none; }
.tg-btn--ghost { background: #f3f4f6; color: #374151; }
.tg-btn--ghost:hover { background: #e5e7eb; }
.tg-btn--pay { background: #111827; color: #fff; padding: .62rem 1.55rem; }
.tg-btn--pay:hover { background: #1f2937; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.tg-btn--pay:active { transform: none; }
.tg-btn:disabled { opacity: .55; pointer-events: none; }

/* RESPONSIVE */
@media (max-width: 700px) {
    .tg-shell { grid-template-columns: 1fr; height: 96vh; border-radius: var(--r-lg); }
    .tg-sidebar { display: none; }
    .tg-main-header { padding: 1rem 1rem 0; }
    .tg-main-body { padding: 1rem; }
    .tg-main-footer { padding: .7rem 1rem 1rem; }
    .tg-fields-row { grid-template-columns: 1fr; }
    .tg-plans-grid { grid-template-columns: repeat(2,1fr); }
    .tg-stepper { margin-top: 2rem; }
}
@media (max-height: 600px) {
    .tg-shell { height: 99vh; }
    .tg-stepper { margin-top: 1.6rem; }
}