/* ==========================================================================
   The Vegas Vacation — home page layout
   thevegasvacation.com

   Every rule is namespaced under .tvv / .tvv-* so it cannot affect the
   header, top bar, navigation, banner slider, footer or any other page.

   Upload to: /css/tvv_home.css
   ========================================================================== */

/* -------------------------------------------------------------------------
   .tvv  —  The Vegas Vacation home page
   Everything is namespaced so it cannot leak into the header, footer,
   navigation, banner slider or any other page.
   ------------------------------------------------------------------------- */

.tvv {
    --night: #12123a;
    --night-2: #1b1b52;
    --violet: #2f2f7d;
    --violet-2: #494995;
    --line: rgba(255, 255, 255, .14);
    --line-2: rgba(255, 255, 255, .08);
    --ink: #ffffff;
    --muted: #c3c4e8;
    --muted-2: #9c9ed2;
    --gold: #ff9a27;
    --gold-2: #ffc46b;
    --red: #e90000;
    --panel: rgba(255, 255, 255, .05);
    --panel-2: rgba(255, 255, 255, .08);

    position: relative;
    display: block;
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0;
    background: var(--night);
    color: var(--ink);
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

.tvv *,
.tvv *::before,
.tvv *::after {
    box-sizing: border-box;
}

/* Keep banner float from collapsing the home content beside Prev/Next links.
   Live may still have slider namespace "rslides" until Layout is republished —
   cover both class names so banners always scale to viewport width. */
.banner_part {
    clear: both;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.banner_part .callbacks_container {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
}
.banner_part .callbacks,
.banner_part .rslides {
    width: 100%;
    max-width: 100%;
}
.banner_part .callbacks img,
.banner_part .rslides img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: none;
}
.rslides_nav,
.callbacks_nav {
    position: absolute !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 40px;
    height: 40px;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

/* the live page paints a violet wash over this section — remove it here */
.tvv .color_overlay_violet,
.tvv .color_overlay_red { display: none !important; }

/* scoped reset: the site stylesheet styles bare tags very aggressively */
.tvv h1, .tvv h2, .tvv h3, .tvv h4, .tvv h5,
.tvv p, .tvv li, .tvv span, .tvv strong, .tvv em, .tvv a {
    position: static;
    float: none;
    text-align: left;
    text-transform: none;
    background: none;
    font-family: inherit;
    letter-spacing: normal;
    text-shadow: none;
    margin: 0;
    padding: 0;
    line-height: 1.55;
}
.tvv ul, .tvv ol { margin: 0; padding: 0; list-style: none; }
.tvv img { max-width: 100%; height: auto; }
.tvv br { display: none; }

/* the site runs $('h2').textEffect('slide'), which splits every h2 into
   per-letter spans parked ~900px to the right and blows out the page width.
   Pin them back inside this block only. */
.tvv h2 .text-effect,
.tvv h3 .text-effect,
.tvv h1 .text-effect {
    position: static !important;
    left: auto !important;
    top: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
}

.tvv .tvv-wrap {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    min-width: 0;
}

/* ---------------------------------------------------------------- glow bg */
.tvv::before,
.tvv::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.tvv::before {
    width: 1100px; height: 1100px;
    top: -560px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(73, 73, 149, .95) 0%, rgba(47, 47, 125, .55) 42%, rgba(18, 18, 58, 0) 70%);
}
.tvv::after {
    width: 900px; height: 900px;
    bottom: -520px; right: -260px;
    background: radial-gradient(circle, rgba(255, 154, 39, .17) 0%, rgba(255, 154, 39, 0) 68%);
}

/* -------------------------------------------------------------------- hero */
.tvv-hero { padding: 74px 0 66px; text-align: center; }

.tvv .tvv-eyebrow {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 8px 18px;
    border: 1px solid rgba(255, 154, 39, .42);
    border-radius: 999px;
    background: rgba(255, 154, 39, .08);
    line-height: 1.2;
    margin-bottom: 26px;
    white-space: normal;
    box-sizing: border-box;
}
.tvv .tvv-eyebrow .tvv-eyebrow__dot {
    color: rgba(255, 154, 39, .55);
    padding: 0 4px;
    letter-spacing: 0;
}

.tvv h1.tvv-value {
    font-family: "Dancing Script", "Brush Script MT", cursive;
    font-weight: 700;
    font-size: 108px;
    line-height: .98;
    text-align: center;
    color: var(--gold);
    margin: 0 0 6px;
    text-shadow: 0 0 34px rgba(255, 154, 39, .5), 0 0 78px rgba(255, 154, 39, .22);
}
.tvv h1.tvv-value .tvv-value__sm { display: block; text-align: center; font-size: 84px; margin-top: -6px; }

.tvv p.tvv-kicker {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 18px 0 0;
}

/* hero stats */
.tvv-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 42px 0 0;
    list-style: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.tvv .tvv-fact {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
}
.tvv .tvv-fact__v {
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -.01em;
}
.tvv .tvv-fact__k {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-top: 8px;
    line-height: 1.5;
}

/* hero buttons */
.tvv-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 38px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tvv .tvv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    max-width: 100%;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    line-height: 1;
}
.tvv .tvv-btn--buy {
    background: var(--red);
    color: #fff;
    box-shadow: 0 14px 34px rgba(233, 0, 0, .38);
}
.tvv .tvv-btn--buy:hover { background: #ff1a1a; transform: translateY(-2px); color: #fff; text-decoration: none; }
.tvv .tvv-btn--ghost { background: rgba(255, 255, 255, .06); border-color: var(--line); color: #fff; }
.tvv .tvv-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transform: translateY(-2px); }
.tvv .tvv-btn--tel { color: var(--gold-2); background: none; border-color: rgba(255, 154, 39, .4); }
.tvv .tvv-btn--tel:hover { background: rgba(255, 154, 39, .12); color: var(--gold-2); text-decoration: none; }

/* ------------------------------------------------------------- section head */
.tvv-sec { padding: 0 0 22px; }
.tvv-sec--pad { padding-top: 62px; }

.tvv .tvv-rule {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
    margin: 0 0 34px;
    border: 0;
}
.tvv h2.tvv-h2 {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    text-align: left;
    margin: 0;
}
.tvv p.tvv-sub {
    font-size: 15px;
    color: var(--muted-2);
    margin: 10px 0 0;
    max-width: 70ch;
}

/* ---------------------------------------------------------------- inclusions */
.tvv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 34px;
}

.tvv .tvv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px 30px 28px;
    overflow: hidden;
}
.tvv .tvv-card--wide { grid-column: 1 / -1; }
.tvv .tvv-card--wide::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), rgba(255, 154, 39, 0));
}

.tvv .tvv-card__no {
    position: absolute;
    top: 22px; right: 26px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .22);
}

.tvv h3.tvv-card__t {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 90px 0 0;
    text-align: left;
}
.tvv p.tvv-card__note {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 7px 0 0;
}

.tvv .tvv-tag {
    display: inline-block;
    align-self: flex-start;
    margin: 16px 0 0;
    padding: 7px 15px;
    border-radius: 8px;
    background: rgba(255, 154, 39, .13);
    border: 1px solid rgba(255, 154, 39, .42);
    color: var(--gold-2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
}
.tvv .tvv-tag--script {
    font-family: "Dancing Script", cursive;
    font-size: 26px;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 18px 8px;
}

.tvv p.tvv-card__p {
    font-size: 15px;
    line-height: 1.72;
    color: var(--muted);
    margin: 18px 0 0;
    max-width: 82ch;
}
.tvv .tvv-card--wide p.tvv-card__p { font-size: 16px; }
.tvv p.tvv-card__p a { color: var(--gold-2); text-decoration: underline; }
.tvv .tvv-card__foot { margin-top: auto; padding-top: 20px; }

/* read-more toggle (keeps the site's bootstrap collapse behaviour) */
.tvv .tvv-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line);
    color: #fff !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    align-self: flex-start;
}
.tvv .tvv-more:hover { background: rgba(255, 255, 255, .14); }
.tvv .tvv-more::after { content: "+"; font-size: 15px; line-height: 1; margin-top: -1px; }
.tvv .tvv-more[aria-expanded="true"]::after { content: "\2212"; }

.tvv .tvv-drop { margin-top: 6px; }
/* works whether the site is on Bootstrap 3 (.in) or Bootstrap 4/5 (.show) */
.tvv .tvv-drop.in, .tvv .tvv-drop.show { display: block; }
.tvv .tvv-drop .tvv-drop__in {
    margin-top: 18px;
    padding: 24px 26px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .26);
    border: 1px solid var(--line-2);
}
.tvv .tvv-drop p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0 0 14px;
}
.tvv .tvv-drop p:last-child { margin-bottom: 0; }
.tvv .tvv-drop h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 22px 0 12px;
}
.tvv .tvv-drop a { color: var(--gold-2); text-decoration: underline; }

/* resort list */
.tvv .tvv-resorts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.tvv .tvv-resorts li {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-2);
    border-radius: 11px;
    padding: 13px 15px;
    line-height: 1.4;
}
.tvv .tvv-resorts a {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.tvv .tvv-resorts a:hover { color: var(--gold-2); }
.tvv .tvv-resorts .tvv-resorts__u {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-2);
    margin-top: 4px;
    word-break: break-all;
}

/* ------------------------------------------------------------------ tally */
.tvv-tally {
    margin-top: 26px;
    border: 1px solid rgba(255, 154, 39, .32);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 154, 39, .12), rgba(255, 154, 39, .03));
    padding: 30px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    align-items: center;
}
.tvv .tvv-tally__list { display: block; }
.tvv .tvv-tally__list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .13);
}
.tvv .tvv-tally__list li:last-child { border-bottom: 0; }
.tvv .tvv-tally__n {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.tvv .tvv-tally__d { flex: 1 1 auto; border-bottom: 1px dotted rgba(255, 255, 255, .2); }
.tvv .tvv-tally__v { font-size: 14px; font-weight: 800; color: var(--gold-2); }
.tvv .tvv-tally__sum { text-align: center; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .14); }
.tvv .tvv-tally__sum-k {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
}
.tvv .tvv-tally__sum-v {
    display: block;
    text-align: center;
    font-family: "Dancing Script", cursive;
    font-size: 62px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold);
    text-shadow: 0 0 26px rgba(255, 154, 39, .4);
}

/* ------------------------------------------------------------------ offer */
.tvv-offer {
    margin-top: 58px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
    border: 1px solid var(--line);
}
.tvv-offer .offer-box { margin: 0 auto; max-width: 380px; }
.tvv h2.tvv-offer__t {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin: 0;
}
.tvv p.tvv-offer__p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 16px 0 0;
    max-width: 46ch;
}
.tvv .tvv-offer__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.tvv-foot-note {
    margin: 34px 0 0;
    padding: 0 0 70px;
}
.tvv p.tvv-note {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    margin: 0 auto;
    max-width: 76ch;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
    .tvv h1.tvv-value { font-size: 92px; }
    .tvv h1.tvv-value .tvv-value__sm { font-size: 72px; }
    .tvv-offer { grid-template-columns: 320px 1fr; gap: 30px; padding: 32px; }
}

@media (max-width: 991px) {
    .tvv-hero { padding: 56px 0 50px; }
    .tvv h1.tvv-value { font-size: 74px; }
    .tvv h1.tvv-value .tvv-value__sm { font-size: 58px; }
    .tvv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tvv-grid { grid-template-columns: minmax(0, 1fr); }
    .tvv .tvv-resorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tvv-offer { grid-template-columns: minmax(0, 1fr); }
    .tvv-offer .offer-box { max-width: 340px; width: 100%; }
    .tvv-tally { grid-template-columns: minmax(0, 1fr); }
    .tvv .tvv-tally__sum { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}

@media (max-width: 767px) {
    .tvv .tvv-wrap { padding: 0 16px; }
    .tvv-hero { padding: 44px 0 40px; max-width: 100%; }
    .tvv .tvv-eyebrow {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 12px;
        font-size: 10px;
        letter-spacing: .1em;
        line-height: 1.35;
        white-space: normal;
    }
    .tvv h1.tvv-value {
        font-size: clamp(36px, 11vw, 52px);
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .tvv h1.tvv-value .tvv-value__sm { font-size: clamp(30px, 9vw, 42px); }
    .tvv p.tvv-kicker { font-size: 12px; letter-spacing: .1em; max-width: 100%; }
    .tvv .tvv-fact { padding: 16px 10px; min-width: 0; }
    .tvv .tvv-fact__v { font-size: 22px; overflow-wrap: anywhere; }
    .tvv .tvv-fact__k { font-size: 10px; letter-spacing: .08em; }
    .tvv-actions { flex-direction: column; align-items: stretch; }
    .tvv .tvv-btn {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 52px;
        padding: 14px 16px;
        letter-spacing: .08em;
        white-space: normal;
        text-align: center;
    }
    .tvv h2.tvv-h2 { font-size: 24px; }
    .tvv .tvv-card { padding: 24px 20px; border-radius: 16px; min-width: 0; }
    .tvv h3.tvv-card__t { font-size: 17px; margin-right: 0; }
    .tvv .tvv-card__no { display: none; }
    .tvv .tvv-resorts { grid-template-columns: minmax(0, 1fr); }
    .tvv .tvv-drop .tvv-drop__in { padding: 18px 16px; }
    .tvv-tally { padding: 24px 20px; max-width: 100%; min-width: 0; }
    .tvv .tvv-tally__list li { flex-wrap: nowrap; gap: 14px; min-width: 0; }
    .tvv .tvv-tally__d { display: none; }
    .tvv .tvv-tally__n { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.45; }
    .tvv .tvv-tally__v { flex: 0 0 auto; }
    .tvv .tvv-tally__sum-v { font-size: 48px; }
    .tvv-offer { padding: 22px 16px; gap: 24px; max-width: 100%; min-width: 0; }
    .tvv-offer .offer-box { max-width: 100%; }
    .tvv h2.tvv-offer__t { font-size: 26px; }
    .tvv .tvv-offer__acts { flex-direction: column; }
    .tvv .tvv-offer__acts .tvv-btn { width: 100%; }
    .tvv-foot-note { padding-bottom: 50px; }
}

@media (max-width: 420px) {
    .tvv-facts { gap: 10px; }
    .tvv .tvv-fact { padding: 14px 8px; }
    .tvv .tvv-fact__v { font-size: 18px; }
    .tvv .tvv-fact__k { font-size: 9px; letter-spacing: .06em; }
}