/* ============================================================
   CORNELIA INVESTMENT GROUP — styles.css
   Single authoritative source. No conflicting overrides.
============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#061120;font-family:Arial,Helvetica,sans-serif}

/* ── PAGE / IMAGE-MAP LAYOUT ──────────────────────────────── */
.page{position:relative;width:100%;max-width:1536px;margin:0 auto;background:#061120}
.page-img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}

/* ── HOTSPOTS ─────────────────────────────────────────────── */
.hotspot{
  position:absolute;display:block;text-decoration:none;
  background:transparent!important;border:0!important;
  box-shadow:none!important;outline:none!important;
  cursor:pointer;z-index:30;
  -webkit-tap-highlight-color:transparent!important;
}
.hotspot:focus,.hotspot:active,.hotspot:hover,.hotspot:focus-visible{
  outline:none!important;border:0!important;
  box-shadow:none!important;background:transparent!important;
}
button.hotspot{
  appearance:none!important;-webkit-appearance:none!important;
  padding:0!important;margin:0!important;
}
button.hotspot[type="submit"],
button.hotspot[type="button"]{
  z-index:9999!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* ── LEAD FORM CONTAINER ──────────────────────────────────── */
.lead-form{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:20;
  pointer-events:none;   /* form shell is click-through */
  background:transparent;
  border:none;margin:0;padding:0;
}
.lead-form button.hotspot{
  pointer-events:auto!important;
  z-index:9999!important;
}

/* ── FORM FIELDS — base (transparent until touched) ──────── */
.lead-input,
.lead-select,
.lead-textarea{
  position:absolute;
  z-index:35;
  pointer-events:auto;

  /* Transparent background — locked image shows through */
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  outline:0!important;
  border-radius:6px;

  /* Text: white so it's visible against the dark image panels */
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#ffffff!important;

  font-size:clamp(10px,1.05vw,16px);
  font-family:Arial,Helvetica,sans-serif;
  padding:0 .7%;
  appearance:auto;
}
.lead-textarea{resize:none;padding-top:.7%}

/* Placeholder: invisible — the image itself provides the label text */
.lead-input::placeholder,
.lead-textarea::placeholder{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  opacity:0!important;
}

/* Focus & has-value: keep same transparent look, text stays white */
.lead-input:focus,
.lead-input.has-value,
.lead-select:focus,
.lead-select.has-value,
.lead-textarea:focus,
.lead-textarea.has-value{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#ffffff!important;
}

/* .light variant (right-panel fields on darker image bg) —
   same behaviour, white text */
.lead-input.light,
.lead-select.light,
.lead-textarea.light{
  background:transparent!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#ffffff!important;
  border:0!important;
}
.lead-input.light:focus,
.lead-input.light.has-value,
.lead-select.light:focus,
.lead-select.light.has-value,
.lead-textarea.light:focus,
.lead-textarea.light.has-value{
  background:transparent!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  border:0!important;
  box-shadow:none!important;
}

/* home-wide-field inputs (right form panel) */
.home-wide-field{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#ffffff!important;
}
.home-wide-field:focus,
.home-wide-field.has-value{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

/* Select dropdown options always readable */
.lead-select option,
select option{
  background:#ffffff!important;
  color:#07111d!important;
  -webkit-text-fill-color:#07111d!important;
}

/* Browser autofill — keep our white text on transparent bg */
.lead-input:-webkit-autofill,
.lead-input:-webkit-autofill:hover,
.lead-input:-webkit-autofill:focus,
.lead-textarea:-webkit-autofill,
.lead-textarea:-webkit-autofill:hover,
.lead-textarea:-webkit-autofill:focus,
.lead-select:-webkit-autofill,
.lead-select:-webkit-autofill:hover,
.lead-select:-webkit-autofill:focus{
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#ffffff!important;
  /* defeat Chrome's blue autofill background */
  -webkit-box-shadow:0 0 0 1000px transparent inset!important;
  box-shadow:0 0 0 1000px transparent inset!important;
  transition:background-color 9999s ease-in-out 0s!important;
}

/* ── VISUALLY HIDDEN (screen-reader labels) ───────────────── */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;
}

/* ── CONSENT MODAL ────────────────────────────────────────── */
.modal{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  z-index:100000;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal.show,
.modal[style*="flex"]{display:flex!important;}

.modal-card{
  max-width:560px;width:100%;
  background:#081629;color:#fff;
  border:1px solid #d8a02c;border-radius:14px;
  padding:32px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.modal-card h2{margin:0 0 14px;color:#f2b32b;font-size:22px;}
.modal-card p{line-height:1.55;color:rgba(255,255,255,.82);margin-bottom:4px;}
.modal-card label{
  display:flex;align-items:flex-start;gap:12px;
  line-height:1.55;margin:20px 0;cursor:pointer;
  color:rgba(255,255,255,.88);font-size:14px;
}
.modal-card label input[type="checkbox"]{
  width:18px;height:18px;flex-shrink:0;
  margin-top:2px;accent-color:#C8922A;cursor:pointer;
}
.modal-card button{
  width:100%;border:0;border-radius:8px;
  background:#f7b72d;color:#07111f;
  font-weight:800;font-size:15px;letter-spacing:1px;
  padding:15px 18px;cursor:pointer;
  transition:background .2s;
}
.modal-card button:hover{background:#e5a820;}

/* ── ADMIN PAGE ───────────────────────────────────────────── */
.admin{max-width:1100px;margin:0 auto;background:#fff;min-height:100vh;padding:30px;font-family:Arial}
.admin h1{color:#07111d}
.admin table{width:100%;border-collapse:collapse;margin-top:20px}
.admin th,.admin td{border:1px solid #ccc;padding:8px;font-size:13px;text-align:left}
.admin button,.admin a.button{display:inline-block;margin:8px 8px 8px 0;padding:10px 14px;background:#07111d;color:#fff;text-decoration:none;border-radius:6px;border:0;cursor:pointer}
.admin .gold{background:#f7aa20;color:#07111d;font-weight:800}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:700px){
  .lead-input,.lead-select,.lead-textarea{font-size:11px;padding:2px 4px}
  .modal-card{font-size:14px}
}


/* ============================================================
   EXPLORE / APPLY PAGE — .light field fix
   Fields overlay the locked image. On focus OR has-value:
   - White opaque background covers the image label underneath
   - Dark text (#07111d) so typed content is always readable
   - No border, no outline — stays invisible until touched
============================================================ */

/* Untouched: fully transparent, image shows through */
.lead-input.light,
.lead-select.light,
.lead-textarea.light {
  background: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  caret-color: #07111d !important;
}

/* Focused OR has a value: white bg covers image label, dark readable text */
.lead-input.light:focus,
.lead-input.light.has-value,
.lead-select.light:focus,
.lead-select.light.has-value,
.lead-textarea.light:focus,
.lead-textarea.light.has-value {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #07111d !important;
  -webkit-text-fill-color: #07111d !important;
  caret-color: #07111d !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 4px;
}

/* Textarea same rules */
.lead-textarea.light:focus,
.lead-textarea.light.has-value {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #07111d !important;
  -webkit-text-fill-color: #07111d !important;
  caret-color: #07111d !important;
}

/* Select options always dark on white */
.lead-select.light option {
  background: #ffffff !important;
  color: #07111d !important;
  -webkit-text-fill-color: #07111d !important;
}

/* Browser autofill on light fields — white bg, dark text */
.lead-input.light:-webkit-autofill,
.lead-input.light:-webkit-autofill:hover,
.lead-input.light:-webkit-autofill:focus,
.lead-textarea.light:-webkit-autofill,
.lead-textarea.light:-webkit-autofill:hover,
.lead-textarea.light:-webkit-autofill:focus,
.lead-select.light:-webkit-autofill,
.lead-select.light:-webkit-autofill:hover,
.lead-select.light:-webkit-autofill:focus {
  -webkit-text-fill-color: #07111d !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #07111d !important;
}


/* ============================================================
   MOBILE RESPONSIVE FIX
   Prevents blank black space below locked images on mobile.
   All pages use .page and .page-img — this fixes all of them.
============================================================ */

/* Ensure page container never exceeds viewport width */
html, body {
  overflow-x: hidden;
  width: 100%;
}

.page {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* Page image scales to full width on all screen sizes */
.page-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  /* Remove any bottom gap */
  vertical-align: bottom;
  font-size: 0;
}

/* Hotspots and form fields scale with the image */
.hotspot,
.lead-input,
.lead-select,
.lead-textarea {
  /* percentage positioning already handles scaling */
  position: absolute;
}

/* Remove black background bleed on mobile */
@media (max-width: 768px) {
  html, body {
    background: #061120;
    min-height: unset;
    height: auto;
  }

  .page {
    min-height: unset !important;
    height: auto !important;
    background: transparent;
  }

  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100%;
  }

  /* Scale form text down on small screens */
  .lead-input,
  .lead-select,
  .lead-textarea {
    font-size: 2.8vw !important;
    padding: 0 1% !important;
  }

  /* Modal fits mobile screen */
  .modal-card {
    padding: 24px 20px;
    margin: 20px;
    width: calc(100% - 40px);
    max-width: 100%;
  }

  .modal-card h2 { font-size: 18px; }
  .modal-card p  { font-size: 13px; }
  .modal-card button { padding: 12px; font-size: 13px; }
}

@media (max-width: 480px) {
  .lead-input,
  .lead-select,
  .lead-textarea {
    font-size: 2.4vw !important;
    padding: 0 0.5% !important;
  }
}