/* Penile enlargement calculator page (/penile-enlargement-calculator).
   The ec-* rules style the widget built by /js/enlargement-calculator.js, the
   same script and layout as on drtasimplant.com. That site uses CSS variables;
   this one hard-codes its colours, so the variables are defined here on the
   widget itself, mapped to the drtasurology gold, cream and Playfair Display. */

.ec{
  --c-primary-950:#2b2118;
  --c-primary-700:#85683e;
  --c-primary-600:#997d4d;
  --c-primary-300:#d9c39b;
  --c-bg:#ffffff;
  --c-bg-alt:#f7f2ea;
  --c-line:rgba(26,26,26,.12);
  --c-text:#1a1a1a;
  --c-text-soft:#4a4440;
  --c-text-muted:#7d756e;
  --font-display:"Playfair Display",Georgia,serif;
  --font-sans:"Inter","Helvetica Neue",sans-serif;
  font-family:var(--font-sans);
}
/* Square corners inside the widget, as on drtasimplant. */
.ec,.ec *,.ec *::before,.ec *::after{border-radius:0 !important}
.ec button{font-family:inherit}

/* Hero: the measurement diagram is landscape, so drop the portrait frame. */
.ecp .ecp-hero-diagram{aspect-ratio:3 / 2;border:1px solid rgba(26,26,26,.1)}
.ecp-hero-cta{margin:22px 0 0}

/* ===== Calculator card ===== */
.ec{max-width:1120px;margin:8px auto 0;background:#fff;border:1px solid var(--c-line);box-shadow:0 12px 48px -18px rgba(0,0,0,.16);scroll-margin-top:90px}

.ec-top{background:var(--c-primary-950);color:#fff;padding:20px 28px 16px}
.ec-top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ec-toplabel{margin:0 0 6px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--c-primary-300)}
.ec-toptitle{margin:0;font-family:var(--font-display);font-size:24px;line-height:1.2;color:#fff}
.ec-stepcount{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
.ec-units{display:flex;border:1px solid rgba(255,255,255,.3);flex-shrink:0}
.ec-units button{background:none;border:0;color:rgba(255,255,255,.75);font:600 13px/1 var(--font-sans);padding:9px 14px;cursor:pointer}
.ec-units button[aria-pressed="true"]{background:var(--c-primary-300);color:var(--c-primary-950)}

/* Two columns: measurements left, live result right. */
.ec-body{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;padding:24px 28px;align-items:start}

/* ===== Measurement fields ===== */
.ec-form{display:flex;flex-direction:column;gap:12px}
.ec-field{padding:12px 14px;border:1px solid var(--c-line);background:#fff;transition:border-color .2s,background .2s}
.ec-field--focus{border-color:var(--c-primary-600);background:#fdf9f3}
.ec-field-label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--c-text);cursor:pointer}
.ec-field-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;background:var(--c-primary-950);color:#fff;font-size:12px}
.ec-field-help{margin:4px 0 10px 32px;font-size:13px;line-height:1.5;color:var(--c-text-muted)}
.ec-field-row{display:flex;align-items:stretch;gap:6px;margin-left:32px}
.ec-step{width:40px;flex-shrink:0;background:var(--c-bg-alt);border:1px solid var(--c-line);font:600 20px/1 var(--font-sans);color:var(--c-primary-700);cursor:pointer;transition:background .2s,border-color .2s}
.ec-step:hover{border-color:var(--c-primary-600);background:#f3e7d6}
.ec-input{display:flex;align-items:stretch;flex:1;max-width:190px;border:1px solid var(--c-primary-600)}
.ec-input input{flex:1;min-width:0;width:100%;border:0;padding:10px 12px;font:700 19px/1 var(--font-sans);color:var(--c-text);background:#fff;text-align:center}
.ec-input input:focus{outline:none}
.ec-input:focus-within{box-shadow:0 0 0 3px rgba(176,129,68,.25)}
.ec-input--err{border-color:#b4483c}
.ec-input-unit{display:flex;align-items:center;padding:0 12px;background:var(--c-bg-alt);font-weight:600;font-size:14px;color:var(--c-primary-700)}
.ec-error{margin:8px 0 0 32px;font-size:13px;color:#b4483c}
.ec-howto{margin:8px 0 0 32px;font-size:13px;color:var(--c-text-soft)}
.ec-howto summary{cursor:pointer;color:var(--c-primary-700);font-weight:600;font-size:12px;letter-spacing:.5px}
.ec-howto ol{margin:6px 0 0;padding-left:18px;line-height:1.6}
.ec-defaults{margin:2px 0 0;font-size:12px;color:var(--c-text-muted)}

/* ===== Result ===== */
.ec-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ec-tabs button{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 14px;background:#fff;border:1px solid var(--c-line);cursor:pointer;font-family:var(--font-sans)}
.ec-tabs button strong{font-size:15px;color:var(--c-text)}
.ec-tabs button span{font-size:12px;color:var(--c-text-muted)}
.ec-tabs button[aria-selected="true"]{background:var(--c-primary-950);border-color:var(--c-primary-950)}
.ec-tabs button[aria-selected="true"] strong{color:#fff}
.ec-tabs button[aria-selected="true"] span{color:var(--c-primary-300)}
.ec-readout{display:flex;justify-content:center;align-items:baseline;gap:12px;margin-bottom:10px;font-size:14px;color:var(--c-text-soft)}
.ec-readout b{font-size:18px;color:var(--c-text)}
.ec-readout .ec-gold{color:var(--c-primary-700)}
.ec-arrow{color:var(--c-text-muted)}
.ec-legend{display:flex;justify-content:center;align-items:center;gap:8px;margin:10px 0 14px;font-size:12px;color:var(--c-text-muted)}
.ec-key{display:inline-block;width:22px;height:10px}
.ec-key--now{border:2px dashed var(--c-text-muted)}
.ec-key--after{background:#f3d5bd;border:2px solid var(--c-primary-700);margin-left:10px}
.ec-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec-tile{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid var(--c-line);background:#fff}
.ec-tile--main{background:var(--c-bg-alt)}
.ec-tile-label{font-size:12px;color:var(--c-text-muted)}
.ec-tile-value{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--c-primary-700);font-weight:600}

/* ===== Diagram ===== */
.ec-stage-box{background:var(--c-bg-alt);border:1px solid var(--c-line);padding:10px}
.ec-svg{display:block;width:100%;height:auto;overflow:visible}
.ec-svg marker path{fill:var(--c-primary-700)}
.ec-ruler rect{fill:#fff;stroke:var(--c-primary-600);stroke-width:1.5}
.ec-ruler line{stroke:var(--c-primary-600);stroke-width:1.2}
.ec-ruler text{font:600 11px var(--font-sans);fill:var(--c-primary-700);text-anchor:middle}
.ec-ruler .ec-ruler-unit{text-anchor:end;font-size:11px}
/* Anatomical side view: skin-toned shaft, darker glans with coronal ridge,
   pubic area on the left. "Now" is a dashed outline over the estimate. */
.ec-abdomen{fill:#f7e6d8;stroke:#c97b5a;stroke-width:2.5}
.ec-bone{fill:none;stroke:#b98d73;stroke-width:4;stroke-linecap:round}
.ec-bone-label{font:600 11px var(--font-sans);fill:#8a6a55;text-anchor:middle}
.ec-pn-shaft{fill:#f3d5bd;stroke:#c97b5a;stroke-width:2.5;stroke-linejoin:round}
.ec-pn-glans{fill:#e7a58c;stroke:#c97b5a;stroke-width:2.5;stroke-linejoin:round}
.ec-pn-raphe{fill:none;stroke:#d7a688;stroke-width:1.4;stroke-dasharray:3 4}
.ec-pn-meatus{fill:none;stroke:#a35a41;stroke-width:2;stroke-linecap:round}
.ec-pn-label{font:600 11px var(--font-sans);fill:#8a6a55;text-anchor:middle}
.ec-xs-skin{fill:#f3d5bd;stroke:#c97b5a;stroke-width:2.5}
.ec-xs-cc{fill:#d96a5c}
.ec-xs-cs{fill:#eab398;stroke:#c97b5a;stroke-width:1.5}
.ec-rod-after .ec-pn-shaft,.ec-rod-after .ec-pn-glans,.ec-ring-after .ec-xs-skin{stroke:var(--c-primary-700);stroke-width:3}
.ec-ghost path,.ec-ghost circle{fill:none;stroke:#5f5248;stroke-width:2;stroke-dasharray:6 5}
.ec-ghost .ec-pn-raphe,.ec-ghost .ec-pn-meatus,.ec-ghost .ec-xs-cc,.ec-ghost .ec-xs-cs{display:none}
.ec-hot .ec-pn-shaft,.ec-hot .ec-pn-glans,.ec-hot .ec-xs-skin{stroke:var(--c-primary-700);stroke-width:3.5;animation:ecPulse 1.6s ease-in-out infinite}
@keyframes ecPulse{50%{stroke-opacity:.35}}
@media (prefers-reduced-motion:reduce){.ec-hot *{animation:none}}
.ec-ring-label{font:600 13px var(--font-sans);fill:var(--c-text-soft);text-anchor:middle}
.ec-dim{stroke:var(--c-primary-700);stroke-width:2}
.ec-dim-label{font:700 15px var(--font-sans);fill:var(--c-primary-700);text-anchor:middle}

/* ===== Techniques, note and actions (full width under both columns) ===== */
.ec-foot{padding:0 28px 26px}
.ec-tech-title{margin:0 0 8px;padding-top:20px;border-top:1px solid var(--c-line);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--c-primary-700);font-weight:600}
.ec-techs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ec-tech{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;background:#fff;border:1px solid var(--c-line);cursor:pointer;font-family:var(--font-sans);transition:border-color .2s,background .2s}
.ec-tech strong{font-size:14px;color:var(--c-text)}
.ec-tech span{font-size:12px;color:var(--c-text-muted)}
.ec-tech em{font-style:normal;font-size:12px;font-weight:700;color:var(--c-primary-700)}
.ec-tech:hover{border-color:var(--c-primary-600)}
.ec-tech[aria-pressed="true"]{border-color:var(--c-primary-700);background:#fbf5ec}
.ec-foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:18px}
.ec-note{margin:0;max-width:420px;font-size:13px;line-height:1.6;color:var(--c-text-muted)}
.ec-note strong{color:var(--c-text)}
.ec-actions{display:flex;gap:10px;flex-shrink:0}
.ec-btn{display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 var(--font-sans);letter-spacing:1px;text-transform:uppercase;padding:14px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.ec-btn--dark{background:var(--c-primary-950);color:#fff}
.ec-btn--dark:hover{background:var(--c-primary-700);color:#fff}
.ec-btn--ghost{background:none;color:var(--c-primary-700);border-color:var(--c-line)}
.ec-btn--ghost:hover{border-color:var(--c-primary-600)}
.ec-btn--wa{background:#1f9d55;color:#fff}
.ec-btn--wa:hover{background:#17803f;color:#fff}

@media (max-width:980px){
  .ec-techs{grid-template-columns:1fr 1fr}
  .ec-foot-row{flex-direction:column;align-items:stretch}
  .ec-note{max-width:none}
  .ec-actions .ec-btn{flex:1}
}
/* Phones: result first, measurements underneath. */
@media (max-width:900px){
  .ec-body{grid-template-columns:1fr;gap:20px}
  .ec-stage{order:-1}
}
@media (max-width:560px){
  .ec-top,.ec-body,.ec-foot{padding-left:16px;padding-right:16px}
  .ec-toptitle{font-size:20px}
  .ec-tile-value{font-size:24px}
  .ec-techs{grid-template-columns:1fr}
  .ec-actions{flex-direction:column}
  .ec-field-help,.ec-field-row,.ec-error,.ec-howto{margin-left:0}
  .ec-input{max-width:none}
  /* The diagram scales down on phones; enlarge its labels so they stay readable. */
  .ec-pn-label,.ec-bone-label{font-size:17px}
  .ec-dim-label{font-size:22px}
  .ec-ring-label{font-size:19px}
  .ec-ruler text,.ec-ruler .ec-ruler-unit{font-size:16px}
}


/* ===== drtasurology layout: diagram on top =====
   Same widget markup as drtasimplant, laid out differently: the before/after
   diagram runs full width at the top, the four measurements sit in one row
   below it and the result boxes close the card. The form and stage wrappers
   are flattened (display: contents) so their children can be ordered here. */
.ec .ec-body{grid-template-columns:repeat(4,1fr);gap:14px 14px;padding:24px 28px}
.ec .ec-form,.ec .ec-stage{display:contents}
.ec .ec-tabs{order:1;grid-column:1 / -1;max-width:520px;width:100%;margin:0 auto}
.ec .ec-readout{order:2;grid-column:1 / -1;margin:0}
.ec .ec-stage-box{order:3;grid-column:1 / -1;width:100%;max-width:600px;margin:0 auto}
.ec .ec-legend{order:4;grid-column:1 / -1;margin:0 0 6px}
.ec .ec-field{order:5}
.ec .ec-defaults{order:6;grid-column:1 / -1;text-align:center}
.ec .ec-tiles{order:7;grid-column:1 / -1;grid-template-columns:repeat(4,1fr)}
/* Narrow field cards: drop the indent under the number badge. */
.ec .ec-field-help,.ec .ec-field-row,.ec .ec-error,.ec .ec-howto{margin-left:0}
.ec .ec-field-help{min-height:2.9em}
.ec .ec-input{max-width:none}
@media (max-width:980px){
  .ec .ec-body{grid-template-columns:repeat(2,1fr)}
  .ec .ec-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ec .ec-body{grid-template-columns:1fr}
  .ec .ec-field-help{min-height:0}
}

/* ===== drtasurology diagram colours: gold outlines, glowing estimate ===== */
.ec .ec-abdomen{fill:#f8ece0;stroke:#b8975e}
.ec .ec-bone{stroke:#c9ab78}
.ec .ec-pn-shaft,.ec .ec-pn-glans,.ec .ec-xs-skin{stroke:#b8975e}
.ec .ec-rod-after .ec-pn-shaft,.ec .ec-rod-after .ec-pn-glans,.ec .ec-ring-after .ec-xs-skin{stroke:#997d4d;stroke-width:3}
.ec .ec-rod-after,.ec .ec-ring-after{filter:drop-shadow(0 0 6px rgba(201,164,92,.55))}
.ec .ec-ghost path,.ec .ec-ghost circle{stroke:#85683e}
.ec .ec-dim{stroke:#997d4d}
.ec .ec-dim-label{fill:#85683e}
.ec .ec-svg marker path{fill:#997d4d}
.ec .ec-key--after{border-color:#997d4d;box-shadow:0 0 6px rgba(201,164,92,.6)}
.ec .ec-key--now{border-color:#85683e}