/* =========================================================
   Tourism Incubator — home, header & footer
   ========================================================= */
:root {
    --tv-purple: #2b0a3d;
    --tv-purple-2: #3d1257;
    --tv-red: #e3342f;
    --tv-red-dark: #c42722;
    --tv-yellow: #f7b500;
    --tv-dark: #1c1c1c;
    --tv-text: #4a4a4a;
    --tv-muted: #8a8a8a;
    --tv-border: #e7e7e7;
    --tv-bg-soft: #f3f3f3;
    --tv-radius: 6px;
    --tv-font: 'Poppins', 'Roboto', sans-serif;
    --tv-font-serif: 'Libre Baskerville', Georgia, serif;
}

html[dir="rtl"] {
    --tv-font: 'Tajawal', 'Poppins', sans-serif;
    --tv-font-serif: 'Tajawal', 'Poppins', sans-serif;
}

body {
    font-family: var(--tv-font);
    color: var(--tv-dark);
    background: #fff;
}

.tv-topbar a,
.tv-nav a,
.tv-footer a,
.tv-section a {
    text-decoration: none;
}

/* ---------- Buttons ---------- */
.tv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    font-family: var(--tv-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

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

.tv-btn-primary:hover {
    background: var(--tv-red-dark);
    border-color: var(--tv-red-dark);
    color: #fff;
}

.tv-btn-outline {
    background: #fff;
    border-color: var(--tv-red);
    color: var(--tv-red);
    border-radius: var(--tv-radius);
}

.tv-btn-outline:hover {
    background: var(--tv-red);
    color: #fff;
}

.tv-nav .tv-btn-outline {
    border-radius: 50px;
    background: var(--tv-red);
    color: #fff;
    font-size: 13px;
    padding: 8px 20px;
}

.tv-nav .tv-btn-outline:hover {
    background: var(--tv-red-dark);
}

.tv-btn-dark {
    background: var(--tv-purple);
    color: #fff;
}

.tv-btn-dark:hover {
    background: var(--tv-purple-2);
    color: #fff;
}

.tv-btn-yellow {
    background: var(--tv-yellow);
    color: #fff;
}

.tv-btn-yellow:hover {
    background: #de9f00;
    color: #fff;
}

.tv-btn-sm {
    padding: 6px 16px;
    font-size: 12px;
}

.tv-badge {
    display: inline-block;
    background: var(--tv-red);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 4px;
    line-height: 1.5;
}

/* ---------- Top bar ---------- */
.tv-topbar {
    background: var(--tv-purple);
    color: #fff;
    font-size: 12px;
    /* Above the sticky .tv-nav (1020) so the language / account menus open over it. */
    position: relative;
    z-index: 1030;
}

.tv-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    gap: 16px;
}

.tv-topbar-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tv-topbar-social a {
    color: #fff;
    font-size: 12px;
    opacity: .9;
}

.tv-topbar-social a:hover {
    opacity: 1;
    color: var(--tv-yellow);
}

.tv-topbar-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.tv-topbar-link {
    background: none;
    border: 0;
    color: #fff;
    font-size: 12px;
    padding: 0;
    font-family: var(--tv-font);
}

.tv-topbar-link:hover,
.tv-topbar-link:focus,
.tv-topbar-link.show {
    color: var(--tv-yellow);
    outline: 0;
}

.tv-topbar .dropdown-menu {
    font-size: 13px;
    min-width: 150px;
    padding: 6px;
    margin-top: 8px !important;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.tv-topbar .dropdown-item {
    border-radius: 5px;
    padding: 7px 12px;
    color: var(--tv-dark);
}

.tv-topbar .dropdown-item:hover,
.tv-topbar .dropdown-item:focus {
    background: #f3ebfa;
    color: var(--tv-purple);
}

.tv-topbar .dropdown-item.active,
.tv-topbar .dropdown-item:active {
    background: var(--tv-purple);
    color: #fff;
}

/* ---------- Header ---------- */
.tv-nav {
    background: #fff;
    border-bottom: 1px solid var(--tv-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.tv-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    gap: 20px;
}

.tv-logo img {
    height: 46px;
    width: auto;
    display: block;
}

.tv-nav-links {
    align-items: center;
    gap: 28px;
    margin-inline-start: auto;
}

.tv-nav-links a {
    color: var(--tv-dark);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}

.tv-nav-links a:hover {
    color: var(--tv-red);
}

.tv-nav-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.tv-bell {
    position: relative;
    color: var(--tv-dark);
    font-size: 20px;
    line-height: 1;
}

.tv-bell-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    background: var(--tv-red);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tv-nav-toggle {
    font-size: 30px;
    cursor: pointer;
    color: var(--tv-purple);
}

.tv-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--tv-border);
}

.tv-mobile-links {
    display: flex;
    flex-direction: column;
}

.tv-mobile-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    color: var(--tv-dark);
    font-weight: 500;
    border-bottom: 1px solid var(--tv-border);
}

.tv-mobile-links a i {
    color: var(--tv-red);
    width: 18px;
    text-align: center;
}

/* ---------- Hero ---------- */
.tv-hero {
    position: relative;
    background-size: cover;
    background-position: center 60%;
    color: #fff;
    padding: 80px 0 130px;
    text-align: center;
}

.tv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 10, 5, .55) 0%, rgba(20, 10, 5, .65) 100%);
}

.tv-hero .container {
    position: relative;
    max-width: 900px;
}

.tv-hero h1 {
    font-family: var(--tv-font-serif);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 22px;
    color: #fff;
}

.tv-hero p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .9);
}

/* ---------- Search ---------- */
.tv-search-wrap {
    position: relative;
    z-index: 5;
    margin-top: -90px;
}

.tv-search {
    max-width: 1000px;
    margin: 0 auto;
}

.tv-search-tabs {
    display: inline-flex;
    background: var(--tv-purple-2);
    border-radius: 6px 6px 0 0;
    padding: 4px 4px 0;
    margin-inline-start: 0;
    overflow-x: auto;
    max-width: 100%;
}

.tv-search-tabs button {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    font-family: var(--tv-font);
}

.tv-search-tabs button.active {
    background: var(--tv-red);
}

.tv-search-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
    padding: 22px 26px;
}

html[dir="rtl"] .tv-search-card {
    border-radius: 8px 0 8px 8px;
}

.tv-search-field {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: text;
    min-width: 0;
}

.tv-search-field > i {
    color: var(--tv-muted);
    font-size: 18px;
    margin-top: 2px;
}

.tv-search-field span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.tv-search-field strong {
    font-size: 14px;
    font-weight: 500;
    color: var(--tv-dark);
}

.tv-search-field input {
    border: 0;
    outline: 0;
    padding: 2px 0 0;
    font-size: 12px;
    color: var(--tv-dark);
    background: transparent;
    width: 100%;
}

.tv-search-field input::placeholder {
    color: var(--tv-red);
}

.tv-search-btn {
    border-radius: 6px;
    padding: 11px 26px;
    font-size: 15px;
}

/* ---------- Sections ---------- */
.tv-section {
    padding: 70px 0;
}

.tv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.tv-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--tv-dark);
}

.tv-title-lg {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 22px;
    max-width: 280px;
    color: var(--tv-dark);
}

.tv-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--tv-text);
    margin-bottom: 26px;
}

/* ---------- Hajj ---------- */
.tv-hajj {
    padding-top: 110px;
    overflow: hidden;
}

.tv-hajj-slider {
    margin: 0 -10px;
}

.tv-hajj-slide {
    padding: 0 10px;
}

.tv-hajj-slide img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    border-radius: 4px;
}

.tv-hajj-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.tv-hajj-next {
    background: none;
    border: 0;
    color: #1a4ed8;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.tv-hajj-next i {
    font-size: 18px;
}

.tv-hajj-dots .slick-dots {
    position: static;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    width: auto;
}

.tv-hajj-dots .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.tv-hajj-dots .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 12px;
    background: #1a4ed8;
    transition: width .25s;
}

.tv-hajj-dots .slick-dots li button::before {
    display: none;
}

.tv-hajj-dots .slick-dots li.slick-active button {
    width: 40px;
    background: #fff;
    border: 2px solid #1a4ed8;
}

/* ---------- Offers ---------- */
.tv-offer {
    display: flex;
    align-items: flex-end;
    min-height: 250px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.tv-offer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, .7) 100%);
    transition: opacity .3s;
}

.tv-offer:hover::before {
    opacity: .85;
}

.tv-offer-body {
    position: relative;
    padding: 20px;
}

.tv-offer-discount {
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tv-offer h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 8px 0 4px;
    color: #fff;
}

.tv-offer p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    max-width: 260px;
}

/* ---------- Airline ---------- */
.tv-airline {
    display: flex;
    align-items: center;
    background: linear-gradient(110deg, #1f8fb3 0%, #33a9c9 55%, #5bc0d8 100%);
    border-radius: 4px;
    min-height: 230px;
    overflow: hidden;
    position: relative;
}

.tv-airline-content {
    flex: 0 0 45%;
    padding: 30px 40px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.tv-airline h2 {
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 14px;
    color: #fff;
}

.tv-airline p {
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .9);
}

.tv-airline-visual {
    flex: 1;
    align-self: stretch;
    position: relative;
    min-height: 230px;
}

.tv-airline-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .35;
    mix-blend-mode: luminosity;
}

.tv-pass {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(360px, 88%);
    transform: translate(-50%, -50%) rotate(-7deg);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
    color: var(--tv-dark);
}

.tv-pass-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--tv-yellow);
    padding: 10px 18px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}

.tv-pass-route {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 8px;
}

.tv-pass-route strong {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 1px;
}

.tv-pass-line {
    flex: 1;
    border-top: 2px dashed #1a4ed8;
    position: relative;
    height: 0;
}

.tv-pass-line i {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #1a4ed8;
    background: #fff;
    padding: 0 6px;
}

.tv-pass-meta {
    display: flex;
    justify-content: space-between;
    padding: 6px 18px 16px;
    font-size: 11px;
    color: var(--tv-muted);
}

.tv-pass-meta b {
    display: block;
    color: var(--tv-dark);
    font-size: 13px;
}

/* ---------- Destination / package cards ---------- */
.tv-dest {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 190px;
    color: #fff;
}

.tv-dest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tv-dest:hover img {
    transform: scale(1.06);
}

.tv-dest::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .55) 100%);
}

.tv-dest-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
}

.tv-dest h3 {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    margin: 20px 0 auto;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.tv-dest-body > span:last-child {
    font-size: 11px;
    color: #fff;
}

.tv-dest-package .tv-dest-body {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: start;
    gap: 6px;
}

.tv-dest-package h3 {
    margin: 0;
}

.tv-dest-package .tv-badge {
    font-size: 10px;
    padding: 2px 8px;
}

/* ---------- Itinerary banner ---------- */
.tv-itinerary {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 90px 0;
    color: #fff;
}

.tv-itinerary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 18, 25, .8) 0%, rgba(10, 18, 25, .45) 55%, rgba(10, 18, 25, .15) 100%);
}

html[dir="rtl"] .tv-itinerary::before {
    background: linear-gradient(270deg, rgba(10, 18, 25, .8) 0%, rgba(10, 18, 25, .45) 55%, rgba(10, 18, 25, .15) 100%);
}

.tv-itinerary .container {
    position: relative;
}

.tv-itinerary-content {
    max-width: 440px;
}

.tv-itinerary h2 {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    margin-bottom: 14px;
    color: #fff;
}

.tv-itinerary p {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 22px;
    color: #fff;
}

/* ---------- Special package ---------- */
.tv-sp-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
    overflow: hidden;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}

.tv-sp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.tv-sp-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.tv-sp-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
}

.tv-sp-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tv-sp-title h3 {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    color: var(--tv-dark);
}

.tv-sp-fav {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tv-red);
    font-size: 14px;
    line-height: 1;
}

.tv-sp-body small {
    font-size: 10px;
    color: var(--tv-muted);
    margin-top: 2px;
}

.tv-sp-body strong {
    font-size: 11px;
    font-weight: 600;
    color: var(--tv-dark);
    margin-bottom: 12px;
}

.tv-sp-book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--tv-red);
    font-size: 11px;
    font-weight: 600;
    border-top: 1px solid var(--tv-border);
    padding-top: 8px;
}

.tv-sp-book:hover {
    color: var(--tv-red-dark);
}

/* ---------- Near your location ---------- */
.tv-near-main {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.tv-near-map {
    height: 400px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tv-bg-soft);
}

.tv-near-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.tv-near-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* ---------- Newsletter ---------- */
.tv-newsletter {
    display: flex;
    align-items: stretch;
    background: var(--tv-bg-soft);
    border: 1px solid var(--tv-border);
    border-radius: 4px;
    overflow: hidden;
}

.tv-newsletter > img {
    width: 50%;
    min-height: 160px;
    object-fit: cover;
}

.tv-newsletter-body {
    flex: 1;
    padding: 30px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tv-newsletter h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 280px;
    margin-bottom: 20px;
    color: var(--tv-dark);
}

.tv-newsletter-form {
    display: flex;
    gap: 6px;
    max-width: 330px;
}

.tv-newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--tv-border);
    background: #fff;
    border-radius: 3px;
    padding: 7px 10px;
    font-size: 12px;
    outline: 0;
}

.tv-newsletter-form input:focus {
    border-color: var(--tv-red);
}

.tv-newsletter-form .tv-btn {
    border-radius: 3px;
    padding: 7px 18px;
    font-size: 12px;
}

/* ---------- Footer ---------- */
.tv-footer {
    background: var(--tv-bg-soft);
    margin-top: 40px;
    font-size: 13px;
}

.tv-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 60px 0 50px;
}

.tv-footer-brand p {
    color: var(--tv-text);
    font-size: 12px;
    line-height: 1.7;
    margin: 18px 0 26px;
    max-width: 300px;
}

.tv-footer-brand h6,
.tv-footer-col h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-dark);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid #d9d9d9;
}

.tv-footer-brand h6 {
    max-width: 260px;
}

.tv-footer-social {
    display: flex;
    gap: 14px;
}

.tv-footer-social a {
    color: var(--tv-dark);
    font-size: 12px;
}

.tv-footer-social a:hover,
.tv-footer-col a:hover {
    color: var(--tv-red);
}

.tv-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tv-footer-col li {
    margin-bottom: 10px;
}

.tv-footer-col a {
    color: var(--tv-text);
    font-size: 12px;
}

.tv-footer-bottom {
    background: #e6e6e6;
    padding: 16px 0;
}

.tv-footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.tv-footer-bottom p {
    margin: 0;
    font-size: 11px;
    color: var(--tv-text);
}

.tv-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.tv-footer-bottom nav a {
    font-size: 11px;
    color: var(--tv-text);
}

.tv-footer-bottom nav a:hover {
    color: var(--tv-red);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .tv-nav-links {
        gap: 18px;
    }
}

@media (max-width: 991px) {
    .tv-search-card {
        flex-wrap: wrap;
    }

    .tv-search-field {
        flex: 1 1 calc(50% - 16px);
    }

    .tv-search-btn {
        flex: 1 1 100%;
    }

    .tv-hajj {
        padding-top: 70px;
    }

    .tv-title-lg {
        max-width: none;
    }

    .tv-airline {
        flex-direction: column;
        align-items: stretch;
    }

    .tv-airline-content {
        flex: none;
        padding: 30px 26px 10px;
    }

    .tv-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tv-near-main,
    .tv-near-map {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .tv-topbar-social span {
        display: none;
    }

    .tv-hero {
        padding: 60px 0 120px;
    }

    .tv-search-field {
        flex: 1 1 100%;
    }

    .tv-section {
        padding: 50px 0;
    }

    .tv-title-lg {
        font-size: 28px;
    }

    .tv-hajj-slide img {
        height: 240px;
    }

    .tv-dest {
        height: 160px;
    }

    .tv-newsletter {
        flex-direction: column;
    }

    .tv-newsletter > img {
        width: 100%;
        height: 180px;
    }

    .tv-newsletter-body {
        padding: 24px 20px;
    }

    .tv-footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }

    .tv-footer-bottom nav {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .tv-logo img {
        height: 38px;
    }

    .tv-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tv-near-thumb {
        height: 100px;
    }
}

/* =========================================================
   Inner pages
   ========================================================= */
.tv-page-banner {
    position: relative;
    background-size: cover;
    background-position: center 40%;
    color: #fff;
    text-align: center;
    padding: 70px 0 60px;
}

.tv-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 10, 5, .55);
}

.tv-page-banner .container {
    position: relative;
}

.tv-page-banner h1 {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.tv-breadcrumb {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
}

.tv-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.tv-breadcrumb a:hover {
    color: var(--tv-yellow);
}

.tv-btn-square {
    border-radius: 4px;
    padding: 10px 26px;
}

/* ---------- Hajj & Umrah page ---------- */
.tv-hu-intro {
    padding-top: 80px;
}

.tv-hu-intro .tv-title-lg {
    max-width: none;
    margin-bottom: 18px;
}

.tv-hu-intro .tv-text {
    max-width: 560px;
    margin-bottom: 0;
}

.tv-service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 10px;
    overflow: hidden;
}

.tv-service-card > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.tv-service-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 16px 14px;
}

.tv-service-body h3 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 18px;
    max-width: 240px;
    color: var(--tv-dark);
}

.tv-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1;
}

.tv-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tv-text);
    padding-inline-start: 8px;
    margin-bottom: 16px;
}

.tv-check-list li i {
    color: #1a4ed8;
    font-size: 20px;
    flex-shrink: 0;
}

.tv-check-list-filled li i {
    font-size: 14px;
}

.tv-hu-highlights {
    background: #eef4fd;
    padding: 100px 0;
}

.tv-highlight-card {
    height: 100%;
    background: #fde1e1;
    border-radius: 10px;
    padding: 16px 16px 6px;
}

.tv-highlight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.tv-highlight-head h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    max-width: 170px;
    color: var(--tv-dark);
}

.tv-highlight-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #f5c518;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-highlight-card > p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--tv-text);
    margin-bottom: 22px;
}

.tv-highlight-card .tv-check-list li {
    padding-inline-start: 4px;
}

.tv-provider-cta {
    border: 1px dashed #e98a8a;
    border-radius: 10px;
    text-align: center;
    padding: 50px 24px;
}

.tv-provider-cta h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    margin-bottom: 18px;
    color: var(--tv-dark);
}

.tv-provider-cta p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--tv-text);
    max-width: 520px;
    margin: 0 auto 28px;
}

.tv-provider-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tv-provider-actions .tv-btn {
    min-width: 140px;
}

@media (max-width: 767px) {
    .tv-hu-intro {
        padding-top: 50px;
    }

    .tv-hu-highlights {
        padding: 60px 0;
    }
}

/* custom.css (imported by style.css) forces h1–h6 sizes with !important;
   re-assert the design sizes for this theme's headings. */
.tv-hero h1 { font-size: clamp(26px, 3.4vw, 42px) !important; }
.tv-page-banner h1 { font-size: clamp(26px, 3vw, 38px) !important; }
.tv-title { font-size: 20px !important; }
.tv-title-lg { font-size: 34px !important; }
.tv-airline h2 { font-size: clamp(30px, 4vw, 52px) !important; }
.tv-itinerary h2 { font-size: clamp(26px, 3vw, 34px) !important; }
.tv-provider-cta h2 { font-size: clamp(24px, 3vw, 32px) !important; }
.tv-newsletter h2 { font-size: 18px !important; }
.tv-dest h3 { font-size: clamp(20px, 2.2vw, 28px) !important; }
.tv-offer h3,
.tv-service-body h3 { font-size: 17px !important; }
.tv-highlight-head h3 { font-size: 18px !important; }
.tv-sp-title h3 { font-size: 13px !important; }
.tv-footer-brand h6,
.tv-footer-col h5 { font-size: 13px !important; }

@media (max-width: 767px) {
    .tv-title-lg { font-size: 28px !important; }
}

/* ---------- Service provider registration ---------- */
.tv-reg {
    --tv-violet: #7e3fb0;
    --tv-violet-soft: #f3ebfa;
    --tv-field-bg: #f7f8fa;
}

.tv-reg form {
    max-width: 1100px;
    margin: 0 auto;
}

.tv-reg-card {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 14px;
    padding: 30px 36px;
    margin-bottom: 26px;
}

.tv-reg-intro {
    border-top: 6px solid var(--tv-violet);
}

.tv-reg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tv-violet-soft);
    color: var(--tv-violet);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.tv-reg-intro h2 {
    font-size: 26px !important;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tv-dark);
}

.tv-reg-intro p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--tv-muted);
    max-width: 620px;
    margin: 0;
}

.tv-reg-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px dashed var(--tv-border);
}

.tv-reg-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tv-violet-soft);
    color: var(--tv-violet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.tv-reg-head h3 {
    font-size: 18px !important;
    font-weight: 600;
    margin: 2px 0;
    color: var(--tv-dark);
}

.tv-reg-head h3 small,
.tv-field label small {
    font-size: 11px;
    font-weight: 400;
    color: var(--tv-muted);
}

.tv-reg-head p {
    font-size: 12px;
    color: var(--tv-muted);
    margin: 0;
}

.tv-field {
    margin-bottom: 22px;
}

.tv-field > label,
.tv-label-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tv-dark);
    margin-bottom: 8px;
}

.tv-field em,
.tv-label-row em {
    color: var(--tv-red);
    font-style: normal;
}

.tv-field input[type=text],
.tv-field input[type=email],
.tv-field input[type=tel],
.tv-field input[type=url],
.tv-field input[type=number],
.tv-field input[type=date],
.tv-field input[type=password],
.tv-field select,
.tv-field textarea {
    width: 100%;
    background: var(--tv-field-bg);
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--tv-dark);
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: var(--tv-font);
}

.tv-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%238a8a8a' d='M1.6 5.1a.6.6 0 0 1 .8 0L8 10.7l5.6-5.6a.6.6 0 1 1 .8.8l-6 6a.6.6 0 0 1-.8 0l-6-6a.6.6 0 0 1 0-.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

html[dir="rtl"] .tv-field select {
    background-position: left 14px center;
}

.tv-field textarea {
    resize: vertical;
    min-height: 100px;
}

.tv-field input::placeholder,
.tv-field textarea::placeholder {
    color: #a9adb5;
}

.tv-field input:focus,
.tv-field select:focus,
.tv-field textarea:focus,
.tv-choice-other input[type=text]:focus {
    background: #fff;
    border-color: var(--tv-violet);
    box-shadow: 0 0 0 3px rgba(126, 63, 176, .12);
}

.tv-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.tv-label-row label {
    margin: 0;
}

.tv-reg-tag {
    background: var(--tv-violet-soft);
    color: var(--tv-violet);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
}

.tv-choice-grid {
    display: grid;
    gap: 12px;
}

.tv-choice-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.tv-choice-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tv-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--tv-dark);
    cursor: pointer;
    margin: 0;
    transition: border-color .2s, background .2s;
}

.tv-choice:hover {
    border-color: #cfc3dc;
}

.tv-choice:has(> input:checked) {
    border-color: var(--tv-violet);
    background: #fbf8fe;
}

.tv-choice > input[type=radio],
.tv-choice > input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #1a4ed8;
}

.tv-choice > span {
    white-space: nowrap;
}

.tv-choice-other input[type=text] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--tv-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    outline: 0;
    background: #fff;
}

.tv-choice-wide {
    grid-column: 1 / -1;
}

.tv-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    border: 1.5px dashed #d8d8d8;
    border-radius: 10px;
    padding: 24px 18px 16px;
    cursor: pointer;
    margin: 0;
    transition: border-color .2s, background .2s;
}

.tv-upload:hover,
.tv-upload.has-file {
    border-color: var(--tv-violet);
    background: #fbf8fe;
}

.tv-upload input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.tv-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tv-violet-soft);
    color: var(--tv-violet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.tv-upload strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-dark);
    margin-bottom: 6px;
}

.tv-upload-tag {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eef0f3;
    color: var(--tv-text);
    margin-bottom: 10px;
}

.tv-upload-tag.is-required {
    background: #fde8e8;
    color: var(--tv-red);
}

.tv-upload-tag.is-info {
    background: #e8eefc;
    color: #1a4ed8;
}

.tv-upload-hint {
    font-size: 11px;
    color: #a9adb5;
    word-break: break-all;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tv-border);
    width: 100%;
}

.tv-upload.has-file .tv-upload-hint {
    color: var(--tv-violet);
    font-weight: 500;
}

.tv-upload-action {
    font-size: 12px;
    font-weight: 500;
    color: var(--tv-violet);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.tv-reg-submit {
    padding: 24px 22px;
}

.tv-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tv-text);
    max-width: 720px;
    margin-bottom: 20px;
    cursor: pointer;
}

.tv-agree input {
    margin-top: 3px;
    accent-color: var(--tv-violet);
    flex-shrink: 0;
}

.tv-reg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tv-btn-purple {
    background: var(--tv-violet);
    color: #fff;
    border-radius: 8px;
    padding: 12px 34px;
    box-shadow: 0 6px 16px rgba(126, 63, 176, .25);
}

.tv-btn-purple:hover {
    background: #6a3196;
    color: #fff;
}

.tv-btn-ghost {
    background: #fff;
    border-color: var(--tv-border);
    color: var(--tv-dark);
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 500;
}

.tv-btn-ghost:hover {
    border-color: var(--tv-violet);
    color: var(--tv-violet);
}

@media (max-width: 991px) {
    .tv-choice-grid-4,
    .tv-choice-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .tv-reg-card {
        padding: 22px 18px;
    }

    .tv-choice-grid-4,
    .tv-choice-grid-3 {
        grid-template-columns: 1fr;
    }

    .tv-choice > span {
        white-space: normal;
    }

    .tv-choice-other {
        flex-wrap: wrap;
    }
}

/* ---------- Hotels listing ---------- */
.tv-hero-listing {
    padding: 60px 0 70px;
}

.tv-hero-listing::before {
    background: linear-gradient(180deg, rgba(0, 20, 30, .35) 0%, rgba(0, 20, 30, .2) 100%);
}

.tv-hero-listing .container {
    max-width: 1140px;
}

.tv-hero-listing h1 {
    font-family: var(--tv-font);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px) !important;
    margin-bottom: 14px;
}

.tv-hero-listing p {
    max-width: 560px;
    margin-bottom: 34px;
    font-size: 15px;
}

.tv-hero-listing .tv-search {
    max-width: 820px;
    text-align: start;
}

.tv-sort-btn {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 15px;
    color: var(--tv-dark);
    font-family: var(--tv-font);
}

.tv-sort-btn:hover {
    border-color: var(--tv-purple);
}

.tv-section-head .dropdown-item.active,
.tv-section-head .dropdown-item:active {
    background: var(--tv-purple);
}

.tv-hotel-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
    transition: transform .25s, box-shadow .25s;
}

.tv-hotel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
}

.tv-hotel-card > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.tv-hotel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
}

.tv-hotel-body .tv-sp-title h3 {
    font-size: 15px !important;
    font-weight: 500;
}

.tv-hotel-body .tv-sp-fav {
    font-size: 17px;
    color: var(--tv-dark);
}

.tv-hotel-body .tv-sp-fav.active {
    color: var(--tv-red);
}

.tv-hotel-city {
    font-size: 11px;
    color: var(--tv-muted);
    margin: 4px 0 6px;
}

.tv-stars {
    display: flex;
    gap: 3px;
    font-size: 13px;
    color: #d5d5d5;
    padding-bottom: 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--tv-border);
}

.tv-stars .on {
    color: #f5a623;
}

.tv-hotel-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.tv-hotel-foot small {
    display: block;
    font-size: 11px;
    color: var(--tv-muted);
}

.tv-hotel-foot strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--tv-dark);
}

.tv-hotel-foot del {
    font-size: 9px;
    font-weight: 400;
    color: var(--tv-muted);
}

.tv-btn-xs {
    padding: 5px 12px;
    font-size: 11px;
}

.tv-empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--tv-border);
    border-radius: 10px;
}

.tv-empty > i {
    font-size: 34px;
    color: var(--tv-muted);
}

.tv-empty h3 {
    font-size: 18px !important;
    font-weight: 600;
    margin: 14px 0 8px;
}

.tv-empty p {
    color: var(--tv-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.tv-near-carousel {
    position: relative;
}

.tv-near-track {
    margin: 0 -10px;
}

.tv-near-item {
    padding: 0 10px;
}

.tv-near-next {
    position: absolute;
    top: 50%;
    inset-inline-end: -14px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--tv-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    z-index: 2;
}

.tv-near-next:hover {
    background: var(--tv-red);
}

@media (max-width: 767px) {
    .tv-near-next {
        inset-inline-end: 4px;
    }
}

/* Keep the newsletter banner at the design height regardless of photo ratio. */
.tv-newsletter > img {
    height: 230px;
    min-height: 0;
}

/* ---------- Hotel card links ---------- */
.tv-hotel-img {
    display: block;
    overflow: hidden;
}

.tv-hotel-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.tv-hotel-card:hover .tv-hotel-img img {
    transform: scale(1.05);
}

.tv-hotel-body .tv-sp-title h3 a {
    color: inherit;
}

.tv-hotel-body .tv-sp-title h3 a:hover {
    color: var(--tv-red);
}

/* ---------- Hotel detail ---------- */
.tv-hotel-detail {
    padding-top: 40px;
}

.tv-hd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
}

.tv-hd-head h1 {
    font-size: clamp(26px, 2.6vw, 34px) !important;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--tv-dark);
}

.tv-hd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--tv-muted);
}

.tv-stars-inline {
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.tv-hd-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

.tv-hd-icons {
    display: flex;
    gap: 14px;
}

.tv-hd-icons button {
    background: none;
    border: 0;
    padding: 0;
    font-size: 17px;
    color: var(--tv-dark);
}

.tv-hd-icons button:hover,
.tv-hd-icons .tv-sp-fav.active {
    color: var(--tv-red);
}

.tv-booking {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    border: 1px solid var(--tv-border);
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    scroll-margin-top: 110px;
}

.tv-booking label,
.tv-stepper-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.tv-booking label span,
.tv-stepper-field > span {
    font-size: 12px;
    font-weight: 500;
    color: var(--tv-dark);
}

.tv-booking input[type=date] {
    width: 130px;
    border: 1px solid var(--tv-border);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--tv-text);
    outline: 0;
}

.tv-booking input[type=date]:focus {
    border-color: #17b3d6;
}

.tv-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-stepper input {
    width: 44px;
    border: 1px solid var(--tv-border);
    border-radius: 4px;
    padding: 6px 4px;
    text-align: center;
    font-size: 12px;
    -moz-appearance: textfield;
}

.tv-stepper input::-webkit-inner-spin-button,
.tv-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tv-stepper > div {
    display: flex;
    flex-direction: column;
}

.tv-stepper button {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    color: var(--tv-dark);
}

.tv-stepper button:hover {
    color: var(--tv-red);
}

.tv-btn-cyan {
    background: #17b3d6;
    color: #fff;
    border-radius: 4px;
    padding: 9px 18px;
    font-size: 13px;
    margin-inline-start: auto;
}

.tv-btn-cyan:hover {
    background: #0f98b7;
    color: #fff;
}

.tv-hd-title {
    font-size: 18px !important;
    font-weight: 500;
    margin-bottom: 18px;
    color: var(--tv-dark);
}

.tv-hd-about {
    padding-bottom: 26px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--tv-border);
}

.tv-hd-about p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--tv-text);
}

.tv-facilities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
}

.tv-facilities li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--tv-text);
}

.tv-facilities i {
    font-size: 15px;
    color: var(--tv-dark);
}

.tv-hd-map {
    height: 460px;
}

.tv-hd-gallery-wrap {
    margin-top: 50px;
    padding-top: 36px;
    border-top: 1px solid var(--tv-border);
}

.tv-hd-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.tv-hd-tile {
    position: relative;
    border: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--tv-bg-soft);
    cursor: zoom-in;
}

.tv-hd-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.tv-hd-tile:hover img {
    transform: scale(1.05);
}

.tv-hd-gallery > .tv-hd-tile {
    height: 250px;
}

.tv-hd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 250px;
    border: 1px solid var(--tv-border);
    border-radius: 4px;
    padding: 6px;
}

.tv-hd-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 30, 45, .55);
    color: #fff;
    font-size: 26px;
    font-weight: 600;
}

.tv-lightbox .modal-content {
    background: transparent;
    border: 0;
    position: relative;
}

.tv-lightbox .btn-close {
    position: absolute;
    top: -34px;
    inset-inline-end: 0;
    z-index: 3;
}

.tv-lightbox .carousel-item img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
}

.tv-similar-track {
    margin: 0 -10px;
}

.tv-similar-item {
    padding: 0 10px 8px;
}

.tv-similar-track .slick-track {
    display: flex;
}

.tv-similar-track .slick-slide {
    height: auto;
}

.tv-similar-track .slick-slide > div,
.tv-similar-item {
    height: 100%;
}

.tv-similar-next {
    top: 40%;
}

@media (max-width: 991px) {
    .tv-hd-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-hd-map {
        height: 340px;
    }

    .tv-btn-cyan {
        margin-inline-start: 0;
    }
}

@media (max-width: 575px) {
    .tv-hd-head {
        flex-direction: column;
    }

    .tv-hd-actions {
        flex-direction: row;
        align-items: center;
    }

    .tv-facilities {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-hd-gallery {
        grid-template-columns: 1fr;
    }

    .tv-booking input[type=date] {
        width: 100%;
    }

    .tv-booking label {
        flex: 1 1 45%;
    }

    .tv-btn-cyan {
        width: 100%;
    }
}

/* ---------- Package booking popup ---------- */
button.tv-sp-book {
    width: 100%;
    background: none;
    border: 0;
    border-top: 1px solid var(--tv-border);
    padding: 8px 0 0;
    font-family: var(--tv-font);
    cursor: pointer;
}

.tv-booking-modal {
    --tv-violet: #7e3fb0;
    --tv-violet-soft: #f3ebfa;
    --tv-field-bg: #f7f8fa;
}

.tv-booking-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

.tv-booking-modal .modal-header {
    align-items: flex-start;
    border-bottom: 1px dashed var(--tv-border);
    padding: 20px 24px 16px;
}

.tv-booking-modal .modal-header .btn-close {
    margin: 0;
}

html[dir="rtl"] .tv-booking-modal .modal-header .btn-close {
    margin-inline-start: auto;
}

.tv-booking-modal .tv-reg-pill {
    margin-bottom: 8px;
}

.tv-booking-modal .modal-title {
    font-size: 20px !important;
    font-weight: 600;
    color: var(--tv-dark);
    margin: 0;
}

.tv-booking-modal .modal-body {
    padding: 20px 24px;
}

.tv-booking-modal .modal-footer {
    border-top: 0;
    padding: 0 24px 22px;
    gap: 10px;
}

.tv-booking-modal .modal-footer > * {
    margin: 0;
}

/* ---------- Season service request forms ---------- */
.tv-reg-soft {
    background: #f8f8fa;
}

.tv-reg-soft .tv-reg-card {
    box-shadow: 0 2px 10px rgba(20, 10, 40, .03);
}

.tv-dot {
    font-size: 6px;
}

.tv-reg-intro-plain {
    margin-bottom: 30px;
}

.tv-reg-intro-plain h2 {
    font-size: clamp(26px, 2.6vw, 32px) !important;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tv-dark);
}

.tv-reg-intro-plain p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--tv-text);
    max-width: 680px;
    margin: 0;
}

.tv-help {
    display: block;
    font-size: 11px;
    color: #a9adb5;
    margin-top: 6px;
}

.tv-help-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tv-opt {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 500;
    background: #eef0f3;
    color: var(--tv-text);
    border-radius: 4px;
    padding: 2px 8px;
    margin-inline-start: 6px;
}

.tv-head-note {
    font-size: 11px;
    color: #a9adb5;
    white-space: nowrap;
    align-self: center;
}

/* Experience tiles */
.tv-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.tv-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    padding: 10px 6px;
    margin: 0;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.tv-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tv-tile strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--tv-dark);
}

.tv-tile small {
    font-size: 10px;
    color: #a9adb5;
}

.tv-tile:has(input:checked) {
    border: 2px solid var(--tv-violet);
    background: #fbf8fe;
}

.tv-tile:has(input:checked) strong,
.tv-tile:has(input:checked) small {
    color: var(--tv-violet);
}

.tv-tile:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(126, 63, 176, .2);
}

/* Input with trailing unit chip */
.tv-input-suffix {
    position: relative;
}

.tv-input-suffix input {
    padding-inline-end: 140px !important;
}

.tv-input-suffix > span {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    background: #eef0f3;
    color: var(--tv-muted);
    font-size: 11px;
    border-radius: 5px;
    padding: 3px 8px;
    pointer-events: none;
}

/* Phone with dial code */
.tv-phone {
    display: flex;
    background: var(--tv-field-bg);
    border: 1px solid var(--tv-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.tv-phone:focus-within {
    background: #fff;
    border-color: var(--tv-violet);
    box-shadow: 0 0 0 3px rgba(126, 63, 176, .12);
}

.tv-phone select {
    width: 108px !important;
    flex-shrink: 0;
    border: 0 !important;
    border-right: 1px solid var(--tv-border) !important;
    border-radius: 0 !important;
    background-color: #f0f1f4 !important;
    box-shadow: none !important;
    padding-right: 26px !important;
    font-size: 12px !important;
    background-position: right 8px center !important;
}

.tv-phone input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Service option cards */
.tv-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tv-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--tv-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.tv-option:hover {
    border-color: #cfc3dc;
}

.tv-option:has(input:checked) {
    border-color: var(--tv-violet);
    background: #fbf8fe;
}

.tv-option > input {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: var(--tv-violet);
}

.tv-option-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tv-option-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tv-option-body strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-dark);
}

.tv-option-body small {
    font-size: 11px;
    line-height: 1.6;
    color: var(--tv-muted);
}

.tv-option-tag {
    flex-shrink: 0;
    font-size: 10px;
    background: #eef0f3;
    color: var(--tv-text);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Softer upload tiles with a pill button */
.tv-upload-soft {
    background: #fcfcfd;
}

.tv-upload-soft .tv-upload-icon {
    border-radius: 10px;
}

.tv-upload-soft .tv-upload-hint {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    line-height: 1.6;
}

.tv-upload-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tv-violet);
}

/* Radio variants */
.tv-choice-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.tv-choice-stacked {
    align-items: flex-start;
}

.tv-choice-stacked > input {
    margin-top: 3px !important;
    accent-color: var(--tv-violet) !important;
}

.tv-choice-stacked > span {
    display: flex;
    flex-direction: column;
    white-space: normal;
}

.tv-choice-stacked strong {
    font-size: 13px;
    font-weight: 500;
}

.tv-choice-stacked small {
    font-size: 10px;
    color: var(--tv-muted);
}

.tv-choice-sm {
    padding: 7px 12px;
    font-size: 12px;
}

.tv-choice-sm > input {
    accent-color: var(--tv-violet) !important;
}

.tv-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
}

/* Submit rows */
.tv-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 22px;
}

.tv-submit-bar .tv-agree {
    max-width: 520px;
}

.tv-agree em,
.tv-confirm-bar em {
    color: var(--tv-red);
    font-style: normal;
}

.tv-confirm-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--tv-dark);
    cursor: pointer;
    margin-bottom: 22px;
}

.tv-confirm-bar input {
    accent-color: var(--tv-violet);
    flex-shrink: 0;
}

.tv-form-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 991px) {
    .tv-option-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .tv-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-reg-head {
        flex-wrap: wrap;
    }

    .tv-head-note {
        white-space: normal;
    }

    .tv-choice-grid-2 {
        grid-template-columns: 1fr;
    }

    .tv-submit-bar,
    .tv-form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .tv-submit-bar .tv-reg-actions {
        flex-direction: column-reverse;
    }
}

/* ---------- Support request form ---------- */
.tv-tiles-sm .tv-tile {
    padding: 9px 4px;
}

.tv-tiles-sm .tv-tile strong {
    font-size: 12px;
}

.tv-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.tv-submit-row .tv-agree {
    max-width: 560px;
}

@media (max-width: 575px) {
    .tv-submit-row,
    .tv-submit-row .tv-reg-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* Offer cards open the booking popup */
button.tv-offer {
    width: 100%;
    border: 0;
    padding: 0;
    text-align: start;
    cursor: pointer;
    font-family: var(--tv-font);
}

.tv-offer:focus-visible {
    outline: 3px solid var(--tv-yellow);
    outline-offset: 2px;
}

.tv-offer::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tv-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s, transform .25s;
}

html[dir="rtl"] .tv-offer::after {
    content: "\F284";
}

.tv-offer:hover::after,
.tv-offer:focus-visible::after {
    opacity: 1;
    transform: none;
}

/* =========================================================
   Visa, Help & Contact, info pages, packages
   ========================================================= */
button.tv-dest {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    font-family: var(--tv-font);
}

.tv-note {
    font-size: 12px;
    color: var(--tv-muted);
}

/* Visa */
.tv-visa-card,
.tv-quick-link {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 12px;
    padding: 22px 20px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.tv-visa-card:hover,
.tv-quick-link:hover {
    border-color: #d8c7ea;
    box-shadow: 0 10px 26px rgba(43, 10, 61, .08);
    transform: translateY(-3px);
}

.tv-visa-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f3ebfa;
    color: #7e3fb0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.tv-visa-card h3 {
    font-size: 17px !important;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--tv-dark);
}

.tv-visa-card p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--tv-text);
    margin-bottom: 12px;
}

.tv-visa-card small {
    font-size: 11px;
    color: var(--tv-muted);
    margin-bottom: 14px;
}

.tv-visa-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-red);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.tv-visa-link:hover {
    color: var(--tv-red-dark);
}

.tv-visa-info {
    background: #eef4fd;
    padding: 70px 0;
}

.tv-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tv-steps li {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.tv-steps li > span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tv-purple);
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-steps strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--tv-dark);
}

.tv-steps p {
    font-size: 13px;
    color: var(--tv-text);
    margin: 4px 0 0;
}

.tv-visa-types {
    grid-template-columns: repeat(5, 1fr);
}

.tv-inline-choices {
    max-width: 420px;
}

/* Help & Contact */
.tv-quick-link {
    text-decoration: none;
}

.tv-quick-link strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--tv-dark);
    margin-bottom: 4px;
}

.tv-quick-link small {
    font-size: 12px;
    color: var(--tv-muted);
}

.tv-faq .accordion-item {
    border: 1px solid var(--tv-border);
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.tv-faq .accordion-header {
    font-size: 15px !important;
    margin: 0;
}

.tv-faq .accordion-button {
    font-family: var(--tv-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--tv-dark);
    padding: 16px 20px;
    box-shadow: none;
}

.tv-faq .accordion-button:not(.collapsed) {
    background: #fbf8fe;
    color: var(--tv-purple);
}

html[dir="rtl"] .tv-faq .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

.tv-faq .accordion-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--tv-text);
    padding: 4px 20px 18px;
}

.tv-contact-info {
    height: 100%;
    background: var(--tv-purple) !important;
    color: #fff;
    border: 0 !important;
}

.tv-contact-info h3 {
    font-size: 20px !important;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.tv-contact-info > p {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 26px;
}

.tv-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tv-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    margin-bottom: 18px;
}

.tv-contact-info li i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-contact-info li span,
.tv-contact-info li a {
    color: #fff;
    text-decoration: none;
    padding-top: 6px;
    word-break: break-word;
}

.tv-contact-info li a:hover {
    color: var(--tv-yellow);
}

.tv-subjects {
    grid-template-columns: repeat(5, 1fr);
}

/* Info pages */
.tv-info-page {
    max-width: 820px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.85;
    color: var(--tv-text);
}

.tv-info-page h2,
.tv-info-page h3 {
    font-size: 20px !important;
    font-weight: 600;
    color: var(--tv-dark);
    margin: 28px 0 12px;
}

.tv-info-page ul {
    padding-inline-start: 22px;
}

.tv-info-page li {
    margin-bottom: 8px;
}

.tv-info-help {
    max-width: 820px;
    margin: 40px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--tv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
}

/* Packages */
.tv-pkg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}

.tv-pkg-tabs {
    display: inline-flex;
    background: #f3f3f5;
    border-radius: 50px;
    padding: 4px;
}

.tv-pkg-tabs a {
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tv-text);
    text-decoration: none;
    white-space: nowrap;
}

.tv-pkg-tabs a.active {
    background: var(--tv-purple);
    color: #fff;
}

.tv-pkg-filter {
    display: flex;
    gap: 8px;
}

.tv-pkg-filter select,
.tv-pkg-filter input {
    border: 1px solid var(--tv-border);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    outline: 0;
    min-width: 0;
}

.tv-pkg-filter select:focus,
.tv-pkg-filter input:focus {
    border-color: var(--tv-purple);
}

@media (max-width: 991px) {
    .tv-visa-types,
    .tv-subjects {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .tv-visa-types,
    .tv-subjects {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-pkg-toolbar,
    .tv-pkg-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .tv-pkg-tabs {
        overflow-x: auto;
    }

    .tv-info-help {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================================
   User dashboard
   ========================================================= */
.tv-dash {
    background: #f8f8fa;
    padding: 40px 0 70px;
}

/* Account sidebar */
.tv-acc-nav {
    position: sticky;
    top: 96px;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 14px;
    padding: 18px;
}

.tv-acc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tv-border);
    min-width: 0;
}

.tv-acc-user > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tv-acc-user strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--tv-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-acc-user small {
    font-size: 11px;
    color: var(--tv-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-acc-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tv-purple), #7e3fb0);
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-acc-nav nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tv-acc-nav nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--tv-text);
    text-decoration: none;
    transition: background .2s, color .2s;
}

.tv-acc-nav nav a i {
    font-size: 16px;
}

.tv-acc-nav nav a:hover {
    background: #f6f1fb;
    color: var(--tv-purple);
}

.tv-acc-nav nav a.active {
    background: var(--tv-purple);
    color: #fff;
}

.tv-acc-nav nav a.tv-acc-logout {
    margin-top: 8px;
    border-top: 1px solid var(--tv-border);
    border-radius: 0 0 8px 8px;
    padding-top: 14px;
    color: var(--tv-red);
}

.tv-acc-nav nav a.tv-acc-logout:hover {
    background: #fdecec;
    color: var(--tv-red-dark);
}

/* Welcome banner */
.tv-dash-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(120deg, var(--tv-purple) 0%, #5a1a80 60%, #7e3fb0 100%);
    color: #fff;
    border-radius: 16px;
    padding: 30px 32px;
}

.tv-dash-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    top: -110px;
    inset-inline-end: -60px;
    pointer-events: none;
}

.tv-dash-hero > div {
    position: relative;
    z-index: 1;
}

.tv-dash-greeting {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.tv-dash-hero h1 {
    font-size: 28px !important;
    font-weight: 600;
    color: #fff;
    margin: 2px 0 8px;
}

.tv-dash-hero p {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 460px;
}

.tv-dash-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tv-btn-glass {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.tv-btn-glass:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Stat cards */
.tv-stat {
    height: 100%;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.tv-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.tv-stat strong {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--tv-dark);
    margin-bottom: 6px;
}

.tv-stat small {
    font-size: 12px;
    color: var(--tv-muted);
}

.tv-stat.is-purple .tv-stat-icon { background: #f3ebfa; color: #7e3fb0; }
.tv-stat.is-red .tv-stat-icon { background: #fdecec; color: var(--tv-red); }
.tv-stat.is-blue .tv-stat-icon { background: #e8eefc; color: #1a4ed8; }
.tv-stat.is-amber .tv-stat-icon { background: #fff4db; color: #c98a00; }

/* Cards */
.tv-dash-card {
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 20px;
}

.tv-dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.tv-dash-card-head h2 {
    font-size: 17px !important;
    font-weight: 600;
    margin: 0;
    color: var(--tv-dark);
}

.tv-dash-card-head small {
    font-size: 12px;
    color: var(--tv-muted);
}

/* Quick actions */
.tv-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.tv-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 16px 8px;
    border: 1px solid var(--tv-border);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tv-dark);
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

.tv-action span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f6f1fb;
    color: var(--tv-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background .2s, color .2s;
}

.tv-action:hover {
    border-color: #d8c7ea;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(43, 10, 61, .08);
    color: var(--tv-purple);
}

.tv-action:hover span {
    background: var(--tv-purple);
    color: #fff;
}

/* Requests list */
.tv-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tv-req-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tv-border);
}

.tv-req-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.tv-req-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f6f1fb;
    color: var(--tv-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tv-req-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tv-req-body strong {
    font-size: 14px;
    font-weight: 500;
    color: var(--tv-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-req-body small {
    font-size: 12px;
    color: var(--tv-muted);
}

.tv-req-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.tv-req-side small {
    font-size: 11px;
    color: var(--tv-muted);
}

.tv-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
}

.tv-status.is-pending { background: #fff4db; color: #a36f00; }
.tv-status.is-success { background: #e3f6ea; color: #1b7f43; }
.tv-status.is-danger { background: #fdecec; color: var(--tv-red); }

.tv-dash-empty {
    text-align: center;
    padding: 30px 10px 10px;
}

.tv-dash-empty > i {
    font-size: 36px;
    color: #cfc3dc;
}

.tv-dash-empty h3 {
    font-size: 16px !important;
    font-weight: 600;
    margin: 10px 0 6px;
}

.tv-dash-empty p {
    font-size: 13px;
    color: var(--tv-muted);
    max-width: 420px;
    margin: 0 auto 16px;
}

/* Help card */
.tv-dash-help {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tv-dash-help .tv-visa-icon {
    margin: 0;
}

.tv-dash-help > div:nth-child(2) {
    flex: 1;
    min-width: 220px;
}

.tv-dash-help h2 {
    font-size: 16px !important;
    font-weight: 600;
    margin: 0 0 4px;
}

.tv-dash-help p {
    font-size: 13px;
    color: var(--tv-muted);
    margin: 0;
}

.tv-dash-help-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .tv-actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .tv-acc-nav {
        position: static;
    }

    .tv-acc-nav nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tv-acc-nav nav a.tv-acc-logout {
        margin-top: 0;
        border-top: 0;
        padding-top: 10px;
        border-radius: 8px;
    }
}

@media (max-width: 575px) {
    .tv-dash-hero {
        padding: 24px 20px;
    }

    .tv-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-req-list li {
        flex-wrap: wrap;
    }

    .tv-req-side {
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding-inline-start: 54px;
    }
}

/* ---------- User profile ---------- */
img.tv-acc-avatar {
    object-fit: cover;
}

.tv-profile-head {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.tv-profile-avatar {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    background: linear-gradient(135deg, var(--tv-purple), #7e3fb0);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--tv-border);
}

.tv-profile-avatar input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.tv-profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.tv-profile-avatar #profileInitials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
}

.tv-profile-avatar-edit {
    position: absolute;
    bottom: 2px;
    inset-inline-end: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tv-red);
    color: #fff;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform .2s;
}

.tv-profile-avatar:hover .tv-profile-avatar-edit {
    transform: scale(1.1);
}

.tv-profile-info {
    flex: 1;
    min-width: 220px;
}

.tv-profile-info h1 {
    font-size: 22px !important;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tv-dark);
}

.tv-profile-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.tv-profile-info li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tv-text);
}

.tv-profile-info li i {
    color: var(--tv-purple);
}

.tv-dash .tv-reg {
    --tv-violet: #7e3fb0;
    --tv-violet-soft: #f3ebfa;
    --tv-field-bg: #f7f8fa;
}

.tv-dash .tv-reg-head {
    margin-bottom: 20px;
}

.tv-field input[disabled] {
    color: var(--tv-muted);
    cursor: not-allowed;
}

.tv-profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

@media (max-width: 575px) {
    .tv-profile-head {
        flex-direction: column;
        text-align: center;
    }

    .tv-profile-info ul {
        justify-content: center;
    }

    .tv-profile-actions {
        flex-direction: column-reverse;
    }
}

/* Form colour tokens (defined for .tv-reg) are also needed across the account area. */
.tv-dash,
.tv-booking-modal {
    --tv-violet: #7e3fb0;
    --tv-violet-soft: #f3ebfa;
    --tv-field-bg: #f7f8fa;
}

/* ---------- Account layout: menu always on the left, page on the right ---------- */
.tv-acc-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    direction: ltr;
}

/* Keep the column order fixed but let each column read in the page language. */
html[dir="rtl"] .tv-acc-layout > * {
    direction: rtl;
}

.tv-acc-main > .tv-dash-card:first-child,
.tv-acc-main > form > .tv-dash-card:first-child {
    margin-top: 0;
}

@media (max-width: 991px) {
    .tv-acc-layout {
        grid-template-columns: 1fr;
    }
}

/* Password */
.tv-password {
    position: relative;
}

.tv-password input {
    padding-inline-end: 44px !important;
}

.tv-password-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px 6px;
    color: var(--tv-muted);
    font-size: 16px;
}

.tv-password-toggle:hover {
    color: var(--tv-purple);
}

.tv-pw-rules {
    height: 100%;
    background: #fbf8fe;
    border: 1px solid #ece2f5;
    border-radius: 12px;
    padding: 18px 20px;
}

.tv-pw-rules strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-dark);
    margin-bottom: 12px;
}

.tv-pw-rules ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.tv-pw-rules li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tv-muted);
    margin-bottom: 10px;
    transition: color .2s;
}

.tv-pw-rules li.is-ok {
    color: #1b7f43;
}

.tv-pw-rules small {
    font-size: 11px;
    color: var(--tv-muted);
}

.tv-match {
    color: #1b7f43;
}

.tv-match.is-bad {
    color: var(--tv-red);
}

/* Support tickets */
.tv-req-link {
    text-decoration: none;
}

.tv-req-link:hover strong {
    color: var(--tv-purple);
}

.tv-status.is-info { background: #e8eefc; color: #1a4ed8; }
.tv-status.is-muted { background: #eef0f3; color: var(--tv-text); }

.tv-attach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tv-attach {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-attach input[type=file] {
    flex: 1;
    min-width: 0;
    background: var(--tv-field-bg);
    border: 1px dashed #d8d8d8;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
}

.tv-attach-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: #fdecec;
    color: var(--tv-red);
    flex-shrink: 0;
}

.tv-link-btn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--tv-purple);
    white-space: nowrap;
}

.tv-link-btn:hover {
    color: var(--tv-red);
}

.tv-ticket-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--tv-border);
}

.tv-ticket-head h2 {
    font-size: 18px !important;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--tv-dark);
}

.tv-ticket-head small {
    font-size: 12px;
    color: var(--tv-muted);
}

.tv-ticket-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tv-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tv-dark);
    text-decoration: none;
    flex-shrink: 0;
}

.tv-ticket-back:hover {
    border-color: var(--tv-purple);
    color: var(--tv-purple);
}

.tv-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tv-msg {
    max-width: 82%;
    border-radius: 14px;
    padding: 14px 16px;
}

.tv-msg.is-mine {
    align-self: flex-start;
    background: #f6f1fb;
    border-start-start-radius: 4px;
}

.tv-msg.is-team {
    align-self: flex-end;
    background: #eef4fd;
    border-start-end-radius: 4px;
}

.tv-msg-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.tv-msg-meta strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-dark);
}

.tv-msg-meta small {
    font-size: 11px;
    color: var(--tv-muted);
    white-space: nowrap;
}

.tv-msg-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--tv-text);
    word-break: break-word;
}

.tv-msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
}

.tv-msg-files a {
    font-size: 12px;
    font-weight: 500;
    color: var(--tv-purple);
    text-decoration: none;
}

@media (max-width: 575px) {
    .tv-msg {
        max-width: 100%;
    }
}

/* ---------- Sticky header ----------
   custom.css puts overflow-x: hidden on html AND body, which turns body into its own
   scroll container and silently disables position: sticky. "clip" still stops sideways
   scrolling but does not create a scroll container, so the header can stick again. */
html,
body {
    overflow-x: clip !important;
}

.tv-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: box-shadow .25s ease;
}

.tv-nav.is-scrolled {
    box-shadow: 0 6px 20px rgba(20, 10, 40, .08);
    border-bottom-color: transparent;
}