/* =========================================================
   Skiathos Homes — sh-core.css
   Global tokens + base + shared components (nav/footer/logo/modals)
========================================================= */

/* =========================================================
   Skiathos Homes — sh-main.css
   Single Source of Truth (Global + Modules)

   Fonts (enqueue): Playfair Display (head) + Inter (body)
   Gold: #C9AE78

   NOTE:
   - Αυτό είναι GLOBAL design system.
   - Το Off-Market είναι ΜΕΣΑ εδώ αλλά scoped σε .sh-offmarket
   - Fixes για Kadence svg defaults περιλαμβάνονται scoped.
========================================================= */
	/* =========================================
   UNIVERSAL LUXURY SCROLLBAR (ALL BROWSERS)
   ========================================= */

/* 1. Για FIREFOX (Πολύ σημαντικό) */
html {
    scrollbar-width: thin;          /* Λεπτή μπάρα */
    scrollbar-color: #C9AE78 #05080E; /* Χρυσό "χερούλι" - Navy φόντο */
    /* Stop Android/EMUI browsers from auto-inflating text blocks
       (font boosting) — keeps type at designed sizes on Huawei etc. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 2. Για CHROME, EDGE, SAFARI */
::-webkit-scrollbar {
    width: 10px; /* Πλάτος μπάρας */
}

::-webkit-scrollbar-track {
    background: #0A1320; /* Το χρώμα του "αυλακιού" (Navy) */
}

::-webkit-scrollbar-thumb {
    background-color: #C9AE78; /* Το χρώμα της μπάρας (Χρυσό) */
    border-radius: 6px;        /* Στρογγυλεμένες άκρες */
    border: 2px solid #05080E; /* Ένα μικρό περιθώριο (padding) για να φαίνεται πιο κομψό */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #eecf96; /* Πιο ανοιχτό χρυσό όταν το πιάνεις με το ποντίκι */
}
/* =========================================================
   1) TOKENS
========================================================= */
:root{
  --navy:#0f1922;
  --navy-dark:#0A1320;
  --navy-2:#152433;

  --gold:#C9AE78;
  --gold-2:#B49563;
  /* WCAG-readable gold for text/icons on white and ice surfaces. */
  --gold-on-light:#806A3E;

  --white:#FFFFFF;
  --ice:#F6F7FB;

  --s-green:#2ecc71;
  --s-orange:#f39c12;
  --s-red:#ef4444;
	
  --bg-deep: #070D16;
  --bg-deeper: #05090e;
  --bg-glow: #111b2b;
  --text-muted: rgba(255,255,255,.70);
  --line-soft: rgba(255,255,255,.08);

  --text-soft: rgba(255,255,255,.74);
  --line-dark: rgba(255,255,255,.12);
  --line-dark-2: rgba(255,255,255,.08);

	/* Razor line system */
--line-frame-dark: rgba(255,255,255,.12);
--line-frame-dark-soft: rgba(255,255,255,.08);
--line-frame-light: var(--line-2);
--line-frame-light-soft: rgba(17,19,24,.08);

	--topline-gold: linear-gradient(90deg, transparent, rgba(201,174,120,.80), transparent);


  --ink:#111318;
  --text:#4f5561;
  --muted:#6B6F76;

  --line:#E7E1D7;
  --line-2:#E3E6EC;

  --shadow:0 8px 30px rgba(0,0,0,.12);
  --shadow-soft:0 4px 18px rgba(0,0,0,.08);
  --shadow-lux:0 20px 60px rgba(0,0,0,.15);

  --radius:14px;
  --radius-2:18px;

  --max:1140px;

  --font-head:'Playfair Display', serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);

  --focus:0 0 0 3px rgba(201,174,120,.22);
	
  --c-navy: var(--navy);
  --c-navy-dark: var(--navy-dark);
  --c-gold: var(--gold);
  --c-white: var(--white);
  --c-sand: var(--ice);

  --f-serif: var(--font-head);
  --f-sans: var(--font-body);
}

/* Global utility: gold + italic */
.text-gold-it{
  color: var(--gold);
  font-style: italic;
}

.text-gold{
  color: var(--gold);
}

/* =========================================================
   2) BASE RESET
========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; background:#0A1320}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
::selection{background:rgba(201,174,120,.25)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =========================================================
   3) LAYOUT UTILS
========================================================= */
.container{max-width:var(--max);margin-inline:auto;padding-inline:20px}
.section{padding:92px 0}
@media (max-width:700px){.section{padding:76px 0}}

.bg-ice{background:var(--ice)}
.bg-white{background:var(--white)}
.bg-navy{
  background:linear-gradient(135deg,var(--navy-dark),var(--navy));
  color:#fff;
}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy p,.bg-navy li,.bg-navy label{color:#fff}


/* Dark background variant support */
.bg-navy .sh-lead,
.sh-section--navy .sh-lead{
  color:rgba(255,255,255,.86);
}

.accent{color:var(--gold)}
.sr-only{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hr{height:1px;background:var(--line-2);border:0;margin:22px 0}

/* Namespaced utilities (shared/home) */
.sh-tag-gold{
  display:inline-block;
  color:var(--c-gold);
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:0.55rem;
}

.sh-icon-lock{
  font-size:2.5rem;
  color:var(--c-gold);
  margin-bottom:1.5rem;
}

/* =========================================================
   SECTION COMPONENT (shared)
========================================================= */
.sh-section-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 3rem;
}

.sh-badge{
  display:inline-block;
  padding:6px 18px;
  margin-bottom:1rem;
  border:1px solid var(--gold);
  border-radius:0;
  color:#9e8236;
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.7rem;
  font-weight:600;
}

.sh-lead{
  margin:0;
  font-size:1.02rem;
  font-weight:400;
  color:#6B6F76;
}

/* Dark background variant support */
.bg-navy .sh-lead,
.sh-section--navy .sh-lead{
  color:rgba(255,255,255,.86);
}

/* =========================================================
   4) TYPOGRAPHY (GLOBAL)
========================================================= */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--navy);
  font-weight:400;
  line-height:1.2;
}
h1{
	font-size:clamp(2.6rem,5.5vw,4.2rem);
	font-weight:400
}
h2{
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  margin-bottom:.6em;
  position:relative;
}

/* Underline utility (OPT-IN)
   Use: <h2 class="h2-underline">Title</h2>

   Goals:
   - Underline starts from the first character (shrink-to-text).
   - Works in both left + centered sections without shifting layouts.
*/
.h2-underline{
  display:inline-block; /* shrink-to-text + respects parent text-align:center */
  max-width:100%;
}
.h2-underline::after{
  content:"";
  display:block;
  width:120px;
  height:2px;
  margin-top:.65rem;
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-2) 45%,
    rgba(201,174,120,0) 100%
  );
  clip-path: polygon(0 0, 0 100%, 100% 58%, 100% 42%);
  opacity:.95;
}

/* If a kicker/tag sits right before an underlined H2, force the H2 on a new line
   without changing kicker styles globally.
*/
.sh-tag-gold + h2.h2-underline,
.sh-badge + h2.h2-underline,
.own-badge + h2.h2-underline,
.om-tag + h2.h2-underline,
.om-tag-dark + h2.h2-underline{
  display:block;
  width:fit-content;
  max-width:100%;
}

/* Center only where the section is designed to be centered */
#hm-home .hm-local .sh-badge + h2.h2-underline,
#hm-home .hm-sec-head .sh-tag-gold + h2.h2-underline,
#hm-home .hm-services .sh-tag-gold + h2.h2-underline,
#sh-owners .own-logic-head .own-badge + h2.h2-underline,
#om-page .om-hero-content .om-tag + h2.h2-underline,
#om-page .om-auth-content .om-tag-dark + h2.h2-underline,
#om-page .om-auth-content .om-tag + h2.h2-underline{
  margin-left:auto;
  margin-right:auto;
}

/* Left-aligned exceptions */
#hm-home .hm-om-left .sh-tag-gold + h2.h2-underline{
  margin-left:0;
  margin-right:0;
}


h3{font-size:clamp(1.12rem,2.2vw,1.45rem);margin-bottom:.45rem}
p{font-size:1.05rem;color:var(--text)}
small{color:var(--muted)}
.sub{
  display:block;
  font-weight:400;
  color:var(--muted);
  font-size:clamp(.98rem,1.8vw,1.08rem);
  margin-top:.45rem;
}

a:hover{opacity:.98}
ul,ol{padding-left:1.15rem}
li{color:var(--text)}


/* =========================================================
   5) BUTTONS (GLOBAL)
========================================================= */
/* =========================================================
   5) BUTTONS (GLOBAL) - FINAL ROBUST VERSION
========================================================= */

/* 1. Base Reset & Layout (Για να είναι ίδια <a> και <button>) */
.btn,
button.btn,
input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  line-height: 1;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  
  /* Reset Browser/Theme Defaults for <button> */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent;
}

/* ---------------------------------------------------------
   Visible keyboard focus on buttons (WCAG 2.4.7)
   Was missing site-wide: .btn killed the outline with no
   replacement. :focus-visible = keyboard only, mouse stays clean.
--------------------------------------------------------- */
.btn:focus-visible,
button.btn:focus-visible,
input[type="submit"].btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Gold-filled primary: white + navy double ring so focus shows
   on the gold surface and on both light and dark sections. */
.btn-primary:focus-visible,
button.btn-primary:focus-visible,
input[type="submit"].btn-primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px rgba(10, 19, 32, .55);
}

/* ---------------------------------------------------------
   2. PRIMARY BUTTON (Gold) - FORCED
--------------------------------------------------------- */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  /* Το !important εδώ σώζει το hover από το theme */
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%) !important;
  color: var(--navy-dark) !important;
  border: 1px solid transparent !important;
}

/* Hover State */
.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  transform: translateY(-3px);
  color: #000 !important;
  /* Βεβαιωνόμαστε ότι το theme δεν αλλάζει το background στο hover */
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%) !important;
}

/* Shine Effect (δουλεύει και στα δύο) */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: 0.5s;
  z-index: -1;
  pointer-events: none; /* Για να μην ενοχλεί το κλικ */
}
.btn-primary:hover::after {
  left: 100%;
}


/* ---------------------------------------------------------
   3. OUTLINE BUTTON (Dark) - FORCED
--------------------------------------------------------- */
.btn-outline,
button.btn-outline {
  background-color: var(--navy-dark) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: none;
}

.btn-outline:hover,
button.btn-outline:hover {
  background-color: var(--gold) !important;
  color: var(--navy-dark) !important;
  border-color: var(--gold) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ---------------------------------------------------------
   4. Small Modifier (Menu/Nav)
--------------------------------------------------------- */
.btn-sm {
  padding: 10px 20px !important;
  font-size: 0.75rem !important;
  border-radius: 4px;
}
/* =========================================================
   7) FORMS (GLOBAL default - light)
========================================================= */
/* The legacy LIGHT-theme .control lived here: white background, --ink text,
   --line-2 border, 15px. It was invisible for as long as the global !important
   block above it existed, so nobody noticed it no longer matched the site.

   It cannot simply be left in place now that the !important is gone. `.control`
   is (0,1,0) and beats a bare `select` (0,0,1), so on the two dark forms that
   use the class — Off-Market and Owners, the only two in the codebase — every
   <select class="control"> rendered as a WHITE box on a navy card. Verified in
   the browser before removing, not assumed.

   Deleted rather than recoloured: `.control` is now purely a JS/layout hook
   (sh-offmarket.js keys off it), and its appearance comes from the shared field
   system, like every other field on the site. The invalid state it used to
   carry is provided per-form by .sh-offmarket .control.invalid. */
.err{
  display:none;
  color:#C0392B;
  font-size:.86rem;
  line-height:1.35;
  margin-top:4px;
}
.err.show{display:block}



/* =========================================================
HEADER / NAV (Skiathos Homes)
========================================================= */
.sh-skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.sh-skip:focus{
  left:14px; top:14px; width:auto; height:auto;
  padding:10px 12px; border-radius:12px;
  background:#fff; color:var(--navy);
  z-index:9999;
}

/* Skip-link target: inert, zero-impact focus anchor injected at the start
   of <main> on pages whose <main> already carries a styling/JS id
   (e.g. #sh-home-v31, #archScroll). Lets "Skip to content" land in the
   main region without colliding with those ids. */
.sh-skip-target{
  position:absolute;
  width:0; height:0;
  overflow:hidden;
}
.sh-skip-target:focus{ outline:none; }

/* =========================================================
   AJAX form feedback + labels (sh-forms.js / lead pipeline)
   Theme-agnostic: text inherits surrounding colour where possible.
========================================================= */
/* Field label — the property request form's label, promoted to the shared one.
   .sh-form-label is the name sh-single.css uses; both are listed so a module can
   use either without a third variant appearing. Was .78rem/500/sentence case,
   which made Contact and /land/ read differently from every other form.

   Colour is left as inherited-plus-opacity rather than a hardcoded white alpha,
   preserving the original rule's deliberate theme-agnosticism — .54 over white
   text resolves to the same rgba(255,255,255,.54) the property form uses, but
   this still behaves if a label ever lands on a light section. */
.sh-label,
.sh-form-label{
  display:block;
  margin:0 0 7px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.54;
}
/* "optional" inside an uppercase label — kept lowercase so it reads as an aside
   rather than as part of the field name. This is the site's ONLY required/optional
   marker: required fields carry no asterisk (locked 2026-08-31). */
.sh-opt{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.72; }

.sh-form-status{
  margin:0 0 14px;
  padding:11px 14px;
  border-radius:8px;
  font-size:.92rem;
  line-height:1.45;
}
.sh-form-status.is-err{
  color:#ff6b6b;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.40);
}
.sh-form-success{
  padding:22px 20px;
  border-radius:10px;
  background:rgba(46,204,113,.10);
  border:1px solid rgba(46,204,113,.35);
  line-height:1.55;
}
.sh-form-success strong{
  color:var(--gold);
  font-family:var(--font-head);
  font-size:1.15rem;
}

/* =========================================================
   Owners: selected-files manager + upload progress
   (neutral colours so it reads on light and dark cards)
========================================================= */
.owner-files{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.owner-files__item{
  padding:10px 12px;
  border:1px solid rgba(127,127,127,.30);
  border-radius:8px; font-size:.85rem;
  min-width:0; max-width:100%;
}
.owner-files__top{ display:flex; align-items:center; gap:10px; min-width:0; }
.owner-files__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.owner-files__size{ flex:0 0 auto; opacity:.6; font-size:.78rem; }
.owner-files__remove{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  border:0; background:none; cursor:pointer; padding:4px 7px; border-radius:6px;
  color:inherit; opacity:.6; font-size:.78rem;
  transition:opacity .15s, background .15s;
}
.owner-files__remove:hover{ opacity:1; background:rgba(127,127,127,.14); }
.owner-files__remove:disabled{ opacity:.3; cursor:default; background:none; }
.owner-files__remove svg{ width:14px; height:14px; }

.owner-files__progress{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.owner-files__track{
  flex:1 1 auto; min-width:0; height:5px; border-radius:999px; overflow:hidden;
  background:rgba(127,127,127,.22);
}
.owner-files__fill{ height:100%; width:0; border-radius:999px; background:var(--gold); transition:width .25s ease; }
.owner-files__item.is-error .owner-files__fill{ background:#ff6b6b; }
.owner-files__status{ flex:0 0 auto; font-size:.74rem; letter-spacing:.02em; opacity:.6; min-width:78px; text-align:right; }
.owner-files__status.is-uploading{ color:var(--gold); opacity:1; }
.owner-files__status.is-uploaded{ color:#2ecc71; opacity:1; }
.owner-files__status.is-error{ color:#ff6b6b; opacity:1; }
.owner-file-note{ margin:8px 0 0; font-size:.82rem; color:#ff6b6b; }

.owner-upload{ margin:8px 0 14px; }
.owner-upload__msg{ margin:0 0 8px; font-size:.85rem; opacity:.9; }
.owner-progress{
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(127,127,127,.22);
}
.owner-progress__bar{
  height:100%; width:0; border-radius:999px;
  background:var(--gold); transition:width .2s ease;
}
.owner-progress__pct{ display:inline-block; margin-top:4px; font-size:.78rem; opacity:.75; }

.sh-navwrap{
  position:sticky; top:0; z-index:999;
  background:rgba(7,13,22,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sh-navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.sh-brand{ text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.sh-brand-top{
  font-family:var(--font-head);
  color:#fff; font-weight:700; letter-spacing:.2px;
  font-size:1.05rem;
}
.sh-brand-bottom{
  font-family:var(--font-body);
  color:var(--gold);
  font-weight:800;
  letter-spacing:.28em;
  font-size:.72rem;
  margin-top:4px;
}
.sh-navlinks{
  display:flex; align-items:center; gap:18px;
}
.sh-navlinks a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  padding:10px 8px;
  border-radius:12px;
  transition:.25s var(--ease);
}
.sh-navlinks a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sh-navlinks a.is-active,
.sh-drop.is-active > .sh-dropbtn{
  color:#fff;
  background:rgba(201,174,120,.14);
  box-shadow:0 0 0 1px rgba(201,174,120,.22) inset;
}

.sh-nav-cta{ margin-left:6px; padding:0.95rem 1.1rem; }

/* Burger */
.sh-burger{
  display:none;
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
}
.sh-burger:focus{ outline:none; box-shadow:var(--focus); }
.sh-burger-lines{
  width:18px; height:12px; position:relative; display:block;
}
.sh-burger-lines::before,
.sh-burger-lines::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; border-radius:2px;
  background:#fff;
}
.sh-burger-lines::before{ top:0; }
.sh-burger-lines::after{ bottom:0; }

/* Dropdown */
.sh-drop{ position:relative; }
.sh-dropbtn{
  border:0; background:transparent;
  color:rgba(255,255,255,.86);
  font-weight:800;
  font-size:.95rem;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:.25s var(--ease);
}
.sh-dropbtn:hover{ color:#fff; background:rgba(255,255,255,.06); }
.sh-caret{
  display:inline-block;
  width:10px; height:10px;
  margin-left:6px;
  border-right:2px solid rgba(255,255,255,.6);
  border-bottom:2px solid rgba(255,255,255,.6);
  transform:rotate(45deg) translateY(-1px);
}

.sh-dropmenu{
  position:absolute; top:46px; left:0;
  min-width:190px;
  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:8px;
  display:none;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.sh-dropmenu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color:#fff;
}
.sh-dropmenu a:hover{ background:rgba(255,255,255,.08); }

.sh-drop.is-open .sh-dropmenu{ display:block; }

/* Desktop: open on hover too (nice + fallback) */
@media (min-width: 901px){
  .sh-drop:hover .sh-dropmenu,
  .sh-drop:focus-within .sh-dropmenu{ display:block; }
}

/* Mobile nav drawer */
@media (max-width: 900px){
  .sh-burger{ display:inline-flex; }
  .sh-navlinks{
    position:fixed;
    top:70px; left:14px; right:14px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    border-radius:18px;
    background:rgba(0,0,0,.92);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .sh-navwrap.is-open .sh-navlinks{ display:flex; }
  .sh-nav-cta{ width:100%; text-align:center; margin-left:0; }
  .sh-dropmenu{ position:static; min-width:unset; background:transparent; border:0; padding:0; box-shadow:none; }
}
/* =========================================================
   FOOTER (Compact Luxury - Updated)
========================================================= */
.sh-footer {
  background-color: var(--navy-dark);
  color: #fff;
  padding: 45px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* --- Main Grid --- */
.sh-footer-main {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);   /* brand + 4 στήλες (25/09) */
  gap: 30px;
  margin-bottom: 30px;
}

@media (max-width: 900px) {
  .sh-footer-main {
    grid-template-columns: repeat(2, 1fr);        /* 2×2 κάτω από το brand */
    gap: 30px 18px;
  }
}


/* --- Brand Column --- */
.sh-foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 600px) { .sh-foot-brand { align-items: center; } }

.sh-logo-foot {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  margin-bottom: 0.8rem;
  line-height: 1;
}
.sh-logo-foot .brand-serif {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
}
.sh-logo-foot .brand-sans {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.sh-foot-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.2rem;
}

/* Contact Stack (WhatsApp + Email) */
.sh-foot-contact {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Κενό ανάμεσα στα κουμπιά */
  align-items: flex-start;
}
@media (max-width: 600px) { .sh-foot-contact { align-items: center; } }

.foot-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 3px;
  transition: all 0.3s ease;
}
.foot-link-icon:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.foot-link-icon i { color: var(--gold); font-size: 1rem; }

/* --- Nav Columns --- */
.sh-foot-nav {
  display: flex;
  flex-direction: column;
}

.sh-foot-head {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 0.8rem 0;
  opacity: 0.9;
}

.sh-foot-nav nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Link + animated gold underline that grows from the left on hover */
.sh-foot-nav a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
  transition: color 0.25s ease;
}
.sh-foot-nav a::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.65;
  flex-shrink: 0;
  transition: width 0.25s ease, margin-right 0.25s ease;
}
.sh-foot-nav a:hover {
  color: #fff;
}
.sh-foot-nav a:hover::before {
  width: 12px;
  margin-right: 7px;
}

/* --- Bottom --- */
.sh-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}
/* =========================================================
   MOBILE DISPLAY ADJUSTMENTS (< 600px)
========================================================= */
@media (max-width: 900px) {
  /* Tablet + mobile: brand full-width on top, then the 4 categories
     (Explore · Guides · The Firm · Legal) as a 2×2 grid.
     Grid is set to repeat(2,1fr) by the rule above. */
  .sh-footer-main {
    text-align: center;
    align-items: start; /* top-align the 3 columns so headings line up */
  }

  /* Brand spans the full width, centered */
  .sh-foot-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 24px;
    margin-bottom: 6px;
  }

  .sh-foot-desc {
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Contact buttons side by side */
  .sh-foot-contact {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
  }

  /* Center the heading AND every link under it, within each column */
  .sh-foot-nav {
    align-items: stretch;   /* fill the column width */
    text-align: center;
  }

  .sh-foot-head {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.7rem;
    text-align: center;
  }

  .sh-foot-nav nav {
    gap: 8px;
    align-items: stretch;
  }

  /* Simple block links on touch (no hover line), centered */
  .sh-foot-nav a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .sh-foot-nav a::before { display: none; }

  /* Footer Bottom */
  .sh-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    font-size: 0.68rem;
  }
}

/* Μικρά κινητά: με 2×2 δεν χρειάζεται πια να μικραίνουν τα γράμματα για να
   χωρέσουν τρεις στήλες σε μία σειρά (ήταν 0.7rem links / 0.55rem τίτλοι). */
@media (max-width: 460px) {
  .sh-footer-main { gap: 26px 12px; }
  .sh-foot-head   { font-size: 0.62rem; letter-spacing: 0.14em; }
  .sh-foot-nav nav { gap: 9px; }
  .sh-foot-nav a  { font-size: 0.82rem; line-height: 1.35; }
}
.sh-discretion-note {
  font-family: var(--font-head);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* =========================================================
   SHARED HERO SCROLL CUE (used on home + circle)
   Behaviour: [data-scroll-next] handler in sh-motion.js.
   owners / about / off-market keep their own page-prefixed styles.
========================================================= */
.sh-scroll-cue {
  position: absolute;
  bottom: clamp(28px, 4vh, 44px);
  right: clamp(20px, 4vw, 40px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}
.sh-scroll-cue__track {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.14);
  display: block;
  position: relative;
  overflow: hidden;
}
.sh-scroll-cue__thumb {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: var(--gold);
  animation: shScrollCue 2.2s ease-in-out infinite;
}
@keyframes shScrollCue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.sh-scroll-cue__label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  writing-mode: vertical-rl;
}
@media (max-width: 600px) {
  .sh-scroll-cue { right: 16px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-scroll-cue__thumb { animation: none; }
}

/* =========================================================
   6) DIVIDERS + LOGO
========================================================= */

/* Gold divider under title (hero luxury divider) */
.sh-gold-divider{
  position: relative;
  padding-bottom: 2.2rem;
}
.sh-gold-divider::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.85rem;
  transform:translateX(-50%);
  width:220px;
  max-width:70%;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.95;
}

/* LOGO -------------------------------------------- */

/* Skiathos HOMES wordmark */
.sh-logo{
  --sh-logo-white:#FFFFFF;
  --sh-logo-gold:#C9AE78; /* βάλε εδώ το gold που χρησιμοποιείς ήδη */

  display:inline-flex;
  align-items:baseline;
  gap:0.38rem;
  line-height:1;
  white-space:nowrap;
}

.sh-logo__skiathos{
  font-family:'Playfair Display', serif;
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--sh-logo-white);
  font-size:1.4rem; /* ρύθμισέ το για header */
}

.sh-logo__dot{
  color:var(--sh-logo-gold);
  font-size:1rem;
  line-height:1;
  transform:translateY(-0.08em); /* οπτικό baseline fix */
  opacity:0.95;
}

.sh-logo__homes{
  font-family:'Inter', 'Mulish', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--sh-logo-gold);
  font-size:1.2rem;
}

/* Hover (διακριτικό, όχι τσίρκο) */
.sh-logo:hover .sh-logo__homes{ filter:brightness(1.1); }
.sh-logo:hover .sh-logo__dot{ filter:brightness(1.1); }

/* ==============================
   Premium tapered underline for H2
============================== */
/* =========================================================
   8) GLOBAL CONSISTENCY (The "Fix")
   Ομοιομορφία για Inputs και Menu ώστε να ταιριάζουν με τα κουμπιά
========================================================= */

/* --- A. GLOBAL NAV MENU HOVER (Glow & Underline) --- */
/* Σβήνουμε το παλιό "κουτί" και βάζουμε λάμψη */
.sh-navlinks a,
.sh-dropbtn {
    background: transparent !important; /* Όχι πια γκρι κουτιά */
    position: relative;
    transition: all 0.3s var(--ease);
}

.sh-navlinks a:hover,
.sh-dropbtn:hover,
.sh-navlinks a.is-active {
    color: var(--gold) !important;
    text-shadow: 0 0 12px rgba(201, 174, 120, 0.6); /* Η ίδια λάμψη με το btn-primary */
    background: transparent !important;
}

/* Η χρυσή γραμμή που ανοίγει από το κέντρο */
.sh-navlinks a::after {
    content: '';
    position: absolute;
    bottom: 5px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 1px;
    background: var(--gold);
    transition: 0.3s var(--ease);
    opacity: 0;
}

.sh-navlinks a:hover::after {
    width: 60%; /* Πόσο μεγάλη θα είναι η γραμμή */
    opacity: 1;
}


/* =========================================================
   B. GLOBAL INPUT FIELDS — one system for every form
   ---------------------------------------------------------
   This block used to force every field on the site into a "luxury line"
   (transparent, bottom-border only) using !important on background, border,
   border-radius, colour, font-size and padding.

   Because !important beats specificity, that made the field styling written in
   the page modules UNREACHABLE. Verified live on 2026-08-31: the boxed fields
   in sh-offmarket.css (filled background, 1px frame, 48px height, gold select
   chevron) never rendered once — the Off-Market selects computed to a bare
   underline with `appearance:none` and no chevron, i.e. they looked exactly
   like text inputs and gave no sign they were dropdowns. Meanwhile the property
   request form clawed its own look back by putting !important on every single
   declaration (sh-single.css .sh-rq-pane .sh-form). That is an arms race, not a
   design system.

   So the property form's appearance — the most finished one — is promoted here
   to BE the shared system, and the !important is dropped so a module can extend
   it normally. Values are copied from sh-single.css:4211 deliberately, so the
   two agree by construction rather than by coincidence.

   NOTE FOR ANYONE EDITING A FORM MODULE: you no longer need !important to style
   a field. If you find yourself reaching for it, the rule you are fighting is
   probably one you should be deleting instead.
========================================================= */

/* input:not([type]) is load-bearing, not defensive. An <input> with no type
   attribute behaves as text but does NOT match input[type="text"], and the
   Owners form has four such fields (owner_name, owner_phone, location, price).
   They were therefore never matched by this block — which is why that form
   rendered its type-less fields at .92rem while its email/select/textarea sat
   at 1rem, two different type sizes inside one form. Verified in the browser
   before adding this line. */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
/* url added: the property clearance form has a LinkedIn/website field that was
   getting raw browser styling because it was missing from this list.
   search deliberately NOT added — nothing on the site uses it, and claiming it
   would restyle any WordPress search block on a light page to dark-on-light. */
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;

    color: #fff;
    /* Explicit, not left to follow `color`: the caret is the one part of a field
       the user watches while typing, and it must never be able to go dark on a
       dark field because some other rule won the `color` cascade. */
    caret-color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    padding: 13px 15px;

    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: none;
}

textarea { resize: vertical; min-height: 90px; }

/* Native select arrow replaced by the brand chevron. Both halves must travel
   together: appearance:none removes the OS arrow, so if the background-image
   is ever lost the control becomes indistinguishable from a text field. That
   is precisely what the old !important block did to the Off-Market selects. */
select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C9AE78' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
/* The open dropdown list is painted by the OS, not by us — without this the
   options render as white-on-white on the dark fields. */
select option { color: var(--ink); background: #fff; }

/* Placeholders are hints, not labels: sentence case, no tracking.
   (Was uppercase + 1px letter-spacing, which read as a second set of labels
   and made forms that use placeholders AS labels look like shouting.) */
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.34);
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
}

/* ── Focus ──
   The selector list is spelled out attribute-by-attribute rather than written as
   the short `input:focus`, and that is the whole point of it. Kadence ships:

       input[type=text]:focus, input[type=email]:focus, … {
           color: var(--global-palette3);   ← a DARK colour
       }

   which is (0,2,1). A plain `input:focus` is only (0,1,1) and loses to it, so
   the field text and the caret both turned near-black the moment the field was
   focused and snapped back to white on blur. Matching the attribute selectors
   brings this to (0,2,1) as well, and because sh-core.css is enqueued after the
   parent theme (position 12 vs 5, verified in the browser) the tie resolves in
   our favour — no !important needed.

   This is the one thing the old !important block was quietly doing that nothing
   else replaced when it was removed. It is also why the symptom differed per
   form: Off-Market's -webkit-text-fill-color kept the TEXT white but not the
   caret, and the property form's `color:#fff !important` kept both.

   caret-color is set explicitly rather than left to inherit from `color`, so the
   cursor can never drift dark again on its own. */
input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    color: #fff;
    caret-color: #fff;
    border-color: var(--gold);
    background-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(201, 174, 120, 0.15);
    outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Browser autofill ──
   NOTE: this is NOT what caused the reported "black text while typing" — that
   was the focus-cascade problem handled above, where Kadence's
   input[type=…]:focus rule out-specified ours and applied a near-black colour.
   This block is a separate, genuine issue kept on its own merits.

   Chrome/Safari paint autofilled fields with their own near-white background and
   BLACK text through a privileged style that ordinary `color` and `background`
   declarations cannot touch. On a dark form an autofilled address or email would
   otherwise render dark-on-dark.

   Two specific mechanisms are needed, and neither is optional:

   1. -webkit-text-fill-color is the ONLY property that overrides the forced
      autofill text colour. Plain `color` is ignored.
   2. The forced background is applied via a transition, so giving that
      transition an effectively infinite duration means it never arrives and our
      own background stays. This is preferred over the usual
      `box-shadow: 0 0 0 100px <colour> inset` trick, which needs an OPAQUE
      colour — impossible here, because the field fill is translucent
      (rgba(255,255,255,.05)) and sits on four different card surfaces.

   :autofill is the standard selector; the -webkit- form is kept for older
   Safari. They are listed as separate rules on purpose — combining them makes
   the whole selector list invalid in any browser that knows only one of them. */
/* ── Invalid field ──
   One error appearance for every form on the site, keyed off aria-invalid so the
   visual state and the state announced to screen readers can never disagree.
   Specificity is (0,2,1) to match the base rule and stay ahead of the parent
   theme, the same reason the focus rule spells its selectors out. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, .60);
    background-color: rgba(239, 68, 68, .06);
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    border-color: rgba(239, 68, 68, .85);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

/* ── iOS: stop the page zooming when a field is tapped ──
   Mobile Safari zooms the viewport in on focus whenever the focused control's
   font-size is under 16px, and then does NOT zoom back out — which is the small
   lurch-and-magnify the owner described when tapping into the Off-Market form.
   Our fields are 0.95rem = 15.2px, i.e. 0.8px under the threshold.

   The usual "fix" of adding maximum-scale=1 / user-scalable=no to the viewport
   meta is deliberately NOT used: it also blocks deliberate pinch-zoom, which
   people with low vision rely on, and it fails WCAG 1.4.4.

   16px is therefore set on touch devices only, so the desktop type scale is
   untouched. Targeted with hover:none + pointer:coarse rather than a width
   breakpoint, because the trigger is the input method, not the screen size. */
@media (hover: none) and (pointer: coarse) {
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        /* !important is intentional here: the legacy property modal still has
           module-level !important typography. Focus zoom is a viewport/accessibility
           bug, so no visual module may lower a touch control below 16px. */
        font-size: 16px !important;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
textarea:autofill,
select:autofill {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 600000s 0s, color 600000s 0s;
}


/* =========================================================
   MOBILE: Left-align all section headings + over/sub titles site-wide
========================================================= */
@media (max-width: 768px){

  /* H2 headings */
  h2{
    text-align: left !important;
  }

  /* Your typical over-titles / badges / subtitles (site-wide) */
  .sh-tag-gold,
  .sh-badge,
  .hm-subtitle,
  .sub,
  .om-tag,
  .om-tag-dark,
  .abt-pre-title{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* If you use underline utility on H2, keep it starting from first letter */
  .h2-underline{
    margin-left: 0 !important;
    margin-right: auto !important;
  }


}

/* =========================================================
   PRIVATE ACCESS TERMS — inline note (sh_terms_note())
   Shared component: property-specific clearance forms. Replaces the
   standalone /nda/ acceptance step.
   Dark surfaces only — both hosts render on navy.
========================================================= */
.sh-terms-note{
  position: relative;
  margin: 22px 0 18px;
  padding: 22px;
  border: 1px solid rgba(201,174,120,.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(201,174,120,.12), transparent 36%),
    rgba(201,174,120,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.sh-terms-note::before{
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}
.sh-terms-note__head{
  display: flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  padding: 6px 9px;
  border: 1px solid rgba(201,174,120,.2);
  border-radius: 999px;
  background: rgba(201,174,120,.075);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.sh-terms-note__head i{ font-size: .7rem; }

.sh-terms-note__title{
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.24rem, 2vw, 1.48rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
}

.sh-terms-note__intro{
  margin: 9px 0 0;
  max-width: 48ch;
  font-size: .82rem;
  line-height: 1.62;
  color: rgba(255,255,255,.68);
}

.sh-terms-note__details{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(5,9,14,.22);
}
.sh-terms-note__details summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  list-style: none;
  cursor: pointer;
}
.sh-terms-note__details summary::-webkit-details-marker{ display: none; }
.sh-terms-note__details summary:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.sh-terms-note__summary-copy{
  display: grid;
  gap: 3px;
}
.sh-terms-note__summary-title{
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.sh-terms-note__summary-meta{
  font-size: .67rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: rgba(201,174,120,.76);
}
.sh-terms-note__chevron{
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(201,174,120,.28);
  border-radius: 50%;
  color: var(--gold);
}
.sh-terms-note__chevron i{
  flex: 0 0 auto;
  font-size: .62rem;
  transition: transform .2s ease;
}
.sh-terms-note__details[open] .sh-terms-note__chevron i{ transform: rotate(180deg); }

.sh-terms-note__list{
  list-style: none;
  margin: 0;
  padding: 16px 14px 0;
  display: grid;
  gap: 12px;
}
.sh-terms-note__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sh-terms-note__icon{
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  place-items: center;
  border-radius: 7px;
  background: rgba(201,174,120,.1);
  color: var(--gold);
  font-size: .68rem;
}
.sh-terms-note__t{
  display: block;
  margin-bottom: 2px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}
.sh-terms-note__d{
  display: block;
  font-size: .74rem;
  line-height: 1.55;
  color: rgba(255,255,255,.57);
}

.sh-terms-note__reassurance{
  display: flex;
  gap: 9px;
  margin: 16px 14px 14px;
  padding: 11px 12px;
  border: 1px solid rgba(81,178,129,.16);
  border-radius: 7px;
  background: rgba(81,178,129,.055);
  font-size: .72rem;
  line-height: 1.55;
  color: rgba(255,255,255,.64);
}
.sh-terms-note__reassurance i{
  flex: 0 0 auto;
  margin-top: .2em;
  color: #7fc79d;
}
.sh-terms-note__reassurance strong{
  color: rgba(255,255,255,.9);
}

.sh-terms-note__agree{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(201,174,120,.25);
  border-radius: 8px;
  background: rgba(201,174,120,.075);
  font-size: .83rem;
  font-weight: 500;
  line-height: 1.48;
  color: rgba(255,255,255,.91);
  cursor: pointer;
}
.sh-terms-note__agree:focus-within{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,174,120,.14);
}
.sh-terms-note__agree input[type="checkbox"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}

.sh-terms-note__fine{
  margin: 11px 2px 0;
  font-size: .68rem;
  line-height: 1.62;
  color: rgba(255,255,255,.47);
}
.sh-terms-note__fine a{
  color: rgba(201,174,120,.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sh-terms-note__fine a:hover{ color: var(--gold); }

@media (max-width: 560px){
  .sh-terms-note{ padding: 18px 16px; }
  .sh-terms-note__title{ font-size: 1.2rem; }
  .sh-terms-note__intro{ font-size: .8rem; }
  .sh-terms-note__details summary{ padding: 12px; }
  .sh-terms-note__list{ padding: 14px 12px 0; }
  .sh-terms-note__reassurance{ margin: 14px 12px 12px; }
}