/* ==========================================================================
   EGYVACATIONS — SHARED COMPONENTS  ·  assets/css/components.css

   One definition per component, used by every template. Nothing here knows
   which page it is on. If a rule only ever applies to one page it belongs in
   assets/css/templates/<page>.css instead.

   Prefix note: .ev- is site chrome (header/footer/app bar, in chrome.css).
   .evt- is the shared template layer — it started life on the tour page,
   which is why the name stuck, but these components are now site-wide.

     1. Layout + prose         .evt-layout .evt-block .evt-prose
     2. Button                 .ev-btn   (the only button in the system)
     3. Badges + chips         .evt-badge .evt-stops .evt-share
     4. Form controls          .evt-field .evt-input .evt-fgrid
     5. Tabs                   .evt-notetabs .evt-notepanel
     6. Accordion / FAQ        .evt-qa
     7. Tour card              .evt-card .evt-wa
     8. Sticky price bar       .evt-bar
     9. Sale pricing           .evt-was .evt-sale
    10. Traveller stepper      .evt-step
   ========================================================================== */

.evt-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.evt-badge{padding:6px 13px;border-radius:var(--r-sm);background:var(--tourcard-badge-bg);color:#fff;
  font-size:.68rem;font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase}
.evt-badge--accent{background:var(--accent);color:var(--on-accent)}

.evt-share{display:inline-flex;align-items:center;gap:9px;height:var(--btn-h-sm);padding:0 18px;flex:none;
  border:1.5px solid var(--border);border-radius:var(--r-pill);color:var(--text-heading);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);transition:border-color var(--dur-fast) var(--ease)}
.evt-share:hover{border-color:var(--action)}
.evt-share svg{width:15px;height:15px}

/* ---------- 4. LAYOUT ---------- */
/* min-width:0 on the children, or a grid item's automatic minimum is
   min-content: one horizontal track in the left column (the route strip,
   a day's photo slider) blows the whole grid past the viewport. */
.evt-layout > *{min-width:0}
.evt-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--sp-9);align-items:start;
  padding-bottom:var(--sp-10)}
@media(max-width:1080px){.evt-layout{grid-template-columns:1fr;gap:var(--sp-8)}}

.evt-block{padding-top:var(--sp-8)}
.evt-block + .evt-block{border-top:1px solid var(--border-soft);margin-top:var(--sp-8)}
.evt-prose{margin-top:var(--sp-5);color:var(--text-secondary);font-weight:var(--fw-light);max-width:70ch}
.evt-prose p + p{margin-top:14px}
.evt-prose strong{font-weight:var(--fw-semi);color:var(--text)}
.evt-prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   BUTTON — one component.
   There used to be two: .ev-btn in chrome.css at 46px and .evt-btn here at
   --btn-h, with the same fills under different modifier names. They have been
   merged. Size is contextual, set by --btn-h-local rather than by a second
   class, so the header can run a shorter button without being a second
   component.

   Modifiers, and nothing else:
     --cta       the orange CTA. Fill is --btn-cta-bg (#B85C00), NOT the brand
                 orange: white on brand orange measures 2.41 and is illegal.
     --ghost     white with a hairline border.
     --offers    --ghost with the icon in brand orange.
     --solid     navy fill.
     --on-navy   the ghost, for use on a navy section.
     --wa        WhatsApp green, reserved for WhatsApp. #06301A on it = 9.1.
     --sm --lg --block
   ========================================================================== */
.ev-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h-local,var(--btn-h));padding:0 24px;border-radius:var(--btn-radius);
  font-size:var(--fs-body);font-weight:var(--fw-bold);white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),
             background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.ev-btn svg{width:18px;height:18px;flex:none}

.ev-btn--cta{background:var(--btn-cta-bg);color:var(--btn-cta-fg);box-shadow:var(--shadow-accent)}
.ev-btn--cta:hover{background:#A14E00;transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(184,92,0,.4);color:var(--btn-cta-fg)}

.ev-btn--ghost{background:var(--surface);color:var(--text-heading);border:1.5px solid var(--border)}
.ev-btn--ghost:hover{border-color:var(--action);background:var(--surface-sunken);color:var(--text-heading)}

.ev-btn--offers{background:var(--surface);color:var(--ev-navy);border:1.5px solid var(--border)}
.ev-btn--offers:hover{border-color:var(--accent);background:rgba(240,144,31,.07);color:var(--ev-navy)}
.ev-btn--offers svg{color:var(--accent)}

.ev-btn--solid{background:var(--action);color:#fff}
.ev-btn--solid:hover{background:var(--action-hover);transform:translateY(-2px);color:#fff}

/* the ghost, restated for a navy field */
.ev-btn--on-navy{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.34)}
.ev-btn--on-navy:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-2px);color:#fff}

.ev-btn--wa{background:var(--whatsapp);color:#06301A;box-shadow:var(--shadow-whatsapp)}
.ev-btn--wa:hover{transform:translateY(-2px);color:#06301A}

.ev-btn--sm{--btn-h-local:var(--btn-h-sm);padding:0 16px;font-size:.84rem}
.ev-btn--sm svg{width:16px;height:16px}
.ev-btn--lg{--btn-h-local:58px;padding:0 28px;font-size:1.02rem}
.ev-btn--block{width:100%}

.evt-stops{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.evt-stops span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--surface-sunken);font-size:.7rem;font-weight:var(--fw-semi);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-secondary)}
.evt-stops svg{width:13px;height:13px;color:var(--ev-ocean)}

/* ---------- 10. NOTE TABS ---------- */
.evt-notetabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-6)}
.evt-notetabs button{padding:9px 17px;border-radius:var(--r-pill);border:1.5px solid var(--border);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.evt-notetabs button:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.evt-notetabs button[aria-selected="true"]{background:var(--action);border-color:var(--action);color:#fff}
.evt-notepanel{margin-top:var(--sp-5);padding:var(--sp-6);border-radius:var(--r-lg);
  background:var(--surface-sunken);font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}
.evt-notepanel[hidden]{display:none}
.evt-notepanel ul{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.evt-notepanel li{display:flex;gap:10px}
.evt-notepanel li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:9px}
.evt-notepanel b{color:var(--text-heading);font-weight:var(--fw-semi)}

/* ---------- 11. QUESTION DISCLOSURE ----------
   ONE question component, two mechanisms:
     <details class="evt-qa">   a page that owns its questions — works with
                                no script at all, each one opens on its own.
     .ev-accordion__item        the shared/scripted block, where opening one
                                closes the rest (sections.css §19).
   They must look identical, down to the sign, or the site has two FAQs.
   Everything below mirrors .ev-accordion__item exactly. */
.evt-qa{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  margin-bottom:10px;overflow:hidden;position:relative}
.evt-qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  opacity:0;transition:opacity var(--dur-base) var(--ease)}
.evt-qa[open]{box-shadow:var(--shadow-2)}
.evt-qa[open]::before{opacity:1}
.evt-qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 20px 19px 24px;cursor:pointer;font-weight:var(--fw-semi);color:var(--text-heading);
  font-size:var(--fs-sm)}
.evt-qa summary::-webkit-details-marker{display:none}
/* the sign is drawn here, same as the accordion's — the chevron the markup
   carries is hidden rather than removed, so no template had to change */
.evt-qa .chev{position:relative;width:34px;height:34px;flex:none;border-radius:var(--r-md);
  background:var(--surface-sunken);color:var(--text-heading);
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.evt-qa .chev svg{display:none}
.evt-qa .chev::before,
.evt-qa .chev::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2px;
  border-radius:2px;background:currentColor;transform:translate(-50%,-50%);
  transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.evt-qa .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.evt-qa[open] .chev{background:var(--action);color:#fff}
.evt-qa[open] .chev::after{transform:translate(-50%,-50%) rotate(180deg);opacity:0}
.evt-qa p{padding:0 24px 22px;font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}

.evt-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.evt-fgrid .full{grid-column:1/-1}
.evt-field{display:flex;flex-direction:column;gap:6px}
.evt-field label{font-size:.68rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.evt-field label i{font-style:normal;color:#B3261E}
.evt-input{height:50px;padding:0 15px;border:1.5px solid var(--control-border);border-radius:var(--r-md);
  background:var(--surface);font-weight:var(--fw-medium);width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
textarea.evt-input{height:auto;padding:13px 15px;resize:vertical;min-height:92px;line-height:1.6}
.evt-input:focus{outline:0;border-color:var(--control-border-focus);box-shadow:var(--control-focus-shadow)}
.evt-input::placeholder{color:var(--control-placeholder);font-weight:var(--fw-regular)}
select.evt-input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272A' stroke-opacity='.45' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:38px}
.evt-formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.evt-formfoot p{font-size:var(--fs-xs);color:var(--text-muted);flex:1;min-width:200px}

@media(max-width:560px){.evt-fgrid{grid-template-columns:1fr}}

.evt-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--card-radius);overflow:hidden;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.evt-card:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-shadow-hover)}
.evt-card__media{position:relative;aspect-ratio:var(--card-media-ratio);overflow:hidden;background:var(--surface-sunken)}
.evt-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.evt-card:hover .evt-card__media img{transform:scale(1.05)}
.evt-card__media .evt-badge{position:absolute;top:12px;left:12px}
.evt-card__body{display:flex;flex-direction:column;flex:1;gap:12px;padding:18px}
.evt-card__body h3{font-size:1.02rem;line-height:var(--lh-tight);font-weight:var(--fw-bold)}
.evt-route{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.68rem;font-weight:var(--fw-semi);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.evt-route i{width:12px;height:1.5px;background:var(--border);flex:none}
.evt-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--border-soft)}
.evt-lab{display:block;margin-bottom:2px;font-size:.64rem;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-muted)}
.evt-card__foot b{font-size:1.3rem;font-weight:var(--fw-black);color:var(--text-heading);letter-spacing:var(--ls-heading)}
.evt-card__foot b span{font-size:.72rem;font-weight:var(--fw-regular);color:var(--text-muted);letter-spacing:0}
.evt-card__actions{display:flex;gap:9px;padding:0 18px 18px}
.evt-card__actions .ev-btn{flex:1;height:46px;border-radius:var(--r-md);font-size:var(--fs-sm)}
.evt-wa{width:46px;height:46px;flex:none;border-radius:50%;background:var(--whatsapp);display:grid;
  place-items:center;box-shadow:var(--shadow-whatsapp);transition:transform var(--dur-fast) var(--ease)}
.evt-wa:hover{transform:scale(1.07)}
.evt-wa svg{width:24px;height:24px;fill:#fff}

/* ---------- 14. MOBILE BOOKING BAR ---------- */
.evt-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);
  border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(17,72,115,.12)}
.evt-bar .p{flex:1;min-width:0}
.evt-bar .p small{display:block;font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.evt-bar .p b{font-size:1.25rem;font-weight:var(--fw-black);color:var(--text-heading);letter-spacing:var(--ls-heading)}
.evt-bar .ev-btn{height:46px;padding:0 18px;font-size:var(--fs-sm)}
.evt-bar .evt-wa{width:46px;height:46px}
/* The sticky price bar needs clear space below the page too, and like the app
   bar it reserves that space on the FOOTER BAR rather than on <body> — padding
   on the body paints white, and white under a navy footer is the seam this
   used to show. */
@media(max-width:1080px){
  .evt-bar{display:flex}
  .ev-footer__bar{padding-bottom:82px}
}
/* Below 900px the app bar owns the bottom edge, so the price bar stacks on
   top of it and the reserve covers both. This lives here, next to .evt-bar,
   because chrome.css loads earlier in the cascade and would lose. */
@media(max-width:900px){
  .evt-bar{bottom:calc(var(--appbar-h) + env(safe-area-inset-bottom))}
  .ev-footer__bar{padding-bottom:calc(var(--appbar-h) + 82px + env(safe-area-inset-bottom))}
}

/* ---------- 9. SALE PRICING ----------
   A struck-through old price only ever appears beside a real, dated offer.
   The old figure is decorative-weight on purpose: the live price must win
   the eye, and a struck price in full contrast reads as the price. */
.evt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.evt-was{font-size:1rem;font-weight:var(--fw-medium);color:var(--text-muted);
  text-decoration:line-through;text-decoration-thickness:1.5px}
.evt-save{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-sm);
  background:var(--accent-wash);color:var(--ev-navy);font-size:.66rem;font-weight:var(--fw-black);
  letter-spacing:.06em;text-transform:uppercase}
.evt-sale{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-size:.64rem;font-weight:var(--fw-black);letter-spacing:.09em;text-transform:uppercase;
  box-shadow:var(--shadow-accent)}
.evt-sale svg{width:13px;height:13px}

/* ---------- 10. TRAVELLER STEPPER ----------
   Used in the hero search and in every enquiry form. Buttons are 40px so a
   thumb can hit them, and the value is an input so it posts with the form. */
.evt-step{display:flex;align-items:center;gap:4px;height:var(--control-h);padding:0 6px;
  border:1.5px solid var(--control-border);border-radius:var(--control-radius);background:var(--surface)}
.evt-step button{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-sunken);color:var(--ev-navy);
  transition:background var(--dur-fast) var(--ease)}
.evt-step button:hover:not(:disabled){background:var(--ev-navy-14)}
.evt-step button:disabled{opacity:.4;cursor:not-allowed}
.evt-step button svg{width:15px;height:15px}
.evt-step input{width:100%;min-width:0;border:0;background:none;text-align:center;
  font-weight:var(--fw-bold);color:var(--text-heading);-moz-appearance:textfield}
.evt-step input::-webkit-outer-spin-button,
.evt-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.evt-step input:focus{outline:0}