@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --tp-primary: #1F3C88;
    --tp-primary-2: #2B55B3;
    --tp-accent: #F97316;
    --tp-bg: #F5F7FA;
    --tp-surface: #FFFFFF;
    --tp-text: #0F172A;
    --tp-muted: #64748B;
    --tp-border: rgba(15, 23, 42, 0.10);
    --tp-shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
    --tp-radius: 18px;
}

/* Keep layout width stable when content height changes (e.g., filtering adds/removes scrollbar) */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

html, body {
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(31,60,136,.12), transparent 60%),
      radial-gradient(900px 500px at 85% 10%, rgba(249,115,22,.10), transparent 55%),
      linear-gradient(180deg, #F7F9FC 0%, #F2F5FA 60%, #EEF2F8 100%);
    color: var(--tp-text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--tp-primary);
}

a:hover, .btn-link:hover {
    color: var(--tp-primary-2);
}

.btn-primary {
    color: #fff;
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

.btn-primary:hover {
    background-color: var(--tp-primary-2);
    border-color: var(--tp-primary-2);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.9), 0 0 0 0.35rem rgba(31,60,136,0.22);
}

.content {
    padding-top: 1.1rem;
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--tp-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--tp-primary);
    border-color: var(--tp-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(31,60,136,0.35);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* =============================
   TatilPromosyon - quick modern layer
   (keeps existing structure, just adds polish)
   ============================= */

.td-page { background: transparent; }

.td-section {
    padding-top: 18px;
}

.td-hero {
    position: relative;
    padding-top: 12px;
    padding-bottom: 10px;
}

.td-hero-carousel {
    position: relative;
}

.td-hero-search {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 32px));
    z-index: 3;
}

.td-hero-search-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.20);
    padding: 14px 14px 12px 14px;
}

.td-hero-title {
    font-weight: 800;
    color: var(--tp-primary);
    font-size: 18px;
    line-height: 1.1;
}

.td-hero-sub {
    color: #5c6b73;
    font-size: 13px;
    margin-top: 2px;
    margin-bottom: 10px;
}

.td-label {
    font-size: 12px;
    font-weight: 700;
    color: #1d2b36;
}

.td-hero-hint {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    color: #4b5961;
    font-size: 12px;
}

.td-hero-hint i {
    color: var(--tp-primary);
}

.td-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    padding: 10px 14px;
    margin-top: 70px;
}

.td-countdown-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tp-primary);
}

.td-countdown-left i {
    font-size: 18px;
}

.td-countdown-title {
    font-weight: 800;
}

.td-countdown-sub {
    color: #65727a;
    font-size: 13px;
}

.td-pill {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f2f7ff;
    color: #1b4e83;
    font-weight: 800;
    font-size: 13px;
}

.td-countdown-note {
    color: #8a97a0;
    font-size: 12px;
    margin-left: 10px;
}

.td-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.td-section-title {
    color: var(--tp-primary);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.td-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-sort-select {
    min-width: 220px;
}

/* Cards */
.td-card {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0,0,0,0.14);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.td-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.20);
}

.td-card-imgwrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.td-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.td-card-badges {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.td-badge {
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.td-card-body {
    padding: 12px 14px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.td-card-title {
    font-weight: 900;
    color: var(--tp-primary);
    font-size: 18px;
    line-height: 1.2;
}

.td-card-meta {
    margin-top: 6px;
    margin-bottom: 6px;
}

.td-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #1b4e83;
    font-size: 13px;
}

.td-rating i {
    color: #f0b429;
}

.td-rating-count {
    font-weight: 600;
    color: #7a8790;
}

.td-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: #263238;
    font-size: 13px;
}

.td-line i {
    color: var(--tp-primary);
}

.td-price {
    margin-top: auto;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.td-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.td-price-old {
    font-weight: 900;
    font-size: 15px;
    color: #66757e;
}

.td-price-new {
    font-weight: 900;
    font-size: 20px;
    color: #1f2937;
}

.td-price-hint {
    color: #9aa7b0;
    font-size: 12px;
    font-weight: 700;
}

.td-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
}

/* Why us */
.td-why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 992px) {
    .td-why { grid-template-columns: 1fr; }
    .td-sort-select { min-width: 180px; }
    .td-hero-search { bottom: -42px; }
    .td-countdown { margin-top: 92px; }
}

.td-why-item {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.td-why-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f2f7ff;
    color: var(--tp-primary);
    font-size: 20px;
}

.td-why-title {
    font-weight: 900;
    color: #1f2937;
}

.td-why-sub {
    color: #72808a;
    font-size: 12px;
    margin-top: 2px;
}

/* Modal */
.td-modal {
    border-radius: 16px;
    overflow: hidden;
}

.td-modal-meta {
    background: #f7fafc;
    border-radius: 12px;
    padding: 10px;
}

.td-modal-desc {
    margin-top: 10px;
    color: #334155;
    font-size: 13px;
}

.td-modal-highlights {
    margin-top: 10px;
}

.td-modal-highlights-title {
    font-weight: 900;
    margin-bottom: 6px;
    color: #1f2937;
}

.td-modal-highlights ul {
    margin: 0;
    padding-left: 18px;
    color: #334155;
    font-size: 13px;
}

.td-modal-price {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

/* Auth pages (Register/Completed) - keep existing markup, but allow cleaner reuse later */
.td-auth-shell {
    margin-top: 60px;
}


/* =========================
   Topbar (professional)
   ========================= */
.tp-app { min-height: 100vh; }
.tp-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tp-border);
}
.tp-topbar-inner {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.tp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.tp-brand-logo {
    height: 44px;
    width: 44px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(2,6,23,0.10);
}
.tp-brand-text {
    font-weight: 800;
    color: var(--tp-primary);
    font-size: 18px;
}
.tp-main { display: block; }
.tp-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 18px 40px 18px;
}

/* =========================
   Auth pages (Register / Completed)
   ========================= */
.tp-auth {
    min-height: calc(100vh - 64px);
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    border-radius: var(--tp-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(2,6,23,0.08);
    background: var(--tp-surface);
    margin: 16px auto 0 auto;
    max-width: 1200px;
}

@media (min-width: 1400px) {
    .tp-auth { margin-top: 22px; }
}

/* Modal detail layout helpers */
.td-modal-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.td-modal-price {
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(15,23,42,0.08);
}

.td-price-old { color: #64748b; font-weight: 800; }
.td-price-new { font-size: 26px; font-weight: 950; color: #0f172a; }

.tp-auth-aside {
    background: radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.00) 55%),
                linear-gradient(180deg, var(--tp-primary) 0%, #122A66 100%);
    color: #fff;
    padding: 26px 22px;
    position: relative;
}

.tp-auth-aside-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.tp-auth-brand {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.tp-auth-lead {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    max-width: 26ch;
}

.tp-auth-bullets { margin-top: 10px; display: grid; gap: 8px; }
.tp-auth-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.90);
}
.tp-auth-bullet i { color: rgba(255,255,255,0.95); }

.tp-auth-mini {
    margin-top: auto;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    display: flex;
    gap: 10px;
    align-items: center;
}

.tp-auth-main {
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(180deg, rgba(245,247,250,0.75) 0%, rgba(245,247,250,0.00) 70%);
}

.tp-auth-card {
    width: min(560px, 100%);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: 22px;
    box-shadow: 0 20px 55px rgba(2,6,23,0.10);
    padding: 26px 26px 22px 26px;
}

.tp-auth-card-top { text-align: center; }
.tp-auth-logo img {
    height: 72px;
    width: 72px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(2,6,23,0.12);
    margin-bottom: 12px;
}

.tp-auth-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--tp-text);
    letter-spacing: -0.03em;
}

.tp-auth-sub {
    font-size: 13px;
    color: var(--tp-muted);
    margin-top: 4px;
}

.tp-auth-form { margin-top: 18px; display: grid; gap: 10px; }

.tp-label {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15,23,42,0.85);
    margin-top: 6px;
}

.tp-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.14);
    background: #fff;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.tp-input:focus {
    border-color: rgba(31,60,136,0.55);
    box-shadow: 0 0 0 5px rgba(31,60,136,0.14);
}

.tp-auth-error {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: rgba(185, 28, 28, 0.95);
    font-weight: 700;
    font-size: 12px;
}

.tp-auth-actions { margin-top: 10px; display: flex; justify-content: center; }

.tp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    width: min(220px, 100%);
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(180deg, var(--tp-primary) 0%, #162F73 100%);
    box-shadow: 0 16px 34px rgba(31,60,136,0.22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.tp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(31,60,136,0.26);
    filter: brightness(1.02);
}

.tp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 900;
    color: var(--tp-primary);
    border: 1px solid rgba(31,60,136,0.30);
    background: rgba(255,255,255,0.75);
}

.tp-btn-outline:hover {
    color: var(--tp-primary-2);
    border-color: rgba(31,60,136,0.45);
}

/* Mobile */
@media (max-width: 900px) {
    .tp-auth { grid-template-columns: 1fr; }
    .tp-auth-aside { min-height: 220px; }
    .tp-auth-brand { font-size: 34px; }
}

/* =========================
   Polishing the landing page
   ========================= */
.td-page { padding-bottom: 28px; }
.td-hero-title { color: var(--tp-primary) !important; }
.td-hero-hint i { color: var(--tp-primary) !important; }
.td-countdown strong { color: var(--tp-primary) !important; }
.td-chip { border-radius: 999px !important; }
.td-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(2,6,23,0.12); }

/* =========================
   Side rails + footer + ribbon + welcome modal
   ========================= */

.tp-brand-stack{display:flex;flex-direction:column;gap:2px}
.tp-brand-sub{font-size:11px;font-weight:700;color:var(--tp-muted);margin-top:-2px}

.tp-nav{margin-left:26px;display:flex;gap:16px;align-items:center}
.tp-nav-link{font-weight:800;color:#0f172a;text-decoration:none;padding:8px 10px;border-radius:12px}
.tp-nav-link:hover{background:rgba(31,60,136,0.08);color:var(--tp-primary)}

.tp-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.tp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--tp-primary);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 10px 26px rgba(2,6,23,0.14)}
.tp-btn:hover{background:var(--tp-primary-2);color:#fff}
.tp-icon-btn{height:42px;width:42px;border-radius:14px;border:1px solid var(--tp-border);background:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(2,6,23,0.08)}
.tp-icon-btn:hover{background:rgba(31,60,136,0.06)}

.tp-main{padding-bottom:20px}
.tp-shell{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr) 200px;gap:12px;padding:10px}
.tp-center{min-width:0}
.tp-rail{position:sticky;top:78px;align-self:start;display:flex;flex-direction:column;gap:12px}

@media (max-width: 1100px){
  .tp-shell{grid-template-columns:minmax(0,1fr);padding:12px}
  .tp-rail{display:none}
  .tp-nav{display:none}
}

.tp-widget{background:#fff;border:1px solid var(--tp-border);border-radius:18px;box-shadow:0 12px 30px rgba(2,6,23,0.08);padding:12px}
.tp-widget-title{font-weight:900;color:#0f172a;display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:16px}
.tp-widget-title i{color:var(--tp-primary)}

.tp-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.tp-chip{border:1px solid rgba(31,60,136,0.22);background:rgba(31,60,136,0.06);color:var(--tp-primary);font-weight:900;border-radius:999px;padding:7px 10px;font-size:12px}
.tp-chip:hover{background:rgba(31,60,136,0.10)}

.tp-widget-btn{width:100%;display:flex;align-items:center;gap:10px;justify-content:flex-start;border-radius:14px;border:1px solid var(--tp-border);background:#fff;padding:10px 12px;font-weight:900;color:#0f172a;margin-top:8px}
.tp-widget-btn i{color:var(--tp-primary)}
.tp-widget-btn:hover{background:rgba(31,60,136,0.06)}

.tp-mini-list{display:flex;flex-direction:column;gap:10px}
.tp-mini{display:flex;gap:10px;align-items:center;border:1px solid var(--tp-border);border-radius:16px;background:#fff;padding:10px;width:100%;text-align:left}
.tp-mini:hover{background:rgba(31,60,136,0.06)}
.tp-mini img{width:54px;height:54px;border-radius:14px;object-fit:cover;box-shadow:0 10px 26px rgba(2,6,23,0.14)}
.tp-mini-title{font-weight:900;color:#0f172a;font-size:13px;line-height:1.2}
.tp-mini-sub{color:var(--tp-muted);font-weight:700;font-size:12px;margin-top:2px}

.tp-bullets{display:flex;flex-direction:column;gap:8px}
.tp-bullet{display:flex;gap:10px;align-items:center;color:#0f172a;font-weight:800;font-size:12px}
.tp-bullet i{color:var(--tp-primary)}

.tp-footer{margin-top:20px;border-top:1px solid var(--tp-border);background:rgba(255,255,255,0.65)}
.tp-footer-inner{max-width:1200px;margin:0 auto;padding:18px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.tp-footer-title{font-weight:900;color:#0f172a}
.tp-footer-sub{font-size:12px;color:var(--tp-muted);font-weight:700}
.tp-footer-links{display:flex;gap:14px;align-items:center}
.tp-footer-links a{color:var(--tp-muted);font-weight:800;text-decoration:none}
.tp-footer-links a:hover{color:var(--tp-primary)}

/* Ribbon */
/* Thinner and lower so it doesn't steal attention/space from side widgets */
.tp-ribbon{position:fixed;left:8px;top:82%;transform:translateY(-50%);z-index:60;border:0;background:#16a34a;color:#fff;padding:6px 4px;border-radius:0 10px 10px 0;box-shadow:0 18px 44px rgba(2,6,23,0.20);display:flex;gap:8px;align-items:center}
.tp-ribbon:hover{filter:brightness(0.98)}
.tp-ribbon-text{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;letter-spacing:0.6px;font-size:12px}
.tp-ribbon-chev{height:24px;width:24px;border-radius:10px;background:rgba(255,255,255,0.20);display:grid;place-items:center}

/* Welcome modal */
.tp-welcome-modal{border-radius:18px;border:1px solid var(--tp-border);box-shadow:0 18px 44px rgba(2,6,23,0.18)}
.tp-welcome-title{font-weight:900;color:#0f172a;font-size:18px}
.tp-welcome-sub{color:var(--tp-muted);font-weight:700;font-size:12px;margin-top:2px}
.tp-welcome-code{border:2px dashed rgba(31,60,136,0.25);border-radius:16px;padding:14px;background:rgba(31,60,136,0.04)}
.tp-welcome-code-label{font-size:12px;font-weight:900;color:var(--tp-muted)}
.tp-welcome-code-value{font-weight:900;font-size:18px;letter-spacing:2px;color:var(--tp-primary);margin-top:6px}
.tp-welcome-footer{display:flex;justify-content:center;margin-top:8px}

/* Offcanvas */
.tp-filter{margin-top:12px}
.tp-divider{height:1px;background:var(--tp-border);margin:16px 0}
.tp-muted{color:var(--tp-muted);font-weight:700;font-size:12px}


/* ============================
   Fix: horizontal flicker
   Root causes found:
   1) Carousel component was overriding Bootstrap's `.container` globally.
   2) Bootstrap overlay cleanup can leave body padding-right.
   3) Any tiny horizontal overflow can trigger reflow/jitter.

   These rules keep layout stable.
   ============================ */

/* When there is no active overlay backdrop, force body back to neutral.
   Prevents cumulative padding-right shrink. */
body:not(:has(.modal-backdrop)):not(:has(.offcanvas-backdrop)) {
    padding-right: 0 !important;
    overflow: auto !important;
}

/* Carousel: dedicated container (avoid `.container`) */
.td-carousel-container {
    width: 100%;
    height: 500px;
    padding: 2px 16px;
    box-sizing: border-box;
}
.td-carousel-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Prevent micro horizontal overflow from causing layout jitter */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}