
/* OfficeCalculator.Net v72 — premium form-only redesign for restored love calculators.
   Calculator logic and result presentation intentionally unchanged. */

.oc-love-legacy-v71{
  border-color:var(--oc30-line,#dce5f2)!important;
  background:var(--oc30-panel,#fff)!important;
  box-shadow:0 12px 34px rgba(30,55,90,.06)!important;
}

.oc-love-legacy-head{
  padding:18px 20px 16px;
  border-bottom:1px solid var(--oc30-line,#e5eaf2);
  background:
    radial-gradient(circle at 92% 18%,rgba(219,39,119,.08),transparent 25%),
    linear-gradient(135deg,#fff,#fffafb);
}

.oc-love-legacy-head h2{
  margin:3px 0 5px!important;
  color:var(--oc30-ink,#152036)!important;
  font-size:1.08rem!important;
  letter-spacing:-.015em;
}

.oc-love-legacy-head p{
  color:var(--oc30-muted,#667085)!important;
  font-size:.8rem!important;
}

.oc-love-legacy-kicker{
  color:#c0185a!important;
  font-size:.65rem!important;
  letter-spacing:.11em!important;
}

.oc-love-local-badge{
  background:#fff!important;
  border-color:#ead7df!important;
  color:#7f244b!important;
  box-shadow:0 3px 12px rgba(120,46,80,.05);
}

.oc-love-legacy-body{
  padding:18px 20px 20px!important;
}

/* Form surface only */
.oc-love-legacy-body form{
  position:relative;
  padding:16px!important;
  border:1px solid var(--oc30-line,#dce5f2)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)!important;
  box-shadow:0 8px 24px rgba(33,53,85,.05)!important;
}

.oc-love-legacy-body .love-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:14px!important;
  row-gap:7px!important;
}

/* Classic two-person forms: make first person left, second person right */
.oc-love-legacy-body .love-form > label:nth-of-type(1){grid-column:1}
.oc-love-legacy-body .love-form > label:nth-of-type(2){grid-column:2}
.oc-love-legacy-body .love-form > input:nth-of-type(1){grid-column:1}
.oc-love-legacy-body .love-form > input:nth-of-type(2){grid-column:2}

/* Four-field name/DOB or name/photo forms */
.oc-love-legacy-body .love-form > label:nth-of-type(3){grid-column:1}
.oc-love-legacy-body .love-form > label:nth-of-type(4){grid-column:2}
.oc-love-legacy-body .love-form > input:nth-of-type(3){grid-column:1}
.oc-love-legacy-body .love-form > input:nth-of-type(4){grid-column:2}

.oc-love-legacy-body .love-form > button[type="submit"]{
  grid-column:1/-1!important;
}

/* Specific restored forms that don't use labels */
.oc-love-legacy-body .lccontainer > form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px 14px!important;
  padding:16px!important;
}

.oc-love-legacy-body .lccontainer > form > input:nth-of-type(1),
.oc-love-legacy-body .lccontainer > form > input:nth-of-type(2){
  grid-column:1;
}

.oc-love-legacy-body .lccontainer > form > input:nth-of-type(3),
.oc-love-legacy-body .lccontainer > form > input:nth-of-type(4){
  grid-column:2;
}

.oc-love-legacy-body .lccontainer > form > button[type="submit"]{
  grid-column:1/-1!important;
}

/* Mother/daughter keeps its semantic pair cards */
.oc-love-legacy-body #motherDaughterLoveForm{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}

.oc-love-legacy-body #motherDaughterLoveForm .input-pair{
  display:grid!important;
  gap:9px!important;
  padding:14px!important;
  border:1px solid #e7dce2!important;
  border-radius:14px!important;
  background:#fff!important;
}

.oc-love-legacy-body #motherDaughterLoveForm > button[type="submit"]{
  grid-column:1/-1!important;
}

/* Labels */
.oc-love-legacy-body form label{
  align-self:end!important;
  margin:0 0 1px!important;
  color:#344054!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.01em;
}

/* Inputs */
.oc-love-legacy-body form input[type="text"],
.oc-love-legacy-body form input[type="date"],
.oc-love-legacy-body form input[type="number"],
.oc-love-legacy-body form select{
  min-height:44px!important;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid #d7dfeb!important;
  border-radius:10px!important;
  background:#f8faff!important;
  color:#172033!important;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.025)!important;
}

.oc-love-legacy-body form input[type="text"]::placeholder{
  color:#98a2b3!important;
}

.oc-love-legacy-body form input[type="text"]:focus,
.oc-love-legacy-body form input[type="date"]:focus,
.oc-love-legacy-body form input[type="number"]:focus,
.oc-love-legacy-body form select:focus{
  background:#fff!important;
  border-color:#bb6b8e!important;
  box-shadow:0 0 0 3px rgba(190,24,93,.08)!important;
}

/* File controls */
.oc-love-legacy-body form input[type="file"]{
  min-height:44px!important;
  padding:6px 8px!important;
  border:1px solid #dfd4db!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#475467!important;
  font-size:.78rem!important;
}

.oc-love-legacy-body form input[type="file"]::file-selector-button{
  min-height:30px;
  margin-right:9px;
  padding:6px 10px;
  border:0;
  border-radius:8px;
  background:#fbe8f0;
  color:#a71954;
  font-size:.76rem;
  font-weight:800;
}

.oc-love-legacy-body form input[type="file"]:hover::file-selector-button{
  background:#f7d9e6;
}

/* Primary CTA */
.oc-love-legacy-body form > button[type="submit"],
.oc-love-legacy-body .love-form > button[type="submit"],
.oc-love-legacy-body .lccontainer form > button[type="submit"]{
  min-height:44px!important;
  margin-top:4px!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#d91d69,#b91454)!important;
  box-shadow:0 7px 16px rgba(185,20,84,.14)!important;
  font-size:.8rem!important;
  letter-spacing:.005em;
}

.oc-love-legacy-body form > button[type="submit"]:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

.oc-love-legacy-body form > button[type="submit"]:active{
  transform:none;
}

/* Keep photo preview compact before calculation */
.oc-love-legacy-body .image-preview{
  min-height:0!important;
  margin-top:2px!important;
}

/* Privacy line belongs to form experience, not result */
.oc-love-legacy-note{
  margin:12px 20px 17px!important;
  padding:9px 11px!important;
  border:1px solid #e8edf4;
  background:#f9fbfd!important;
  color:#667085!important;
  font-size:.68rem!important;
}

/* Do not modify the original result card.
   Explicit reset to v71 result styling inheritance only. */
.oc-love-legacy-body #resultSection{
  /* result styling remains owned by love-legacy-v71.css */
}

/* Dark mode */
.oc-dark .oc-love-legacy-head,
.oc-dark-preload .oc-love-legacy-head{
  background:linear-gradient(135deg,rgba(38,31,36,.98),rgba(31,35,45,.98))!important;
}
.oc-dark .oc-love-legacy-body form,
.oc-dark-preload .oc-love-legacy-body form,
.oc-dark .oc-love-legacy-body #motherDaughterLoveForm .input-pair,
.oc-dark-preload .oc-love-legacy-body #motherDaughterLoveForm .input-pair{
  background:#202631!important;
  border-color:#384252!important;
}
.oc-dark .oc-love-legacy-body form label,
.oc-dark-preload .oc-love-legacy-body form label{
  color:#e5e7eb!important;
}
.oc-dark .oc-love-legacy-body form input[type="text"],
.oc-dark .oc-love-legacy-body form input[type="date"],
.oc-dark .oc-love-legacy-body form input[type="number"],
.oc-dark .oc-love-legacy-body form input[type="file"],
.oc-dark .oc-love-legacy-body form select,
.oc-dark-preload .oc-love-legacy-body form input[type="text"],
.oc-dark-preload .oc-love-legacy-body form input[type="date"],
.oc-dark-preload .oc-love-legacy-body form input[type="number"],
.oc-dark-preload .oc-love-legacy-body form input[type="file"],
.oc-dark-preload .oc-love-legacy-body form select{
  background:#181e27!important;
  border-color:#414b5b!important;
  color:#f3f4f6!important;
}

/* Responsive */
@media(max-width:760px){
  .oc-love-legacy-head{
    padding:15px 14px 13px!important;
  }
  .oc-love-legacy-body{
    padding:13px 14px 15px!important;
  }
  .oc-love-legacy-body form,
  .oc-love-legacy-body .lccontainer > form{
    padding:12px!important;
  }
  .oc-love-legacy-body .love-form,
  .oc-love-legacy-body .lccontainer > form,
  .oc-love-legacy-body #motherDaughterLoveForm{
    grid-template-columns:1fr!important;
  }
  .oc-love-legacy-body .love-form > *,
  .oc-love-legacy-body .lccontainer > form > *,
  .oc-love-legacy-body #motherDaughterLoveForm > *{
    grid-column:1!important;
  }
  .oc-love-legacy-body #motherDaughterLoveForm .heart-icon{
    display:none!important;
  }
  .oc-love-legacy-note{
    margin:10px 14px 14px!important;
  }
}
