/* ============================================================================
   NAUTIKA · Accounts on the public site
   ----------------------------------------------------------------------------
   The navbar's account control, the sign-in panel, and the My trips page.

   Mobile first throughout: every rule here is written for the narrow viewport
   and widened by min-width queries, rather than written for a desktop and
   clawed back with max-width. Most people book a ferry on a phone, often
   one-handed and often on a poor connection, so the phone layout is the one
   that must be right by default and the one nothing can override by accident.
   ========================================================================== */

/* ---- Navbar account control -------------------------------------------------------------------
   Deliberately never nk-hide-mobile. Whether you are signed in is the one thing the bar has to say
   at a glance, and hiding it behind the hamburger on the width where most visitors are would be
   hiding it from nearly everyone. It sits beside the hamburger at every width. */
.site-account{display:flex;align-items:center;gap:.4rem}

/* Below 380px the label goes and the button becomes its icon: at that width the logo, the account
   control and the hamburger are competing for the whole bar, and a truncated word helps nobody. */
.site-account-signin{white-space:nowrap}
@media(max-width:379px){
  .site-account-signin-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-account-signin,.site-account-guest{padding-left:.6rem;padding-right:.6rem}
}

/* Continuing as a guest: the <span> nautika.account.js puts in the button's place once the visitor
   has answered. It is a span and not a button because there is nothing left here to press, and it
   keeps the button's own .nk-btn.nk-btn-sm classes for their metrics alone — that is what makes the
   two states exactly the same size, rather than two sets of numbers somebody has to keep in step; the
   bar is rendered on every page of a funnel walked page by page, and a label that moved 6px between
   them would twitch at every navigation. Everything that makes a button look pressable is taken back
   off here. .nk-btn-secondary on this yellow bar is already the bar's own colour, so "Sign in" reads
   as icon and label alone too and the two states sit at the same weight. */
.site-account-guest{--_bg:transparent;--_fg:var(--nk-ink);--_bd:transparent;
  box-shadow:none;cursor:default;user-select:none}
.site-account-guest:hover{filter:none;transform:none;box-shadow:none}
.site-account-guest:active{transform:none}
.site-account-guest::after{content:none}   /* the ripple */
/* The tick on the icon is the whole message below 380px, where the label is hidden and the icon is
   all there is: give it the accent so it reads as a state rather than as a person-shaped decoration. */
.site-account-guest .nk-icon{color:var(--nk-primary)}

.site-account-toggle{border:none;min-width:auto;background:none;padding:.3rem;display:flex;align-items:center;gap:.15rem}
/* The framework sizes a dropdown menu at min-width:100% OF ITS TOGGLE, and this toggle is an avatar
   and a caret — about 60px. Left alone the menu comes out ~114px wide and wraps "My trips" and
   "Sign out" onto two lines each, which on a phone is where anyone would first see it. Give it a
   width of its own and keep the items on one line. */
.site-account-menu .nk-dropdown-menu{min-width:11rem}
.site-account-menu .nk-dropdown-item{white-space:nowrap}
.site-account-toggle .nk-avatar{background:var(--nk-primary);color:#fff;font-weight:700}
.site-account-toggle .nk-avatar .material-symbols-outlined{font-size:1.15rem}
.site-account-toggle .nk-caret{color:var(--nk-ink);font-size:1.1rem}
/* The name is a heading for the menu, not a target: it wraps rather than being clipped, because a
   long social-profile name is common and a half-shown one reads as a bug. */
.site-account-name{max-width:14rem;white-space:normal;line-height:1.3}
.site-account-signout{width:100%;border:none;background:none;text-align:left;cursor:pointer}

/* ---- Sign-in panel ------------------------------------------------------------------------------
   On a phone this is a sheet that rises from the bottom, with its controls in the lower half where
   a thumb already is. A dialog centred in the viewport puts its buttons in the one place a hand
   holding the phone cannot comfortably reach. */
.site-signin-backdrop{align-items:flex-end}
.site-signin{width:100%;max-width:none;margin:0;border-radius:var(--nk-radius-lg) var(--nk-radius-lg) 0 0;
  max-height:92vh;display:flex;flex-direction:column}
/* iOS puts a home indicator across the bottom edge; without this the last button sits under it. */
.site-signin-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));overflow-y:auto}

@media(min-width:640px){
  /* From a tablet up it becomes an ordinary centred dialog — there is no thumb-reach problem on a
     device being held in two hands or sitting on a desk. */
  .site-signin-backdrop{align-items:center}
  .site-signin{width:min(26rem,calc(100vw - 2rem));border-radius:var(--nk-radius-lg);max-height:85vh}
  .site-signin-body{padding-bottom:1.25rem}
}

.site-signin-lede{margin:0 0 1rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.5}

.site-signin-pane{display:flex;flex-direction:column;gap:.65rem}

/* Every button in the panel is full-width and at least 48px tall: the WCAG target size, and about
   what a thumb actually needs on glass. */
.site-signin-primary{width:100%;justify-content:center;min-height:3rem}
.site-signin-primary{margin-top:.25rem}

/* Continue as guest. Quiet by design: signing in is what this panel is for, so the three options
   above it lead and this follows. Quiet is not hidden, though — full width, its own 44px target
   (larger than the 40px the providers are pinned to, because nothing constrains this one), and a
   plain readable label. A visitor who does not want an account has to be able to see at a glance
   that they do not need one; burying that would cost bookings, which is the opposite of the point. */
.site-signin-guest{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;padding:.6rem;cursor:pointer;
  color:var(--nk-ink-soft);font-size:var(--nk-text-sm);font-weight:600}
.site-signin-guest:hover,.site-signin-guest:focus-visible{color:var(--nk-ink);text-decoration:underline}

.site-signin-divider{display:flex;align-items:center;gap:.75rem;margin:.5rem 0 .25rem;
  color:var(--nk-ink-soft);font-size:var(--nk-text-xs);text-transform:uppercase;letter-spacing:.06em}
.site-signin-divider::before,.site-signin-divider::after{content:"";flex:1;height:1px;background:var(--nk-line)}

/* ---- Provider buttons -------------------------------------------------------------------------
   Google renders its own button and its appearance is theirs — their brand terms do not allow
   restyling it. So the Facebook button is built to match what Google actually draws. Every value
   below was measured off the rendered element rather than guessed at: 40px tall, a 20px pill
   radius, a #dadce0 hairline, a white ground, an 18px mark inset 12px, and a label that takes the
   remaining space and centres itself in it. (Measure with offsetHeight, not
   getBoundingClientRect — the modal animates in on a transform, and a rect taken mid-flight
   reports 38 and sends you chasing a difference that is not there.)

   The font is Google's own stack because their widget loads Google Sans into the page, so both
   buttons resolve to the same face instead of merely to similar ones. White and #3c4043 are
   hardcoded rather than taken from theme tokens for the same reason the rest of this is: Google's
   button is always light, and a themed neighbour would drift away from it the moment anyone looks
   at the site in dark mode.

   All three sign-in options use this, including our own phone one. 40px is shorter than the 48px
   touch target the rest of this panel keeps to; that is Google's height and there is no taller
   variant, so matching it is the only way the three can agree. Continue as guest is not one of
   these — it sits below them under its own divider, quieter, and keeps a target of its own size
   (.site-signin-guest), since nothing about it is constrained by what Google will draw. */
.site-signin-provider{display:flex;align-items:center;width:100%;height:40px;padding:0 12px;
  border:1px solid #dadce0;border-radius:20px;background:#fff;cursor:pointer;
  font-family:"Google Sans",Roboto,arial,sans-serif;font-size:14px;letter-spacing:.25px;
  transition:background-color .218s,border-color .218s;-webkit-appearance:none;appearance:none}
/* Google's own hover is a 4% tint drawn by an overlay element with this exact transition. */
.site-signin-provider:hover:not(:disabled){background-color:rgba(66,133,244,.04)}
.site-signin-provider:focus-visible{outline:none;background-color:rgba(66,133,244,.12)}
.site-signin-provider:disabled{opacity:.38;cursor:default}
.site-signin-provider-mark{flex:0 0 18px;height:18px;display:flex;align-items:center;justify-content:center}
/* Our own mark — the phone — sits in the same 18px box the providers' marks do. A Material Symbol
   is sized by font-size rather than by width, so it has to be told. It keeps the site's own colour
   while Google's and Facebook's keep theirs: three marks that belong to three different parties,
   in three identical buttons. */
.site-signin-provider-mark .material-symbols-outlined{font-size:18px;line-height:1;
  color:var(--nk-primary,#1a73e8)}
/* flex:1 + centre, so the label centres in what is left after the mark rather than in the button —
   the same slight leftward offset Google's own label has. */
.site-signin-provider-label{flex:1;margin-left:7px;text-align:center;color:#3c4043;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Google draws its own button in here; the container only has to hold its place and centre it. */
.site-signin-google{display:flex;justify-content:center;min-height:40px}
.site-signin-google > iframe{margin:0 auto!important}

.site-signin-back{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;border:none;
  background:none;padding:.4rem .1rem;margin-bottom:.25rem;color:var(--nk-ink-soft);
  font-size:var(--nk-text-sm);font-weight:600;cursor:pointer}
.site-signin-back:hover{color:var(--nk-primary-700)}
.site-signin-back .material-symbols-outlined{font-size:1.1rem}

.site-signin-phone{display:flex;align-items:stretch;gap:.5rem}
.site-signin-cc{display:flex;align-items:center;padding:0 .75rem;border:1px solid var(--nk-line);
  border-radius:var(--nk-radius-sm);background:var(--nk-surface-2,var(--nk-surface));
  color:var(--nk-ink-soft);font-weight:600;white-space:nowrap}
.site-signin-phone .nk-input{flex:1;min-width:0;min-height:3rem;
  /* 16px minimum: anything smaller and iOS Safari zooms the page on focus, which on this panel
     means the sheet jumps and the keyboard covers the button. */
  font-size:max(1rem,var(--nk-text-base))}

.site-signin-help{margin:.15rem 0 .25rem;color:var(--nk-ink-soft);font-size:var(--nk-text-xs)}

.site-signin-code{min-height:3.25rem;font-size:1.5rem;letter-spacing:.5em;text-align:center;
  font-variant-numeric:tabular-nums;padding-left:.5em}

.site-signin-resend{border:none;background:none;padding:.6rem;color:var(--nk-primary-700);
  font-size:var(--nk-text-sm);font-weight:600;cursor:pointer}

.site-signin-error{margin:.75rem 0 0;padding:.6rem .75rem;border-radius:var(--nk-radius-sm);
  background:var(--nk-error-50,rgba(220,38,38,.08));color:var(--nk-error,#b91c1c);
  font-size:var(--nk-text-sm);line-height:1.4}

/* While a request is in flight the panel stops taking input, so a slow connection cannot turn one
   tap into two codes — or two sign-ins. */
.site-signin-busy .site-signin-pane{opacity:.6;pointer-events:none}

/* ---- My trips ----------------------------------------------------------------------------------
   Every rule below is scoped under .trips-page, the class this page's <main> carries. This
   stylesheet is loaded by the layout on EVERY page, so an unscoped page-specific rule is a rule
   applied to the whole site: .trip-leg here silently restyled the search panel's own journey rows
   (Views/Partials/booking/_SearchPanel.cshtml owns that class) and distorted the panel everywhere.
   Site-wide chrome — the account control and the sign-in panel — stays unscoped above; anything
   belonging to one page goes here, under the scope. */

/* The portals' sign-in backdrop (GoNautika.Web.Shared's login.css, .nk-auth): the Nautika-Pro photo
   under the same navy overlay, drifting slowly as if under way. Fixed layers behind the page, so the
   photo stays put while the bookings scroll over it, and scaled past the viewport so the drift never
   shows an edge. isolation keeps the negative z-index inside <main>, behind its content but not behind
   the page's own chrome. Every panel on it is an opaque surface; only the heading sits on the photo. */
.trips-page{position:relative;isolation:isolate;min-height:calc(100vh - 4rem);min-height:calc(100dvh - 4rem);
  padding:1.5rem 0 3rem;background:#04263f}
.trips-page::before,.trips-page::after{content:"";position:fixed;inset:0;pointer-events:none}
.trips-page::before{inset:-6%;z-index:-2;background:#04263f url("/images/npro.jpg") center / cover no-repeat;
  transform-origin:55% 60%;will-change:transform;animation:trips-sail 24s ease-in-out infinite}
.trips-page::after{z-index:-1;background:
  linear-gradient(115deg,rgba(0,22,40,.78) 0%,rgba(0,45,78,.45) 45%,rgba(0,90,155,.30) 100%),
  radial-gradient(120% 80% at 50% 120%,rgba(0,20,40,.65) 0%,transparent 60%)}
@keyframes trips-sail{
  0%,100%{transform:scale(1.10) translate3d(0,0,0) rotate(0deg)}
  25%{transform:scale(1.13) translate3d(-1.2%,.5%,0) rotate(.5deg)}
  50%{transform:scale(1.16) translate3d(-2%,0,0) rotate(0deg)}
  75%{transform:scale(1.13) translate3d(-1.2%,-.5%,0) rotate(-.5deg)}
}
@media(prefers-reduced-motion:reduce){.trips-page::before{animation:none}}
.trips-page .trips-head{margin-bottom:1.25rem;color:#fff;text-shadow:0 1px 12px rgba(0,20,40,.45)}
.trips-page .trips-head h1{margin:0 0 .25rem;font-size:var(--nk-text-2xl);color:#fff}
.trips-page .trips-head p{margin:0;color:rgba(255,255,255,.85);font-size:var(--nk-text-sm)}

/* ---- Upcoming Trips / Past Trips ----
   A tab strip under the heading and the selected list beneath it, both on the page container's own
   edges — so every booking box starts where "My trips" does and ends where the navbar's account
   control does. No padded frame around the list: that would inset the boxes from both. Two equal tabs a thumb can reach on a phone; sized to their labels from a tablet up.
   Named trips-tab, not nk-tab: the framework's .nk-tabs switches panels by descendant and would fight
   this page's own switching. */
.trips-page .trips-layout{display:grid;gap:.85rem}
.trips-page .trips-tabs{display:flex;padding:0 .5rem;border:1px solid var(--nk-line);border-radius:var(--nk-radius-md);
  background:var(--nk-surface);box-shadow:var(--nk-shadow-md,0 8px 24px rgba(0,20,40,.18));overflow:hidden}
.trips-page .trips-tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:3rem;
  padding:.6rem .9rem;border:none;border-bottom:3px solid transparent;background:none;cursor:pointer;
  color:var(--nk-ink-soft);font:inherit;font-weight:600}
.trips-page .trips-tab .material-symbols-outlined{font-size:1.2rem}
.trips-page .trips-tab:hover{color:var(--nk-ink)}
.trips-page .trips-tab:focus-visible{outline:2px solid var(--nk-primary);outline-offset:-2px}
.trips-page .trips-tab.is-active{color:var(--nk-primary);border-bottom-color:var(--nk-primary)}
.trips-page .trips-tab-count{min-width:1.5rem;padding:0 .4rem;border-radius:var(--nk-radius-pill,999px);
  background:rgba(0,0,0,.08);font-size:var(--nk-text-xs);line-height:1.5rem;text-align:center;font-variant-numeric:tabular-nums}
.trips-page .trips-tab.is-active .trips-tab-count{background:var(--nk-primary);color:#fff}
.trips-page .trips-panels{min-width:0}
.trips-page .trips-panel{display:grid;gap:.85rem;outline:none}
.trips-page .trips-panel[hidden]{display:none}

@media(min-width:768px){
  .trips-page .trips-tabs{padding:0 1rem}
  .trips-page .trips-tab{flex:0 0 auto}
}

/* ---- One booking ---- */
.trips-page .trips-booking{border:1px solid var(--nk-line);border-radius:var(--nk-radius-md);background:var(--nk-surface);
  overflow:hidden}
.trips-page .trips-booking.is-open{border-color:var(--nk-primary-200,var(--nk-line));box-shadow:var(--nk-shadow-sm,none)}
.trips-page .trips-booking-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .75rem;padding:.85rem 1rem .5rem}
.trips-page .trips-booking-summary{flex:1 1 16rem;min-width:0;display:grid;grid-template-areas:"ref" "route" "meta";gap:.15rem}
.trips-page .trips-booking-ref{grid-area:ref;font-size:var(--nk-text-xs);color:var(--nk-ink-soft);letter-spacing:.03em}
.trips-page .trips-booking-ref strong{margin-left:.35rem;color:var(--nk-ink);font-family:var(--nk-font-mono,monospace);letter-spacing:0}
.trips-page .trips-booking-route{grid-area:route;font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-lg);color:var(--nk-ink)}
.trips-page .trips-booking-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:.2rem .9rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.trips-page .trips-booking-meta span + span::before{content:"·";margin-right:.9rem;margin-left:-.45rem}
.trips-page .trips-booking-side{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.trips-page .trips-booking-side form{margin:0}
.trips-page .trips-booking-expand{white-space:nowrap}

/* The synopsis — one compact row per PNR, readable without opening the card. */
.trips-page .trips-synopsis{list-style:none;margin:0;padding:0 1rem .85rem;display:grid;gap:.35rem}
.trips-page .trips-chip{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;padding:.45rem .65rem;
  border-radius:var(--nk-radius-sm);background:var(--nk-surface-2,rgba(0,0,0,.03));font-size:var(--nk-text-sm)}
.trips-page .trips-chip-pnr{font-family:var(--nk-font-mono,monospace);font-weight:700;color:var(--nk-ink)}
.trips-page .trips-chip-route{font-weight:600}
.trips-page .trips-chip-when{color:var(--nk-ink-soft);font-variant-numeric:tabular-nums}
.trips-page .trips-chip .nk-badge{margin-left:auto}

.trips-page .trips-booking-body{padding:.9rem 1rem 1rem;border-top:1px solid var(--nk-line);display:grid;gap:.85rem}
.trips-page .trips-booking-body[hidden]{display:none}
.trips-page .trips-detail-skeleton{height:7rem}
.trips-page .trips-detail-empty{text-align:center;color:var(--nk-ink-soft)}
.trips-page .trips-detail-empty p{margin:0 0 .6rem}
.trips-page .trips-detail-note{display:flex;gap:.4rem;margin:0;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.trips-page .trips-detail-note .material-symbols-outlined{font-size:1.1rem}

/* ---- One PNR, the Agency booking-details leg card ---- */
.trips-page .trips-pnr{padding:.85rem;border-radius:var(--nk-radius-sm);background:var(--nk-surface-2,rgba(0,0,0,.025));
  display:grid;gap:.75rem}
.trips-page .trips-pnr-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem}
.trips-page .trips-pnr-main{min-width:0;display:grid;gap:.4rem}
.trips-page .trips-pnr-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.trips-page .trips-mono{font-family:var(--nk-font-mono,monospace)}
.trips-page .trips-pnr-route{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-family:var(--nk-font-display);font-weight:700}
.trips-page .trips-pnr-route .material-symbols-outlined{font-size:1.1rem;color:var(--nk-ink-soft)}
.trips-page .trips-pnr-date{font-family:inherit;font-weight:500;color:var(--nk-ink-soft)}
.trips-page .trips-pnr-facts{display:flex;flex-wrap:wrap;gap:.25rem 1rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.trips-page .trips-pnr-facts > span{display:inline-flex;align-items:center;gap:.25rem}
.trips-page .trips-pnr-facts .material-symbols-outlined{font-size:1rem}
.trips-page .trips-pnr-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.trips-page .trips-pnr-actions .nk-btn{min-height:2.5rem}
/* A rescheduled PNR's can't-cancel warning, above the PNR: a slim strip sized to its sentence rather than
   the design system's full-width alert, which outweighed the trip it annotates. */
.trips-page .trips-pnr-warning{width:fit-content;max-width:100%;margin:0 0 .6rem;padding:.3rem .65rem;gap:.4rem;
  align-items:center;border-radius:var(--nk-radius-sm)}
.trips-page .trips-pnr-warning .nk-icon{font-size:1rem;margin-top:0}
.trips-page .trips-pnr-warning .nk-alert-body{font-size:var(--nk-text-xs)}
.trips-page .trips-pax-table{background:var(--nk-surface)}
.trips-page .trips-pax-cancelled td{opacity:.6}
@media(max-width:639px){
  /* On a phone the actions take the width, as thumb targets. */
  .trips-page .trips-pnr-actions{width:100%}
  .trips-page .trips-pnr-actions .nk-btn{flex:1;justify-content:center}
}

/* ---- The cancel dialog ---- */
.trips-page .trips-cancel{width:min(34rem,calc(100vw - 2rem))}
.trips-page .trips-cancel-lede{margin:0 0 .85rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.trips-page .trips-cancel-loading{margin:0 0 .85rem;color:var(--nk-ink-soft)}
.trips-page .trips-cancel-sums{margin:.75rem 0 0;display:grid;gap:.3rem}
.trips-page .trips-cancel-sums > div{display:flex;justify-content:space-between;gap:1rem}
.trips-page .trips-cancel-sums dt{color:var(--nk-ink-soft)}
.trips-page .trips-cancel-sums dd{margin:0;font-variant-numeric:tabular-nums}
.trips-page .trips-cancel-refund{padding-top:.4rem;border-top:1px solid var(--nk-line);font-weight:800}
.trips-page .trips-cancel-refund dt{color:var(--nk-ink)}
/* The figure the dialog is really asking about, in the emphasis colour the other portals' cancel dialogs
   give it — never the error colour, which would read as a warning about the amount rather than the sum
   coming back. */
.trips-page .trips-cancel-refund dd{color:var(--nk-primary)}
.trips-page .trips-cancel-note{margin:.5rem 0 0;color:var(--nk-ink-soft);font-size:var(--nk-text-xs)}
.trips-page .trips-cancel-field{margin-top:1rem}
.trips-page .trips-cancel-field > label{display:block;margin-bottom:.3rem;font-size:var(--nk-text-sm);font-weight:600}
.trips-page .trips-cancel-field textarea{width:100%;font-size:max(1rem,var(--nk-text-base))}
.trips-page .trips-cancel-hint{margin:.3rem 0 0;color:var(--nk-ink-soft);font-size:var(--nk-text-xs)}
.trips-page .trips-cancel .nk-dropdown-item.nk-disabled{opacity:.55;cursor:not-allowed}
.trips-page .trips-cancel-go{--_bg:var(--nk-error,#b91c1c);--_fg:#fff;--_bd:transparent}

.trips-page .trips-empty{border:1px dashed var(--nk-line);border-radius:var(--nk-radius-md);padding:2rem 1.25rem;
  text-align:center;color:var(--nk-ink-soft);background:var(--nk-surface)}
.trips-page .trips-empty .material-symbols-outlined{font-size:2.5rem;display:block;margin:0 auto .5rem;opacity:.5}
.trips-page .trips-empty p{margin:0 0 1rem}
.trips-page .trips-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trips-page .trips-empty-sm{padding:1.25rem}
.trips-page .trips-empty-sm p{margin:0}