/* ============================================================================
   components.css — shared, site-wide UI components.

   General building blocks reused across templates, kept out of style.css because
   style.css is generated from assets/scss/ and any edit there is wiped by the next
   SCSS build. Nothing here is page-specific; add a component only when it is meant
   to look identical everywhere it appears.

   Loaded synchronously in resources/views/layouts/frontend/header.blade.php.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   INCLUSIONS / EXCLUSIONS
   Markup lives in resources/views/frontend/partials/inclusions.blade.php — always
   render this component through that partial so the two never diverge.

   Colours resolve from component-scoped custom properties rather than being written
   inline on each rule, so the dark-theme override below only has to restate six
   values instead of duplicating the whole component.
   --------------------------------------------------------------------------- */

.inclusion-grid {
    --incl-radius: 12px;

    --incl-in-accent: var(--bs-success, #3DC262);
    --incl-in-border: var(--bs-border-color, #E4E6E8);

    --incl-ex-accent: var(--bs-danger, #D63E29);
    --incl-ex-border: var(--bs-border-color, #E4E6E8);

    --incl-text: var(--bs-neutral-800, #454545);
    --incl-title: var(--bs-neutral-1000, #000000);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

/* One panel present (tour lists nothing as excluded, say) — let it use the width
   instead of leaving a conspicuous empty column. */
.inclusion-grid:has(> .inclusion-panel:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

/* Panels are transparent by design — the coloured marks and the divider under each
   heading carry the grouping, so no fill is needed and the block sits flat on whatever
   surface hosts it (white card, tinted section, dark theme) without fighting it. */
.inclusion-panel {
    border: 1px solid var(--incl-ex-border);
    background-color: transparent;
    border-radius: var(--incl-radius);
    padding: 20px 22px;
    height: 100%;
}

.inclusion-panel--included {
    border-color: var(--incl-in-border);
}

/* ------------------------------------------------------------ panel heading */
.inclusion-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--incl-in-border);
}

.inclusion-panel--excluded .inclusion-panel__head {
    border-bottom-color: var(--incl-ex-border);
}

/* Element selector is restated because style.css sets global h1-h6 sizes and the
   site's reset strips their margins; without this the heading inherits 19px h3. */
.inclusion-panel__title,
h3.inclusion-panel__title {
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    color: var(--incl-title) !important;
    margin: 0 !important;
}

.inclusion-panel__count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 999px;
    color: #FFFFFF;
    background-color: var(--incl-in-accent);
}

.inclusion-panel--excluded .inclusion-panel__count {
    background-color: var(--bs-neutral-400, #8E8E8E);
}

/* --------------------------------------------------------------------- list */
/* !important is required, not decorative: `.group-collapse-expand .card.card-body ul`
   in style.css (specificity 0,3,1) forces `list-style: disc` and left padding on any
   ul inside these collapse cards, which would double up with the custom marks below.
   `.inclusion-list` alone (0,1,0) cannot outrank it. */
.inclusion-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Grid rather than flex so a wrapped second line aligns under the text instead of
   under the icon — the hanging indent holds at any line count or font size. */
.inclusion-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0 !important;
}

.inclusion-item__mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background-color: var(--incl-in-accent);
    /* Nudge the mark onto the text's optical centre for the first line. */
    margin-top: 1px;
}

.inclusion-item__mark svg {
    width: 11px;
    height: 11px;
    display: block;
}

.inclusion-panel--excluded .inclusion-item__mark {
    background-color: var(--incl-ex-accent);
}

/* The excluded column stays at full reading contrast. Greying it out — the usual
   treatment — makes the text hard to read while adding no information the icon and
   the panel heading do not already carry. */
.inclusion-item__text {
    font-size: 14px;
    line-height: 20px;
    color: var(--incl-text);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
    .inclusion-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .inclusion-panel {
        padding: 16px 16px;
    }

    .inclusion-list {
        gap: 10px;
    }
}

/* --------------------------------------------------------------- dark theme */
/* Borders and text resolve from --bs-* tokens, which the theme already flips, so
   only the accent-derived values need restating here. */
[data-bs-theme=dark] .inclusion-grid {
    --incl-in-border: #313131;
    --incl-ex-border: #313131;
    --incl-text: var(--bs-neutral-800, #E4E6E8);
    --incl-title: var(--bs-neutral-1000, #f2f2f2);
}

/* -------------------------------------------------------------------- print */
@media print {
    .inclusion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inclusion-panel {
        border: 1px solid #999999;
        break-inside: avoid;
    }
}


/* ---------------------------------------------------------------------------
   FAQ ACCORDION
   Markup lives in resources/views/frontend/partials/faqs.blade.php.

   This is the homepage FAQ design promoted to a site-wide component. It previously
   existed only as an inline <style> block inside home.blade.php, while every other
   page used a completely different, non-interactive `.list-questions` markup — two
   unrelated designs for the same content. Both now render through the one partial.

   Class names are deliberately NOT Bootstrap's `.accordion-*`. Reusing those meant
   inheriting the theme's own accordion rules (including a caret pseudo-element and a
   PNG open/close icon) that then had to be fought off with `display: none !important`.
   Only `.collapse` / `.show` are kept, because Bootstrap's collapse JS binds to them.
   --------------------------------------------------------------------------- */

/* The homepage wraps its FAQ in .block-faqs, which style.css:10475 caps at 1036px —
   212px narrower than the .container every other page's FAQ sits in. That made home
   render visibly tighter cards than detail pages and wrap questions a line earlier.
   Lifting the cap widens each card from ~510px to ~616px and makes home match.
   Overridden here rather than edited in style.css because style.css is generated from
   assets/scss/ and would lose the change on the next build. .block-faqs is used on the
   homepage FAQ only, so this cannot affect anything else. */
.block-faqs {
    max-width: none;
}

/* Exactly two per row — a fixed track, NOT `auto-fit` with a min width. auto-fit sizes
   the column count to whatever fits, so once every FAQ block became full-page-width the
   container grew wide enough to fit a third column and the layout silently went to 3-up.
   Every FAQ on the site now renders in a full-width column, so a fixed 2-track is safe
   and is the only way to guarantee the count. */
.faq-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    /* Cards keep their natural height instead of stretching to match the tallest in
       the row, so an open answer never inflates the collapsed card beside it. */
    align-items: start;
}

.faq-item {
    background-color: var(--bs-background-card, #FFFFFF);
    border: 1px solid var(--bs-border-color, #E4E6E8);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.faq-item__header {
    margin: 0 !important;
}

.faq-item__button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.faq-item__button:focus {
    outline: none;
    box-shadow: none;
}

/* Keyboard users still need to see focus — :focus is cleared above only to drop the
   theme's persistent click outline. */
.faq-item__button:focus-visible {
    outline: 2px solid var(--bs-brand-secondary, #6169ba);
    outline-offset: -2px;
}

.faq-item__index {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-neutral-100, #F2F4F6);
    color: var(--bs-neutral-1000, #000000);
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-item__button:not(.collapsed) .faq-item__index {
    background-color: var(--bs-brand-secondary, #6169ba);
    color: #FFFFFF;
}

/* Element selector restated: the site reset strips heading margins and style.css
   forces a global h3 size, both of which would otherwise win here. */
.faq-item__question,
h3 .faq-item__question {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--bs-neutral-1000, #000000);
}

.faq-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-neutral-100, #F2F4F6);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-item__icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.faq-item__icon svg path {
    stroke: var(--bs-neutral-1000, #000000);
    transition: stroke 0.3s ease;
}

.faq-item__button:not(.collapsed) .faq-item__icon {
    transform: rotate(180deg);
    background-color: var(--bs-brand-secondary, #6169ba);
}

.faq-item__button:not(.collapsed) .faq-item__icon svg path {
    stroke: #FFFFFF;
}

/* Answers are editor-authored, so they can contain lists, links and <br>. Aligned to
   the question text rather than the card edge (22 + 32 + 16 = 70px). */
.faq-item__answer {
    padding: 0 22px 20px 70px;
    margin: 0;
    color: var(--bs-neutral-600, #575756);
    font-size: 14px;
    line-height: 1.7;
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    /* Single column on phones — two 160px-wide cards would be unreadable. */
    .faq-accordion {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .faq-item__button {
        padding: 16px;
        gap: 12px;
    }

    .faq-item__question {
        font-size: 15px;
    }

    .faq-item__index,
    .faq-item__icon {
        width: 28px;
        height: 28px;
    }

    .faq-item__answer {
        padding: 0 16px 16px 56px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item__index,
    .faq-item__icon,
    .faq-item__icon svg path {
        transition: none;
    }
}

@media print {
    .faq-accordion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-item {
        break-inside: avoid;
        box-shadow: none;
    }

    /* Collapsed answers would otherwise print as blank cards. */
    .faq-item .collapse {
        display: block !important;
        height: auto !important;
    }

    .faq-item__icon {
        display: none;
    }
}

/* ==========================================================================
   Detail-page section accordions (.group-collapse-expand)
   ==========================================================================
   Every section on the tour/activity/rental/attraction detail pages used to
   ship with `class="collapse show"`, so a first-time visitor landed on a wall
   of fully expanded panels and had to scroll past all of them to reach the
   booking form. The markup now ships Overview open and every other section
   collapsed.

   The chevron rotation also pointed the wrong way: the base SVG path
   (M1 1L6 6L11 1) already draws a DOWN chevron, and style.css rotated it
   180deg on `.collapsed` — i.e. it pointed UP while the panel was shut and
   DOWN while it was open. That was easy to miss when everything was expanded;
   with panels now collapsed by default it would be wrong on every heading at
   once. Down = "click to open", up = "click to close". */
.group-collapse-expand .btn-collapse svg {
    transition: transform 0.25s ease;
}

.group-collapse-expand .btn-collapse.collapsed svg {
    transform: rotate(0deg);
}

.group-collapse-expand .btn-collapse:not(.collapsed) svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .group-collapse-expand .btn-collapse svg {
        transition: none;
    }
}

/* ==========================================================================
   Frontend pagination (.site-pagination)
   ==========================================================================
   Paired with resources/views/vendor/pagination/site.blade.php.

   style.css styles `.pagination li a` only, but Laravel renders the CURRENT page and the
   disabled prev/next arrows as <span class="page-link"> - never <a> - so the one item
   that most needs styling got none of it and fell through to Bootstrap's stock blue
   .page-link instead. These rules target .page-link directly so links and spans share a
   shape, and the state (active / disabled / hover) decides the colour. */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.pagination.site-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0 0;
    padding-left: 0;
    list-style: none;
}

.site-pagination .page-item {
    margin: 0;
}

.site-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 50%;
    background-color: var(--bs-neutral-100, #F2F4F6);
    color: var(--bs-neutral-700, #4D4D4D);
    font-family: "DIN Next LT Pro Regular", "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-pagination .page-link:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.site-pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--bs-neutral-200, #E4E6E8);
    color: var(--bs-neutral-1000, #000000);
}

/* Current page: the site's buttons are black, so the active pill is black too. This one
   declaration is the whole colour decision - swap it to re-theme the control. */
.site-pagination .page-item.active .page-link {
    background-color: var(--bs-button-bg, #000000);
    color: var(--bs-neutral-0, #FFFFFF);
    cursor: default;
}

.site-pagination .page-item.disabled .page-link {
    background-color: var(--bs-neutral-100, #F2F4F6);
    color: var(--bs-neutral-300, #D6D7D8);
    cursor: not-allowed;
    pointer-events: none;
}

/* The "..." gap marker is a label, not a button - no pill behind it. */
.site-pagination .page-item.ellipsis .page-link {
    background-color: transparent;
    color: var(--bs-neutral-400, #8E8E8E);
    min-width: 24px;
}

@media (max-width: 575.98px) {
    .pagination.site-pagination {
        gap: 6px;
        margin-top: 28px;
    }

    .site-pagination .page-link {
        min-width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Typography
   ==========================================================================
   One place for the type rules the detail templates were each solving on their own.

   The site already has a coherent scale in style.css - headings 32/24/19/16/14/13 at
   weight 600, body text 12/14/16/18/20 via .text-xs|sm|md|lg|xl - but the Tours,
   Activities, Yacht and Vehicle Rentals pages had drifted off it with per-page inline
   styles (17px, 13px, 11px, 9px, 1.1rem, line-height 2.5) that no other page uses.
   Those templates now use the scale's own classes; what is left here is the shared
   plumbing. */

:root {
    /* Single source of truth for the family. style.css repeats this literal stack in 29
       separate rules - anything added from here on should use the token instead. */
    --font-sans: "DIN Next LT Pro Regular", "Manrope", sans-serif;
}

html,
body,
input,
select,
button,
textarea {
    font-family: var(--font-sans);
}

/* `.info-icon` (the "i" bubble beside Private tour pricing on the tour detail page) was
   the one element on these four pages still pinned to Arial. */
.info-icon {
    font-family: var(--font-sans) !important;
}

/* Responsive heading scale -------------------------------------------------
   style.css stepped h1 the wrong way: 32px on desktop, then UP to 36px at
   <=575.98px, then down to 28px at <=499.98px - so an h1 was largest on a phone and
   changed size twice in 76px of viewport width. There was no tablet step at all, so
   768-991px got desktop sizes. This restores a monotonic scale.

   Selectors are `body h1` rather than `h1` on purpose: style.css is loaded with
   preload+onload, so its arrival order relative to this file is not guaranteed, and
   equal specificity would make the winner a race. */
@media (max-width: 991.98px) {
    body h1,
    body .heading-1 {
        font-size: 30px;
        line-height: 38px;
    }

    body h2,
    body .heading-2 {
        font-size: 22px;
        line-height: 30px;
    }
}

@media (max-width: 575.98px) {
    body h1,
    body .heading-1 {
        font-size: 28px;
        line-height: 36px;
    }

    body h2,
    body .heading-2 {
        font-size: 20px;
        line-height: 28px;
    }
}

/* Hero "+N Images" badge ---------------------------------------------------
   The same 9-declaration inline style was pasted onto the gallery badge in the tour,
   activity and rental detail templates. `font-weight: bolder` there was relative, not
   absolute - it resolves against whatever the parent weight happens to be, so the badge
   was not guaranteed to match itself across the three pages. */
.hero-image-count {
    position: absolute;
    right: 12%;
    bottom: 5%;
    padding: 10px 25px;
    border-radius: 20px;
    background: #00000038;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

@media (max-width: 767.98px) {
    .hero-image-count {
        right: 5%;
        padding: 8px 18px;
        font-size: 16px;
        line-height: 24px;
    }
}

/* ==========================================================================
   Button theme tokens
   ==========================================================================
   The site's primary theme colour is the brand purple that style.css :root already
   documents as the rebrand target (`--bs-brand-secondary: #6169ba`). Buttons had drifted
   away from it in two ways:

   1. The base colour was written three ways - var(--bs-brand-secondary), a literal
      #6169ba, and a per-element inline `style="background:#6169ba !important"`.
   2. The HOVER colour was written five ways: rgb(0, 0, 90), rgb(0,0,90) !important,
      #4A50A3, #000c7a and #16057c. Four of those are navy/indigo, not a darker purple,
      so most buttons jumped hue on hover while two darkened correctly.

   #4A50A3 (the value the homepage category cards and the tour-category FAQ toggles
   already used) is the correct darker shade of #6169ba and is now the single hover.

   Use these tokens for any new button. Every use site carries a literal fallback -
   `var(--btn-primary-bg, #6169ba)` - because style.css is loaded async and this file is
   not, so neither is guaranteed to arrive first. */

:root {
    --btn-primary-bg: #6169ba;
    --btn-primary-bg-hover: #4A50A3;
    --btn-primary-text: #FFFFFF;

    /* WhatsApp keeps its own green on purpose: it is a recognised third-party action and
       users pick it out by colour. Only its hover was wrong (it inherited a navy
       !important from mystyle.css). */
    --btn-whatsapp-bg: #3DC262;
    --btn-whatsapp-bg-hover: #2FA653;
}

/* ==========================================================================
   Responsive tables (non-editor)
   ==========================================================================
   Same contract as the authored-content tables in editor-content.css - 100% wide on
   every screen, type and padding shrinking with the viewport, never a sideways scroll -
   but for tables written directly into a template rather than by the CMS (the vehicle
   spec tables on the rental type pages are the live case).

   Kept in step with the `.tinymce-content table` block in editor-content.css. That file
   is the authority because the TinyMCE iframe loads it; this is the plain-markup twin.
   No `!important` here, so a page can still opt a specific table out. */

table {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: clamp(11px, 9.3px + 0.48vw, 14px);
}

@media (max-width: 991.98px) {
    table {
        table-layout: fixed;
    }
}

table th,
table td {
    padding: clamp(6px, 1.4vw, 15px);
    vertical-align: middle;
    text-align: left;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

table img,
table iframe {
    max-width: 100%;
    height: auto;
}

/* Authored markup often wraps cell text in a <p>; its default margin would double the
   apparent cell padding. */
table td p,
table th p {
    margin: 0;
    padding: 0;
}

/* Visual treatment carried over from the block that used to live in mystyle.css, so
   plain-markup tables keep the borders and header shading they had. */
table th,
table td {
    border: 1px solid #dee2e6;
}

table th {
    font-weight: 600;
    background-color: #f8f9fa;
    color: #2c3e50;
}

table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Datepickers are tables too, and they are sized in px by their own stylesheet - the
   fluid rules above would squash them. */
.datepicker table,
.datepicker table th,
.datepicker table td,
.table-condensed,
.table-condensed th,
.table-condensed td {
    table-layout: auto;
    font-size: inherit;
    border: 0;
    background-color: transparent;
    word-break: normal;
    overflow-wrap: normal;
}