/* ==========================================================================
   Custom Dark Theme and Spacing Layout Modifications
   ========================================================================== */
.dark-detail-container { color: #f2efe6; background: #0a0a0a; margin: 0; padding: 170px 0 40px; }
@media (max-width: 991px) {
    .dark-detail-container { padding-top: 140px; }
}

/* Force inherit site-wide font (Roboto) instead of provided Instrument/Archivo */
.dark-detail-container,
.dark-detail-container h1, 
.dark-detail-container h2, 
.dark-detail-container h3, 
.dark-detail-container h4, 
.dark-detail-container h5, 
.dark-detail-container h6,
.dark-detail-container span,
.dark-detail-container p,
.dark-detail-container button,
.dark-detail-container input,
.dark-detail-container select,
.dark-detail-container textarea,
.dark-detail-container a {
    font-family: inherit !important;
}

.dark-detail-container input::placeholder, .dark-detail-container textarea::placeholder { color: #8e8e8e; }
.dark-detail-container a { color: #ff7f00; }
.dark-detail-container a:hover { color: #f2efe6; }
.dark-detail-container ::-webkit-scrollbar { height: 6px; width: 6px; }
.dark-detail-container ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

.btn-book-now { color: #121212; background: #f28c3a; text-decoration: none; padding: 10px 20px; border-radius: 999px; font-weight: 600; transition: filter 0.2s; display: inline-block; }
.btn-book-now:hover { filter: brightness(1.06); }

.btn-outline { font-size: 14px; font-weight: 600; color: #f2efe6; background: none; border: 1.5px solid #5d6b60; border-radius: 999px; padding: 12px 22px; text-decoration: none; transition: background 0.2s; display: inline-block; text-align: center; }
.btn-outline:hover { background: #222222; }

.breadcrumb-link { color: #888888; text-decoration: none; transition: color 0.2s; }
.breadcrumb-link:hover { color: #ff7f00; }

.tripadvisor-link { font-size: 14px; color: #ff7f00; text-decoration: none; font-weight: 500; }
.tripadvisor-link:hover { text-decoration: underline; }

.input-field { font-size: 15px; padding: 12px 14px; border: 1px solid #2a2a2a; border-radius: 10px; background: #131f18; color: #f2efe6; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.input-field:focus { border-color: #ff7f00; }
.input-field::-webkit-calendar-picker-indicator { filter: invert(0.9); cursor: pointer; }

.btn-submit { font-size: 16px; font-weight: 700; color: #121212; background: #e6a503; border: none; border-radius: 12px; padding: 15px; cursor: pointer; margin-top: 4px; transition: filter 0.2s; width: 100%; text-align: center; }
.btn-submit:hover { filter: brightness(1.06); }

.btn-enquiry { font-size: 15px; font-weight: 600; color: #f2efe6; background: none; border: 1.5px solid #2a2a2a; border-radius: 12px; padding: 13px; cursor: pointer; transition: background 0.2s; text-align: center; text-decoration: none; display: block; width: 100%; }
.btn-enquiry:hover { background: #0a0a0a; }

.extend-card { text-decoration: none; color: inherit; background: #141414;  border-radius: 14px; padding: 24px; display: grid !important; gap: 8px; transition: border-color 0.2s; }
.extend-card:hover { border-color: #ff7f00; }

.tab-button { font-size: 14px; font-weight: 600; background: none; border: none; padding: 17px 16px 15px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color 0.2s, border-color 0.2s; }
.tab-button:hover { color: #f2efe6; }

/* Dynamic listing decorations to match design */
.highlights-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .highlights-wrapper { grid-template-columns: 1fr; } }
.highlights-wrapper p, .highlights-wrapper li { display: flex !important; gap: 12px; background: #141414;  border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.5; color: #d4d4d4; margin: 0 !important; }

.includes-wrapper { display: grid !important; gap: 12px; background: #141414;  border-radius: 16px; padding: 26px 28px; }
.includes-wrapper p, .includes-wrapper li { display: flex !important; gap: 12px; font-size: 15px; line-height: 1.6; color: #d4d4d4; margin: 0 !important; align-items: flex-start; list-style: none; }
.includes-wrapper p::before, .includes-wrapper li::before { content: "◆"; color: #f28c3a; font-size: 12px; line-height: 1.6; flex-shrink: 0; }
/* Legacy entries authored with a manual "•" bullet character in the rich text editor: hide it so it doesn't double up with the ::before icon above. */
.includes-wrapper p::first-letter { font-size: 0; }

.excludes-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 32px; background: #141414;  border-radius: 16px; padding: 26px 28px; }
@media (max-width: 768px) { .excludes-wrapper { grid-template-columns: 1fr; gap: 14px 0; } }
.excludes-wrapper p, .excludes-wrapper li { display: flex !important; gap: 11px; font-size: 15px; line-height: 1.55; color: #d4d4d4; margin: 0 !important; align-items: flex-start; list-style: none; }
.excludes-wrapper p::before, .excludes-wrapper li::before { content: "✕"; color: #e08a63; font-weight: 700; font-size: 13px; line-height: 1.55; flex-shrink: 0; }
.excludes-wrapper p::first-letter { font-size: 0; }

.equipments-wrapper p:empty, .equipments-wrapper p:blank { display: none !important; }
.equipments-wrapper p { margin: 0; }
.equipments-wrapper ul { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 992px) { .equipments-wrapper ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .equipments-wrapper ul { grid-template-columns: 1fr; } }
.equipments-wrapper li { background: #141414;  border-radius: 14px; padding: 20px; font-size: 15px; line-height: 1.5; color: #d4d4d4; display: flex !important; gap: 10px; align-items: center; }
.equipments-wrapper li::before { content: "◆"; color: #f28c3a; font-size: 12px; flex-shrink: 0; }

/* Responsive Layouts */
.photo-mosaic {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 250px;
    gap: 10px;
    border-radius: 18px;
    overflow: hidden;
}
@media (min-width: 768px) {
    .photo-mosaic {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 210px 210px;
    }
}
.photo-mosaic-item {
    position: relative;
    overflow: hidden;
}
@media (max-width: 767px) {
    .photo-mosaic-item:not(:first-child) {
        display: none !important;
    }
}

.title-block-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: end;
}
@media (min-width: 768px) {
    .title-block-grid {
        grid-template-columns: 1fr auto;
        gap: 40px;
    }
}

.quick-facts-grid {
    background: #141414;
    border-radius: 18px;
    padding: 12px;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .quick-facts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}
.quick-fact-item {
    display: flex !important;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    background: rgba(30, 30, 30, 0.4);
    border-radius: 12px;
}

.detail-main-layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 32px 0;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 1024px) {
    .detail-main-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 56px;
    }
}

.departures-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.departures-table {
    min-width: 750px;
}

/* ==========================================================================
   Tailwind CSS Isolation Reset (.tailwind-scope)
   ========================================================================== */
/* Reset legacy floats and forced widths on elements inside .tailwind-scope */
.tailwind-scope div,
.tailwind-scope p,
.tailwind-scope ul,
.tailwind-scope ol,
.tailwind-scope li,
.tailwind-scope header,
.tailwind-scope footer,
.tailwind-scope section,
.tailwind-scope nav,
.tailwind-scope h1,
.tailwind-scope h2,
.tailwind-scope h3,
.tailwind-scope h4,
.tailwind-scope h5,
.tailwind-scope h6,
.tailwind-scope form,
.tailwind-scope article,
.tailwind-scope main,
.tailwind-scope button,
.tailwind-scope input,
.tailwind-scope select,
.tailwind-scope textarea,
.tailwind-scope a {
    float: none !important;
    width: auto;
    display: revert;
    box-sizing: border-box;
}

/* Ensure standard block container tags stretch to 100% width unless overridden */
.tailwind-scope div,
.tailwind-scope section,
.tailwind-scope main,
.tailwind-scope article,
.tailwind-scope form,
.tailwind-scope p {
    width: 100%;
}

/* Ensure centering utility works perfectly without floating */
.tailwind-scope .mx-auto {
    float: none !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Flex and Grid displays */
.tailwind-scope .grid,
.tailwind-scope .flex {
    float: none !important;
    display: grid !important;
    width: 100% !important;
}
.tailwind-scope .flex {
    display: flex !important;
}

/* Reset direct column children widths inside grids/flex rows so columns function */
.tailwind-scope .grid > *,
.tailwind-scope .flex > * {
    width: auto !important;
    float: none !important;
}

/* Restore basic width overrides inside .tailwind-scope */
.tailwind-scope .w-full { width: 100% !important; }
.tailwind-scope .w-auto { width: auto !important; }
.tailwind-scope .w-min { width: min-content !important; }
.tailwind-scope .w-max { width: max-content !important; }
.tailwind-scope .w-fit { width: fit-content !important; }

/* Responsive variants must be restored too, or an unconditional bare .w-full above always wins */
@media (min-width: 640px) {
    .tailwind-scope .sm\:w-full { width: 100% !important; }
    .tailwind-scope .sm\:w-auto { width: auto !important; }
}
@media (min-width: 768px) {
    .tailwind-scope .md\:w-full { width: 100% !important; }
    .tailwind-scope .md\:w-auto { width: auto !important; }
}
@media (min-width: 1024px) {
    .tailwind-scope .lg\:w-full { width: 100% !important; }
    .tailwind-scope .lg\:w-auto { width: auto !important; }
}