
/* OfficeCalculator.Net v74 — love calculator result area aligned to the global right-panel workspace style.
   Original calculator logic and inner result-card styling remain unchanged. */

.oc-love-legacy-body .calculator-container,
.oc-love-legacy-body .lccontainer{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)!important;
  gap:18px 22px!important;
  align-items:start!important;
}

.oc-love-legacy-body .calculator-container > form,
.oc-love-legacy-body .lccontainer > form,
.oc-love-legacy-body .calculator-container > #motherDaughterLoveForm,
.oc-love-legacy-body .lccontainer > #motherDaughterLoveForm{
  grid-column:1!important;
  grid-row:1!important;
}

.oc-love-legacy-body .calculator-container > .loading,
.oc-love-legacy-body .lccontainer > .loading{
  grid-column:1!important;
  grid-row:2!important;
  margin-top:-4px!important;
}

.oc-love-legacy-body .calculator-container > .oc-love-global-result-area,
.oc-love-legacy-body .lccontainer > .oc-love-global-result-area{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  position:relative;
  min-height:540px;
  margin-top:0!important;
  padding:18px!important;
  border:1px solid #f2cadc!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 14% 16%,rgba(255,255,255,.92) 0,rgba(255,255,255,.78) 8%,transparent 9%),
    linear-gradient(180deg,#fff 0%,#fff9fc 100%)!important;
  box-shadow:0 18px 44px rgba(190,24,93,.08)!important;
  overflow:hidden!important;
}

.oc-love-global-result-area::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(236,72,153,.05),rgba(255,255,255,0) 42%,rgba(236,72,153,.07));
  pointer-events:none;
}

.oc-love-global-result-top,
.oc-love-global-result-placeholder,
.oc-love-global-result-area > #resultSection,
.oc-love-global-result-area > .share-section{
  position:relative;
  z-index:1;
}

.oc-love-global-result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px!important;
}

.oc-love-global-result-label{
  color:#c0185a!important;
  font-size:.76rem!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.oc-love-global-result-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:8px 12px!important;
  border:1px solid #ead7df!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#7f244b!important;
  font-size:.70rem!important;
  font-weight:800!important;
  box-shadow:0 3px 12px rgba(120,46,80,.05);
}

.oc-love-global-result-placeholder{
  min-height:445px;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  color:#667085!important;
}

.oc-love-global-result-placeholder > div{
  max-width:320px!important;
}

.oc-love-global-result-placeholder::before{
  content:'❤';
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#fbe8f1);
  border:1px solid #f2cadc;
  color:#db2777;
  font-size:2rem;
  box-shadow:0 10px 26px rgba(219,39,119,.12);
}

.oc-love-global-result-placeholder strong{
  display:block!important;
  margin-bottom:8px!important;
  color:#152036!important;
  font-size:1.05rem!important;
}

.oc-love-global-result-placeholder span{
  display:block!important;
  font-size:.83rem!important;
  line-height:1.55!important;
}

/* When actual result shows, keep the side-panel surface but hide only the placeholder. */
.oc-love-global-result-area:has(#resultSection[style*="display: block"]) .oc-love-global-result-placeholder,
.oc-love-global-result-area:has(#resultSection[style*="display:block"]) .oc-love-global-result-placeholder{
  display:none!important;
}

.oc-love-global-result-area:has(#resultSection[style*="display: block"]),
.oc-love-global-result-area:has(#resultSection[style*="display:block"]){
  min-height:0!important;
}

/* Keep the original legacy love-result visuals, but seat them naturally inside the global panel. */
.oc-love-global-result-area > #resultSection{
  margin-top:0!important;
  padding:18px!important;
}

.oc-love-global-result-area > .share-section{
  margin-top:14px!important;
}

.oc-love-global-result-area > .share-section .share-buttons,
.oc-love-global-result-area > .share-section{
  justify-content:flex-start!important;
}

/* Dark mode */
.oc-dark .oc-love-legacy-body .calculator-container > .oc-love-global-result-area,
.oc-dark-preload .oc-love-legacy-body .calculator-container > .oc-love-global-result-area,
.oc-dark .oc-love-legacy-body .lccontainer > .oc-love-global-result-area,
.oc-dark-preload .oc-love-legacy-body .lccontainer > .oc-love-global-result-area{
  border-color:#514455!important;
  background:linear-gradient(180deg,#1d2430 0%,#241d28 100%)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
}

.oc-dark .oc-love-global-result-area::before,
.oc-dark-preload .oc-love-global-result-area::before{
  background:linear-gradient(135deg,rgba(236,72,153,.09),rgba(255,255,255,0) 42%,rgba(59,130,246,.08));
}

.oc-dark .oc-love-global-result-label,
.oc-dark-preload .oc-love-global-result-label{ color:#ff8abd!important; }

.oc-dark .oc-love-global-result-badge,
.oc-dark-preload .oc-love-global-result-badge{
  border-color:#4a4250!important;
  background:#202937!important;
  color:#ffb3d1!important;
}

.oc-dark .oc-love-global-result-placeholder,
.oc-dark-preload .oc-love-global-result-placeholder{ color:#aab5c5!important; }

.oc-dark .oc-love-global-result-placeholder::before,
.oc-dark-preload .oc-love-global-result-placeholder::before{
  background:linear-gradient(135deg,#223247,#2d2430);
  border-color:#514455;
  color:#ff8abd;
}

.oc-dark .oc-love-global-result-placeholder strong,
.oc-dark-preload .oc-love-global-result-placeholder strong{ color:#f5f7fb!important; }

@media(max-width:920px){
  .oc-love-legacy-body .calculator-container,
  .oc-love-legacy-body .lccontainer{
    grid-template-columns:1fr!important;
  }
  .oc-love-legacy-body .calculator-container > form,
  .oc-love-legacy-body .lccontainer > form,
  .oc-love-legacy-body .calculator-container > #motherDaughterLoveForm,
  .oc-love-legacy-body .lccontainer > #motherDaughterLoveForm,
  .oc-love-legacy-body .calculator-container > .loading,
  .oc-love-legacy-body .lccontainer > .loading,
  .oc-love-legacy-body .calculator-container > .oc-love-global-result-area,
  .oc-love-legacy-body .lccontainer > .oc-love-global-result-area{
    grid-column:1!important;
    grid-row:auto!important;
  }
  .oc-love-global-result-area{
    min-height:240px!important;
  }
  .oc-love-global-result-placeholder{
    min-height:170px!important;
  }
}

@media(max-width:700px){
  .oc-love-global-result-area{
    padding:14px!important;
    border-radius:18px!important;
  }
  .oc-love-global-result-top{
    margin-bottom:10px!important;
  }
  .oc-love-global-result-badge{
    padding:7px 10px!important;
    font-size:.66rem!important;
  }
}
