/* ============================================================
   PROPERTY FORM — IONIAN LUXURY override
   Load AFTER assets/css/corfuguestapp-questionnaire.css
   Re-skins to match the guest app. Reuses existing classes,
   so all dynamic parts (instructions w/ image upload,
   amenities, appliances, nearby, shops, beaches) keep working.
   Scoped to THIS page only (separate file).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* palette → app's Ionian sea + warm gold */
  --sea:#1f86bf; --sea2:#0a5b88; --sea-bright:#39a8da; --sea-deep:#073f5f; --sea3:#eaf5fc; --sea-ink:#0d4d72;
  --sea-glow:rgba(31,134,191,.18);
  --deep:#0d3a57; --ink:#15202e; --mid:#3a5268; --muted:#5d6a7c; --pale:#aebfd0; --line:#e3ebf2; --bg:#f1f7fb;
  --coral:#e2433c; --coral-bg:#fdeeec; --teal:#0e9aa0; --gold:#d98a1e; --gold1:#f0b44a; --green:#0f8a4f; --grn1:#34cf86;
  /* fonts → Literata (display) + Manrope (ui), both with Greek */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Literata',Georgia,'Times New Roman',serif;
  --shadow-sm:0 1px 2px rgba(13,77,114,.06), 0 4px 12px rgba(13,77,114,.07);
  --shadow:0 2px 6px rgba(13,77,114,.06), 0 18px 40px rgba(13,77,114,.12);
  --shadow-lg:0 4px 10px rgba(13,77,114,.08), 0 30px 60px rgba(13,77,114,.18);
  --glow-sea:0 10px 26px rgba(31,134,191,.40);
}

/* ---------- canvas ---------- */
body{
  background:
    radial-gradient(1100px 520px at 82% -6%, rgba(57,168,218,.16), transparent 60%),
    radial-gradient(900px 460px at -8% 2%, rgba(240,180,74,.12), transparent 58%),
    linear-gradient(180deg,#fbfcfe,#eef3f7) !important;
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}

/* ---------- header (frosted) ---------- */
.header{
  background:rgba(255,255,255,.72)!important; -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.6)!important; box-shadow:0 6px 22px rgba(13,77,114,.06)!important;
}
.brand{font-weight:800!important; color:var(--deep)!important}
.brand-mark{box-shadow:var(--shadow-sm)!important}
.header-badge{
  background:linear-gradient(180deg,#eef6fb,#e3f0f8)!important; color:var(--sea-ink)!important;
  border:1px solid rgba(31,134,191,.18); font-weight:700!important; letter-spacing:.04em;
}
.lang-switch{box-shadow:var(--shadow-sm)!important}
.lang-btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s !important}
.lang-btn.active{background:linear-gradient(135deg,var(--sea),var(--sea2))!important; box-shadow:var(--glow-sea)!important; transform:scale(1.06)}
.lang-btn:active{transform:scale(.9)}

/* ---------- hero ---------- */
.hero-eyebrow{
  background:linear-gradient(180deg,#eef6fb,#e3f0f8)!important; border:1px solid rgba(31,134,191,.2);
  color:var(--sea)!important; font-weight:800!important; letter-spacing:.12em!important;
}
.hero h1{
  font-family:var(--display)!important; font-weight:600!important; letter-spacing:-.02em; line-height:1.12!important;
  background:linear-gradient(120deg,var(--sea-deep),var(--sea) 58%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:6px;
}
.hero h1 em{font-style:italic; -webkit-text-fill-color:transparent}
.hero p{color:var(--mid)!important}

/* ---------- section cards ---------- */
.section{
  border-radius:26px!important; border:1px solid rgba(231,236,242,.9)!important; box-shadow:var(--shadow)!important;
  background:linear-gradient(180deg,#ffffff,#fcfdfe)!important; position:relative;
  animation:qRise .5s cubic-bezier(.2,.8,.2,1) both;
}
.section::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.section:nth-of-type(1){animation-delay:.03s} .section:nth-of-type(2){animation-delay:.06s}
.section:nth-of-type(3){animation-delay:.09s} .section:nth-of-type(4){animation-delay:.12s}
@keyframes qRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.section-title{font-family:var(--display)!important; font-weight:600!important; font-size:20px!important; color:var(--ink)!important; letter-spacing:-.01em}
.section-sub{color:var(--muted)!important}

/* section icons → gradient medallions + white glyph */
.section-icon{border-radius:14px!important; color:#fff!important; box-shadow:0 8px 20px rgba(13,77,114,.18)!important}
.section-icon svg{stroke:#fff!important; color:#fff!important}
.section-icon.blue  {background:linear-gradient(135deg,#5db8ee,#1f6fb0)!important}
.section-icon.coral {background:linear-gradient(135deg,#ff7a72,#e2433c)!important}
.section-icon.teal  {background:linear-gradient(135deg,#34cdd0,#0e9aa0)!important}
.section-icon.gold  {background:linear-gradient(135deg,#f0b44a,#d98a1e)!important}
.section-icon.green {background:linear-gradient(135deg,var(--grn1),var(--green))!important}
.section-icon.purple{background:linear-gradient(135deg,#9a8cf0,#6a59d6)!important}

/* ---------- inputs ---------- */
input[type=text],input[type=tel],input[type=url],input[type=email],input[type=time],select,textarea,.nearby-input{
  background:#fff!important; border:1.6px solid var(--line)!important; border-radius:13px!important;
  transition:border-color .2s, box-shadow .2s !important;
}
input:focus,select:focus,textarea:focus,.nearby-input:focus{border-color:var(--sea)!important; box-shadow:0 0 0 4px rgba(31,134,191,.14)!important}
label{color:var(--deep)!important; font-weight:700!important}
.map-note{background:linear-gradient(120deg,#eef7fd,#f7fbfe)!important; border:1px solid rgba(31,134,191,.16)!important; color:var(--sea-ink)!important; border-radius:13px!important}
.map-note svg{stroke:var(--sea)!important}

/* ---------- panels rounder + lift ---------- */
.arrival-item,.instruction-row,.appliance-block,.nearby-item{border-radius:14px!important}
.instruction-num{background:linear-gradient(135deg,var(--sea),var(--sea2))!important; box-shadow:0 4px 10px rgba(31,134,191,.3)}
.upload-btn:hover,#profileUploadBtn:hover,#logoUploadBtn:hover{border-color:var(--sea)!important; color:var(--sea)!important; background:var(--sea3)!important}
.appliance-header{background:linear-gradient(180deg,#f7fbfe,#eff6fb)!important}
.appliance-title{color:var(--deep)!important}

/* ---------- amenities ---------- */
.amenity-item{border-radius:13px!important; transition:border-color .18s, background .18s, box-shadow .18s, transform .12s !important}
.amenity-item:active{transform:scale(.98)}
.amenity-item.checked{background:linear-gradient(180deg,#eef6fb,#e3f0f8)!important; border-color:var(--sea)!important; box-shadow:var(--glow-sea)!important; color:var(--ink)!important}
.amenity-item.checked .amenity-check{background:linear-gradient(135deg,var(--sea),var(--sea2))!important; border-color:transparent!important}

/* ---------- wifi box (light, polished) ---------- */
.wifi-box{background:linear-gradient(135deg,#eaf5fc,#e2f1fb)!important; border:1px solid rgba(31,134,191,.2)!important; border-radius:16px!important; box-shadow:var(--shadow-sm)!important}
.wifi-title{color:var(--sea2)!important; font-weight:800!important}
.wifi-title svg{stroke:var(--sea2)!important}

/* ---------- add buttons (fill + ripple) ---------- */
.add-instruction-btn{
  border:1.7px dashed rgba(31,134,191,.5)!important; color:var(--sea2)!important; border-radius:14px!important; font-weight:700!important;
  position:relative; overflow:hidden;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), color .2s, border-color .2s, box-shadow .25s, background .2s !important;
}
.add-instruction-btn:hover{color:#fff!important; border-color:transparent!important; background:linear-gradient(135deg,var(--sea),var(--sea2))!important; box-shadow:var(--glow-sea)!important}
.add-instruction-btn:active{transform:scale(.97)}

/* ---------- submit (gradient + sheen + glow) ---------- */
.submit-btn{
  border-radius:16px!important; font-weight:800!important; padding:16px 42px!important; position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,var(--sea-bright),var(--sea) 45%,var(--sea-deep))!important;
  box-shadow:var(--glow-sea), inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .25s !important;
}
.submit-btn svg{stroke:#fff!important}
.submit-btn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:50%; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); pointer-events:none}
.submit-btn:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(31,134,191,.5), inset 0 1px 0 rgba(255,255,255,.4)!important}
.submit-btn:hover::after{animation:qSheen .9s ease}
@keyframes qSheen{from{left:-60%}to{left:130%}}
.submit-btn:active{transform:scale(.98)}

/* ripple (needs the small snippet — see notes) */
.rippleInk{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:translate(-50%,-50%) scale(0);
  animation:qRipple .6s ease-out forwards; pointer-events:none; z-index:3}
.add-instruction-btn .rippleInk{background:rgba(31,134,191,.22)}
@keyframes qRipple{to{transform:translate(-50%,-50%) scale(1); opacity:0}}

/* ---------- progress bar ---------- */
.progress-bar{background:linear-gradient(90deg,var(--sea-bright),var(--sea),var(--gold1))!important; height:4px!important; box-shadow:0 1px 8px rgba(31,134,191,.5)}

/* ---------- validation popup ---------- */
#validationList li{border-bottom:1px solid var(--line)!important}

/* ---------- focus-visible ---------- */
:focus:not(:focus-visible){outline:none}
.submit-btn:focus-visible,.add-instruction-btn:focus-visible,.lang-btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 6px rgba(31,134,191,.55)!important}

@media(prefers-reduced-motion:reduce){.section{animation:none!important}}