/* ==========================================================================
   One day tour package (.bt-day)
   ==========================================================================
   application/views/home/package_day.php, e.g. /kodaikanal-one-day-tour-package.

   Ported from its reference design (play.tailwindcss.com/JW2HPJHWpf) value for
   value: its teal and amber, DM Sans for text, Playfair for headings, its px
   sizes and its 1050 / 800 / 520 breakpoints. The reference's class names
   (.btn, .container, .breadcrumb, .section...) are Bootstrap's too, so every
   class here carries a dt- prefix and every rule sits under .bt-day - nothing
   outside <main class="bt-day">, the site header and footer included, changes.

   One deliberate difference, the same one the /accommodation page makes: the
   reference prints small amber text in #dc8724, 2.7:1 on white. --dt-clay is
   the nearest amber that reads at 4.5:1; the bright amber stays for fills.
   ========================================================================== */

.bt-day {
    --dt-primary: #124e5a;
    --dt-primary-dark: #0d3c45;
    --dt-accent: #f4a340;
    --dt-accent-dark: #dc8724;
    --dt-clay: #a85c14;
    --dt-cream: #fcfaf6;
    --dt-soft: #f2f7f6;
    --dt-text: #1c3033;
    --dt-muted: #66777a;
    --dt-border: #dce7e5;
    --dt-shadow: 0 18px 45px rgba(20, 61, 66, .1);
    --dt-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    /* Height of the site header, which sits over the top of the hero. */
    --dt-head: 85px;

    color: var(--dt-text);
    background: var(--dt-cream);
    font-family: 'DM Sans', 'Rubik', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

@media (min-width: 1200px) {
    .bt-day {
        --dt-head: 94px;
    }
}

/* ---- Resets against Bootstrap and theme.css ------------------------------ */

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

.bt-day h1,
.bt-day h2,
.bt-day h3,
.bt-day p,
.bt-day ul,
.bt-day label,
.bt-day table {
    margin: 0;
    padding: 0;
}

.bt-day h1,
.bt-day h2,
.bt-day h3 {
    font-weight: 700;
    line-height: 1.2;
}

/* theme.css sets paragraphs at 1.7 and Bootstrap draws <strong> as
   "bolder", which lands on 500 under the theme's weights. */
.bt-day p,
.bt-day li {
    line-height: 1.6;
}

.bt-day strong {
    font-weight: 700;
}

.bt-day img {
    display: block;
    width: 100%;
    max-width: none;
    object-fit: cover;
}

.bt-day a {
    color: inherit;
    text-decoration: none;
}

.bt-day button,
.bt-day input,
.bt-day select {
    font: inherit;
}

/* ---- Layout -------------------------------------------------------------- */

.bt-day .dt-wrap {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.bt-day .dt-section {
    padding: 90px 0;
}

.bt-day .dt-section--soft {
    background: var(--dt-soft);
}

.bt-day .dt-split {
    display: grid;
    align-items: start;
}

.bt-day .dt-split--itinerary {
    grid-template-columns: .75fr 1.25fr;
    gap: 85px;
}

.bt-day .dt-split--pricing {
    grid-template-columns: .75fr 1.25fr;
    align-items: center;
    gap: 80px;
}

.bt-day .dt-split--why {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 78px;
}

.bt-day .dt-split--pickup {
    grid-template-columns: .65fr 1.35fr;
    align-items: center;
    gap: 80px;
}

.bt-day .dt-split--faq {
    grid-template-columns: .75fr 1.25fr;
    gap: 95px;
}

/* ---- Type ---------------------------------------------------------------- */

.bt-day .dt-h2 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -1px;
}

.bt-day .dt-eyebrow {
    margin-bottom: 11px;
    color: var(--dt-clay);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.6;
}

.bt-day .dt-eyebrow--light {
    color: #f8c47c;
}

.bt-day .dt-lede {
    margin-top: 17px;
    color: var(--dt-muted);
    font-size: 14px;
}

.bt-day .dt-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.bt-day .dt-head__desc {
    max-width: 590px;
    margin-top: 12px;
    color: var(--dt-muted);
    font-size: 14px;
}

.bt-day .dt-center {
    max-width: 690px;
    margin: 0 auto 45px;
    text-align: center;
}

.bt-day .dt-center > p:last-child {
    margin-top: 13px;
    color: var(--dt-muted);
    font-size: 14px;
}

.bt-day .dt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dt-primary);
    font-size: 12px;
    font-weight: 700;
}

.bt-day .dt-link span {
    color: var(--dt-clay);
}

.bt-day .dt-link:hover {
    color: var(--dt-primary-dark);
}

/* ---- Buttons ------------------------------------------------------------- */

.bt-day .dt-btn {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 23px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
    transition: all .25s ease;
}

.bt-day .dt-btn--accent {
    color: #273b3d;
    background: var(--dt-accent);
}

.bt-day .dt-btn--accent:hover,
.bt-day .dt-btn--accent:focus {
    color: #fff;
    background: var(--dt-accent-dark);
    transform: translateY(-2px);
}

.bt-day .dt-btn--dark {
    color: #fff;
    background: var(--dt-primary);
}

.bt-day .dt-btn--dark:hover,
.bt-day .dt-btn--dark:focus {
    color: #fff;
    background: var(--dt-primary-dark);
    transform: translateY(-2px);
}

.bt-day .dt-btn--white {
    color: var(--dt-primary);
    background: #fff;
}

.bt-day .dt-btn--white:hover,
.bt-day .dt-btn--white:focus {
    color: var(--dt-primary);
    background: #eef5f4;
    transform: translateY(-2px);
}

/* ---- 1. Hero ------------------------------------------------------------- */

/* The reference hero starts under its navigation; here the site header sits
   over the hero's top edge, so its height is added to the padding and to the
   minimum height to leave the same space between header and copy. */
.bt-day .dt-hero {
    position: relative;
    display: flex;
    min-height: calc(605px + var(--dt-head));
    align-items: center;
    overflow: hidden;
    background: var(--dt-primary-dark);
}

.bt-day .dt-hero__img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.bt-day .dt-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 45, 52, .94) 0%, rgba(9, 61, 69, .75) 49%, rgba(9, 61, 69, .18) 100%);
}

.bt-day .dt-hero__content {
    position: relative;
    z-index: 1;
    padding: calc(72px + var(--dt-head)) 0 72px;
}

.bt-day .dt-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

.bt-day .dt-crumb a:hover {
    color: #fff;
}

.bt-day .dt-crumb strong {
    color: #f8c47c;
    font-weight: 700;
}

.bt-day .dt-hero__tag {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 6px 11px;
    border: 1px solid rgba(248, 196, 124, .45);
    border-radius: 4px;
    color: #f8c47c;
    background: rgba(248, 196, 124, .12);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.bt-day .dt-hero__title {
    max-width: 730px;
    color: #fff;
    font-family: var(--dt-serif);
    font-size: clamp(42px, 5vw, 66px);
    letter-spacing: -1.8px;
}

.bt-day .dt-hero__desc {
    max-width: 585px;
    margin-top: 17px;
    color: rgba(255, 255, 255, .84);
    font-size: 16px;
}

.bt-day .dt-hero__details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 23px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
}

.bt-day .dt-hero__price {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 34px;
}

.bt-day .dt-hero__price > div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 7px;
}

.bt-day .dt-hero__price span {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
}

.bt-day .dt-hero__price strong {
    color: #fff;
    font-family: var(--dt-serif);
    font-size: 36px;
    line-height: 1.15;
}

.bt-day .dt-hero__price small {
    padding-bottom: 4px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
}

/* ---- 2. Booking ---------------------------------------------------------- */

.bt-day .dt-booking {
    padding: 46px 0;
    background: var(--dt-primary);
}

.bt-day .dt-booking__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
}

.bt-day .dt-booking__top .dt-eyebrow {
    color: #f8c47c;
}

.bt-day .dt-booking__top .dt-h2 {
    color: #fff;
}

.bt-day .dt-booking__top > p {
    max-width: 420px;
    color: rgba(255, 255, 255, .73);
    font-size: 13px;
}

.bt-day .dt-form {
    display: grid;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--dt-shadow);
}

.bt-day .dt-form__row {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr 1fr auto;
    align-items: end;
    gap: 12px;
}

.bt-day .dt-form--novehicle .dt-form__trip,
.bt-day .dt-form__contact {
    grid-template-columns: 1fr 1.25fr 1fr auto;
}

.bt-day .dt-field label {
    display: block;
    margin: 0 0 6px 5px;
    color: #5d6c6e;
    font-size: 10px;
    font-weight: 700;
}

.bt-day .dt-field input,
.bt-day .dt-field select {
    width: 100%;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--dt-border);
    border-radius: 7px;
    outline: 0;
    color: var(--dt-text);
    background: #fff;
    font-size: 11px;
}

.bt-day .dt-field input:focus,
.bt-day .dt-field select:focus {
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 3px rgba(18, 78, 90, .12);
}

.bt-day .dt-form__check {
    min-height: 44px;
    padding: 0 17px;
    white-space: nowrap;
}

.bt-day .dt-booking__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 25px;
    margin-top: 17px;
    color: rgba(255, 255, 255, .75);
    font-size: 11px;
}

/* ---- 3. Highlights ------------------------------------------------------- */

.bt-day .dt-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.bt-day .dt-highlight {
    padding: 25px 19px;
    border: 1px solid var(--dt-border);
    border-radius: 14px;
    background: #fff;
    transition: all .25s ease;
}

.bt-day .dt-highlight:hover {
    border-color: #e4b469;
    box-shadow: var(--dt-shadow);
    transform: translateY(-4px);
}

.bt-day .dt-highlight__icon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 11px;
    color: var(--dt-primary);
    background: #e4efed;
    font-size: 22px;
}

.bt-day .dt-highlight h3 {
    margin-top: 17px;
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 19px;
}

.bt-day .dt-highlight p {
    margin-top: 8px;
    color: var(--dt-muted);
    font-size: 12px;
}

/* ---- Callouts (itinerary note, price note, notice bar) -------------------- */

.bt-day .dt-callout {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    padding: 14px;
    border-radius: 9px;
}

.bt-day .dt-callout > span {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.bt-day .dt-callout p {
    font-size: 11px;
    line-height: 1.55;
}

.bt-day .dt-callout--amber {
    border: 1px solid #e7d6b5;
    background: #fff9ec;
}

.bt-day .dt-callout--amber > span {
    color: #a86b1d;
    background: #f7d396;
}

.bt-day .dt-callout--amber p {
    color: #6f5d44;
}

.bt-day .dt-callout--green {
    margin-top: 24px;
    background: #edf7ec;
}

.bt-day .dt-callout--green > span {
    color: #fff;
    background: #5d9d69;
    font-size: 11px;
}

.bt-day .dt-callout--green p {
    color: #4a6751;
}

/* ---- 4. Itinerary -------------------------------------------------------- */

.bt-day .dt-timeline__item {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 19px;
    min-height: 115px;
}

.bt-day .dt-timeline__time {
    color: var(--dt-clay);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-align: right;
}

.bt-day .dt-timeline__detail {
    position: relative;
    padding: 0 0 31px 27px;
    border-left: 1px solid #cddbd8;
}

.bt-day .dt-timeline__item:last-child .dt-timeline__detail {
    padding-bottom: 0;
}

.bt-day .dt-timeline__dot {
    position: absolute;
    top: 2px;
    left: -6px;
    width: 11px;
    height: 11px;
    border: 3px solid #f9ebd2;
    border-radius: 50%;
    background: var(--dt-accent);
}

.bt-day .dt-timeline__detail h3 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 20px;
}

.bt-day .dt-timeline__detail p {
    margin-top: 8px;
    color: var(--dt-muted);
    font-size: 12px;
}

.bt-day .dt-timeline__detail p + p {
    margin-top: 4px;
}

.bt-day .dt-prose {
    color: var(--dt-muted);
    font-size: 14px;
}

.bt-day .dt-prose p,
.bt-day .dt-prose ul {
    margin-bottom: 12px;
}

.bt-day .dt-prose ul {
    padding-left: 18px;
}

/* ---- 5. Included / not included ------------------------------------------ */

.bt-day .dt-inclusions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.bt-day .dt-inclusions--single {
    grid-template-columns: minmax(0, 570px);
    justify-content: center;
}

.bt-day .dt-inclusion {
    padding: 28px;
    border-radius: 15px;
    background: #fff;
}

.bt-day .dt-inclusion--in {
    border: 1px solid #cfe3d9;
}

.bt-day .dt-inclusion--out {
    border: 1px solid #efd6d3;
}

.bt-day .dt-inclusion__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dt-border);
}

.bt-day .dt-inclusion__head > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.bt-day .dt-inclusion--in .dt-inclusion__head > span {
    background: #5d9d69;
}

.bt-day .dt-inclusion--out .dt-inclusion__head > span {
    background: #ba6a62;
}

.bt-day .dt-inclusion__head h3 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 22px;
}

.bt-day .dt-inclusion ul {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    list-style: none;
}

.bt-day .dt-inclusion li {
    position: relative;
    padding-left: 23px;
    color: var(--dt-muted);
    font-size: 12px;
}

.bt-day .dt-inclusion li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.bt-day .dt-inclusion--in li::before {
    color: #5d9d69;
    content: "\2713";
}

.bt-day .dt-inclusion--out li::before {
    color: #ba6a62;
    content: "\00d7";
    font-size: 15px;
    line-height: 1.2;
}

/* ---- 6. Vehicles --------------------------------------------------------- */

.bt-day .dt-vehicles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bt-day .dt-vehicle {
    overflow: hidden;
    border: 1px solid var(--dt-border);
    border-radius: 15px;
    background: #fff;
    transition: all .25s ease;
}

.bt-day .dt-vehicle:hover {
    border-color: #e3b265;
    box-shadow: var(--dt-shadow);
    transform: translateY(-4px);
}

.bt-day .dt-vehicle__img {
    position: relative;
    height: 185px;
    overflow: hidden;
}

.bt-day .dt-vehicle__img img {
    height: 100%;
    transition: transform .4s ease;
}

.bt-day .dt-vehicle:hover .dt-vehicle__img img {
    transform: scale(1.06);
}

.bt-day .dt-vehicle__tag {
    position: absolute;
    top: 13px;
    left: 13px;
    padding: 5px 9px;
    border-radius: 4px;
    color: var(--dt-primary);
    background: #f7ce8f;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
}

.bt-day .dt-vehicle__body {
    padding: 19px;
}

.bt-day .dt-vehicle__body h3 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 22px;
}

.bt-day .dt-vehicle__body > p {
    margin-top: 7px;
    color: var(--dt-muted);
    font-size: 12px;
}

.bt-day .dt-vehicle__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: 14px;
    color: #5a6d70;
    font-size: 10px;
}

.bt-day .dt-vehicle__price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 19px;
    padding-top: 14px;
    border-top: 1px solid var(--dt-border);
}

.bt-day .dt-vehicle__price small,
.bt-day .dt-vehicle__price strong {
    display: block;
}

.bt-day .dt-vehicle__price small {
    color: var(--dt-muted);
    font-size: 9px;
}

.bt-day .dt-vehicle__price strong {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 24px;
}

.bt-day .dt-vehicle__price a {
    color: var(--dt-clay);
    font-size: 11px;
    font-weight: 700;
}

/* ---- 7. Pricing ---------------------------------------------------------- */

/* relative: the header cell's .sr-only label is absolutely positioned, and
   without a positioned ancestor here it escapes the scroller and widens the
   whole page on a phone. */
.bt-day .dt-pricing {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--dt-border);
    border-radius: 13px;
    background: #fff;
}

.bt-day .dt-pricing table {
    width: 100%;
    min-width: 550px;
    border-collapse: collapse;
}

.bt-day .dt-pricing th,
.bt-day .dt-pricing td {
    padding: 17px;
    border-bottom: 1px solid var(--dt-border);
    text-align: left;
    vertical-align: middle;
}

.bt-day .dt-pricing th {
    color: var(--dt-primary);
    background: #edf5f3;
    font-size: 11px;
    font-weight: 700;
}

.bt-day .dt-pricing td {
    color: var(--dt-muted);
    font-size: 11px;
}

.bt-day .dt-pricing tbody tr:last-child td {
    border-bottom: 0;
}

.bt-day .dt-pricing td strong {
    display: block;
    color: var(--dt-primary);
    font-size: 12px;
}

.bt-day .dt-pricing td small {
    display: block;
    margin-top: 3px;
    color: #7b8b8d;
    font-size: 9px;
}

.bt-day .dt-pricing td a {
    color: var(--dt-clay);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- 8. Why choose ------------------------------------------------------- */

.bt-day .dt-why__img {
    position: relative;
    padding-right: 25px;
    padding-bottom: 25px;
}

.bt-day .dt-why__img::after {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 80%;
    height: 80%;
    border-radius: 16px;
    background: #e2b775;
    content: "";
}

.bt-day .dt-why__img img {
    position: relative;
    z-index: 1;
    height: 500px;
    border-radius: 16px;
}

.bt-day .dt-why__badge {
    position: absolute;
    right: 0;
    bottom: 40px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    border-radius: 8px;
    color: #fff;
    background: var(--dt-primary);
    box-shadow: var(--dt-shadow);
}

.bt-day .dt-why__badge strong {
    font-family: var(--dt-serif);
    font-size: 25px;
    line-height: 1.6;
}

.bt-day .dt-why__badge span {
    font-size: 10px;
    line-height: 1.35;
}

.bt-day .dt-why__desc {
    margin: 17px 0 26px;
    color: var(--dt-muted);
    font-size: 14px;
}

.bt-day .dt-why__points {
    display: grid;
    gap: 18px;
    margin-bottom: 29px;
}

.bt-day .dt-why__point {
    display: flex;
    gap: 12px;
}

.bt-day .dt-why__point > span {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: var(--dt-primary);
    background: #dfecea;
    font-size: 12px;
    font-weight: 700;
}

.bt-day .dt-why__point h3 {
    color: var(--dt-primary);
    font-size: 13px;
}

.bt-day .dt-why__point p {
    margin-top: 3px;
    color: var(--dt-muted);
    font-size: 12px;
}

/* ---- 9. Steps ------------------------------------------------------------ */

.bt-day .dt-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
}

.bt-day .dt-step {
    position: relative;
    text-align: center;
}

.bt-day .dt-step__num {
    position: absolute;
    top: 0;
    left: 50%;
    color: rgba(18, 78, 90, .09);
    font-family: var(--dt-serif);
    font-size: 65px;
    font-weight: 400;
    line-height: 1;
    transform: translateX(-50%);
}

.bt-day .dt-step__icon {
    position: relative;
    display: grid;
    width: 61px;
    height: 61px;
    margin: 13px auto 21px;
    place-items: center;
    border-radius: 50%;
    color: var(--dt-primary);
    background: #deece9;
    font-size: 23px;
}

.bt-day .dt-step h3 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 19px;
}

.bt-day .dt-step p {
    max-width: 210px;
    margin: 8px auto 0;
    color: var(--dt-muted);
    font-size: 12px;
}

/* ---- 10. Pickup and drop ------------------------------------------------- */

.bt-day .dt-pickups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bt-day .dt-pickup {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 23px 17px;
    border: 1px solid var(--dt-border);
    border-radius: 13px;
    background: #fff;
}

.bt-day .dt-pickup__icon {
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 10px;
    color: var(--dt-primary);
    background: #e3efed;
    font-size: 21px;
}

.bt-day .dt-pickup h3 {
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 19px;
}

.bt-day .dt-pickup ul {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    list-style: none;
}

.bt-day .dt-pickup li {
    position: relative;
    padding-left: 14px;
    color: var(--dt-muted);
    font-size: 11px;
}

.bt-day .dt-pickup li::before {
    position: absolute;
    left: 0;
    color: var(--dt-accent-dark);
    content: "\2022";
}

/* ---- 11. Things to know -------------------------------------------------- */

.bt-day .dt-important__head {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    max-width: 780px;
    margin-bottom: 33px;
}

.bt-day .dt-important__mark {
    display: grid;
    flex: 0 0 47px;
    width: 47px;
    height: 47px;
    place-items: center;
    border: 1px solid #eac482;
    border-radius: 50%;
    color: #b66f1b;
    background: #fff3dc;
    font-size: 24px;
    font-weight: 700;
}

.bt-day .dt-important__head p:not(.dt-eyebrow) {
    margin-top: 12px;
    color: var(--dt-muted);
    font-size: 13px;
}

.bt-day .dt-important {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bt-day .dt-important__card {
    min-height: 173px;
    padding: 22px 18px;
    border: 1px solid var(--dt-border);
    border-radius: 13px;
    background: #fff;
}

.bt-day .dt-important__card > span {
    display: block;
    color: var(--dt-accent-dark);
    font-size: 23px;
    line-height: 1.6;
}

.bt-day .dt-important__card h3 {
    margin-top: 13px;
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 18px;
}

.bt-day .dt-important__card p {
    margin-top: 8px;
    color: var(--dt-muted);
    font-size: 11px;
}

.bt-day .dt-important__notice {
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    padding: 15px 18px;
    border: 1px solid #dbe9d9;
}

/* ---- 12. Reviews / 14. Related: horizontal rails -------------------------- */

.bt-day .dt-rail {
    display: flex;
    gap: 17px;
    overflow-x: auto;
    padding: 4px 3px 15px;
    scroll-behavior: smooth;
}

.bt-day .dt-rail::-webkit-scrollbar {
    height: 5px;
}

.bt-day .dt-rail::-webkit-scrollbar-track {
    border-radius: 20px;
    background: #e7efed;
}

.bt-day .dt-rail::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #b9cfcb;
}

.bt-day .dt-head--reviews {
    margin-bottom: 34px;
}

.bt-day .dt-review {
    flex: 0 0 320px;
    padding: 23px;
    border: 1px solid var(--dt-border);
    border-radius: 14px;
    background: #fff;
}

.bt-day .dt-review__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bt-day .dt-review__avatar {
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.bt-day .dt-review__avatar--1 {
    background: #b78368;
}

.bt-day .dt-review__avatar--2 {
    background: #76949a;
}

.bt-day .dt-review__avatar--3 {
    background: #9c7188;
}

.bt-day .dt-review__top h3 {
    color: var(--dt-primary);
    font-size: 12px;
}

.bt-day .dt-review__top span {
    display: block;
    margin-top: 2px;
    color: var(--dt-muted);
    font-size: 10px;
}

.bt-day .dt-review > p {
    min-height: 104px;
    margin-top: 20px;
    color: #536668;
    font-family: var(--dt-serif);
    font-size: 14px;
    line-height: 1.65;
}

.bt-day .dt-related {
    flex: 0 0 330px;
    overflow: hidden;
    border: 1px solid var(--dt-border);
    border-radius: 14px;
    background: #fff;
}

.bt-day .dt-related > img {
    height: 185px;
}

.bt-day .dt-related__body {
    padding: 19px;
}

.bt-day .dt-related__body > span {
    color: var(--dt-clay);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}

.bt-day .dt-related__body h3 {
    margin-top: 6px;
    color: var(--dt-primary);
    font-family: var(--dt-serif);
    font-size: 21px;
}

.bt-day .dt-related__body h3 a:hover {
    color: var(--dt-primary-dark);
}

.bt-day .dt-related__body > p {
    min-height: 38px;
    margin-top: 8px;
    color: var(--dt-muted);
    font-size: 12px;
}

.bt-day .dt-related__body > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--dt-border);
}

.bt-day .dt-related__body strong {
    color: var(--dt-primary);
    font-size: 19px;
}

.bt-day .dt-related__body strong small {
    color: var(--dt-muted);
    font-size: 10px;
    font-weight: 400;
}

.bt-day .dt-related__body > div a {
    color: var(--dt-clay);
    font-size: 11px;
    font-weight: 700;
}

/* ---- 13. FAQs ------------------------------------------------------------ */

.bt-day .dt-faq__lede {
    margin-bottom: 23px;
}

.bt-day .dt-faq details {
    border-bottom: 1px solid var(--dt-border);
}

.bt-day .dt-faq details:first-child {
    border-top: 1px solid var(--dt-border);
}

.bt-day .dt-faq summary {
    position: relative;
    display: block;
    padding: 19px 35px 19px 0;
    color: var(--dt-primary);
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
}

.bt-day .dt-faq summary::-webkit-details-marker {
    display: none;
}

.bt-day .dt-faq summary::after {
    position: absolute;
    top: 16px;
    right: 3px;
    color: var(--dt-accent-dark);
    content: "+";
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

.bt-day .dt-faq details[open] summary::after {
    content: "\2212";
}

.bt-day .dt-faq details p {
    padding: 0 35px 19px 0;
    color: var(--dt-muted);
    font-size: 12px;
}

/* ---- 15. CTA ------------------------------------------------------------- */

.bt-day .dt-cta {
    padding: 72px 0;
    background:
        linear-gradient(100deg, rgba(11, 64, 73, .98), rgba(18, 78, 90, .84)),
        var(--dt-cta-img, none) center / cover;
}

.bt-day .dt-cta__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.bt-day .dt-cta .dt-h2 {
    color: #fff;
}

.bt-day .dt-cta p:last-child {
    max-width: 650px;
    margin-top: 10px;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
}

.bt-day .dt-cta .dt-btn {
    flex: 0 0 auto;
}

/* ---- Tablet -------------------------------------------------------------- */

@media (max-width: 1050px) {
    .bt-day .dt-form__row,
    .bt-day .dt-form--novehicle .dt-form__trip,
    .bt-day .dt-form__contact {
        grid-template-columns: repeat(2, 1fr);
    }

    .bt-day .dt-form__check {
        width: 100%;
    }

    .bt-day .dt-highlights,
    .bt-day .dt-important,
    .bt-day .dt-vehicles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .bt-day .dt-wrap {
        width: min(calc(100% - 30px), 600px);
    }

    .bt-day .dt-hero {
        min-height: auto;
    }

    .bt-day .dt-hero__content {
        padding: calc(65px + var(--dt-head)) 0 65px;
    }

    .bt-day .dt-booking__top,
    .bt-day .dt-head,
    .bt-day .dt-cta__content {
        align-items: flex-start;
        flex-direction: column;
    }

    .bt-day .dt-section {
        padding: 70px 0;
    }

    .bt-day .dt-split--itinerary,
    .bt-day .dt-split--pricing,
    .bt-day .dt-split--why,
    .bt-day .dt-split--pickup,
    .bt-day .dt-split--faq {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bt-day .dt-inclusions,
    .bt-day .dt-pickups {
        grid-template-columns: 1fr;
    }

    .bt-day .dt-why__img {
        max-width: 520px;
    }
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 520px) {
    .bt-day .dt-wrap {
        width: calc(100% - 28px);
    }

    .bt-day .dt-hero__title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .bt-day .dt-hero__price {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .bt-day .dt-form__row,
    .bt-day .dt-form--novehicle .dt-form__trip,
    .bt-day .dt-form__contact {
        grid-template-columns: 1fr;
    }

    .bt-day .dt-booking__trust {
        display: grid;
        gap: 7px;
    }

    .bt-day .dt-highlights,
    .bt-day .dt-vehicles,
    .bt-day .dt-important {
        grid-template-columns: 1fr;
    }

    .bt-day .dt-timeline__item {
        grid-template-columns: 65px 1fr;
        gap: 12px;
    }

    .bt-day .dt-timeline__time {
        font-size: 9px;
    }

    .bt-day .dt-timeline__detail {
        padding-left: 20px;
    }

    .bt-day .dt-inclusion {
        padding: 21px;
    }

    .bt-day .dt-why__img img {
        height: 340px;
    }

    .bt-day .dt-why__badge {
        bottom: 32px;
    }

    .bt-day .dt-pickup {
        padding: 20px 15px;
    }

    .bt-day .dt-important__head {
        gap: 12px;
    }

    .bt-day .dt-important__mark {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .bt-day .dt-important__notice {
        align-items: flex-start;
    }

    .bt-day .dt-review {
        flex-basis: 275px;
    }

    .bt-day .dt-related {
        flex-basis: 280px;
    }
}