/* ============================================================
   Legal Calculator – Frontend Styles
   Theme: Dark Judicial Gold | RTL-first | Elementor-safe
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cairo:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
.lc-calculator {
    --lc-accent:       #C9A84C;
    --lc-accent-light: #E8CC82;
    --lc-accent-dim:   rgba(201,168,76,.15);
    --lc-accent-glow:  rgba(201,168,76,.35);
    --lc-bg:           #0D0D0D;
    --lc-surface:      #141414;
    --lc-surface2:     #1C1C1C;
    --lc-surface3:     #242424;
    --lc-border:       rgba(201,168,76,.18);
    --lc-border-focus: rgba(201,168,76,.6);
    --lc-text:         #F0EAD6;
    --lc-text-muted:   rgba(240,234,214,.5);
    --lc-text-dim:     rgba(240,234,214,.3);
    --lc-error:        #E05555;
    --lc-success:      #4CAF7D;
    --lc-radius:       10px;
    --lc-radius-lg:    16px;
    --lc-font-body:    'Cairo', 'Segoe UI', sans-serif;
    --lc-font-display: 'Playfair Display', Georgia, serif;
    --lc-shadow:       0 4px 24px rgba(0,0,0,.5);
    --lc-shadow-gold:  0 0 0 1px var(--lc-border), 0 8px 32px rgba(0,0,0,.6);
    --lc-transition:   0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ─────────────────────────────────────────────────── */
.lc-calculator *,
.lc-calculator *::before,
.lc-calculator *::after { box-sizing: border-box; margin: 0; padding: 0; }

.lc-calculator {
    background:    var(--lc-bg);
    color:         var(--lc-text);
    font-family:   var(--lc-font-body);
    font-size:     15px;
    line-height:   1.6;
    border-radius: var(--lc-radius-lg);
    overflow:      hidden;
    box-shadow:    var(--lc-shadow-gold);
    max-width:     960px;
    margin:        2rem auto;
    position:      relative;
}

/* Subtle noise texture overlay */
.lc-calculator::before {
    content:  '';
    position: absolute;
    inset:    0;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.07) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.lc-calculator > * { position: relative; z-index: 1; }

/* ── Header ───────────────────────────────────────────────── */
.lc-header {
    text-align:  center;
    padding:     48px 40px 36px;
    background:  linear-gradient(180deg, rgba(201,168,76,.05) 0%, transparent 100%);
    border-bottom: 1px solid var(--lc-border);
}

.lc-header-badge {
    display:        inline-block;
    font-family:    var(--lc-font-body);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color:          var(--lc-accent);
    background:     var(--lc-accent-dim);
    border:         1px solid var(--lc-border);
    padding:        4px 16px;
    border-radius:  40px;
    margin-bottom:  16px;
}

.lc-title {
    font-family: var(--lc-font-display);
    font-size:   clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 600;
    color:       var(--lc-accent);
    line-height: 1.3;
    margin-bottom: 8px;
    /* Gold text shimmer */
    background: linear-gradient(90deg, #B8953C, #E8CC82, #B8953C);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: lc-shimmer 4s linear infinite;
}

@keyframes lc-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.lc-subtitle {
    color:     var(--lc-text-muted);
    font-size: 14px;
    font-weight: 300;
}

/* ── Form ─────────────────────────────────────────────────── */
.lc-form {
    padding: 36px 40px 28px;
}

.lc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
}

@media (max-width: 680px) {
    .lc-form-grid { grid-template-columns: 1fr; }
    .lc-form, .lc-header { padding-inline: 20px; }
}

/* ── Field ────────────────────────────────────────────────── */
.lc-field {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    margin-bottom:  18px;
}

.lc-field label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--lc-text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.lc-req { color: var(--lc-accent); }

.lc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.lc-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.lc-input-wrap input {
    width:            100%;
    background:       var(--lc-surface2);
    border:           1px solid var(--lc-border);
    border-radius:    var(--lc-radius);
    color:            var(--lc-text);
    font-family:      var(--lc-font-body);
    font-size:        15px;
    padding:          11px 56px 11px 14px;
    transition:       border-color var(--lc-transition), box-shadow var(--lc-transition), background var(--lc-transition);
    -moz-appearance: textfield;
}

.lc-calculator[dir="rtl"] .lc-input-wrap input {
    padding: 11px 14px 11px 56px;
}

.lc-input-wrap input::-webkit-outer-spin-button,
.lc-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }

.lc-input-wrap input:focus {
    outline:    none;
    border-color: var(--lc-border-focus);
    background:   var(--lc-surface3);
    box-shadow:   0 0 0 3px var(--lc-accent-dim);
}

.lc-input-wrap input:hover:not(:focus) {
    border-color: rgba(201,168,76,.35);
}

.lc-unit {
    position:    absolute;
    right:       14px;
    font-size:   12px;
    font-weight: 700;
    color:       var(--lc-accent);
    pointer-events: none;
    letter-spacing: .5px;
}

.lc-calculator[dir="rtl"] .lc-unit { right: auto; left: 14px; }

.lc-hint {
    font-size: 11.5px;
    color:     var(--lc-text-dim);
    margin-top: 2px;
}

/* ── Toggle (contract type) ───────────────────────────────── */
.lc-toggle-group {
    display:       flex;
    background:    var(--lc-surface2);
    border:        1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    padding:       4px;
    gap:           4px;
}

.lc-toggle {
    flex:          1;
    background:    transparent;
    border:        none;
    border-radius: calc(var(--lc-radius) - 3px);
    color:         var(--lc-text-muted);
    font-family:   var(--lc-font-body);
    font-size:     13px;
    font-weight:   600;
    padding:       9px 12px;
    cursor:        pointer;
    transition:    all var(--lc-transition);
}

.lc-toggle.active {
    background: var(--lc-accent);
    color:      #0D0D0D;
    box-shadow: 0 2px 8px rgba(201,168,76,.4);
}

.lc-toggle:hover:not(.active) {
    background: var(--lc-surface3);
    color:      var(--lc-text);
}

/* ── Switch toggles ───────────────────────────────────────── */
.lc-switches { display: flex; flex-direction: column; gap: 4px; }

.lc-switch-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         12px 14px;
    background:      var(--lc-surface2);
    border:          1px solid var(--lc-border);
    border-radius:   var(--lc-radius);
    cursor:          pointer;
    transition:      background var(--lc-transition);
    margin-bottom:   4px;
    gap:             12px;
}

.lc-switch-row:hover { background: var(--lc-surface3); }

.lc-switch-label {
    font-size:  13px;
    font-weight: 500;
    color:      var(--lc-text-muted);
    flex:       1;
}

.lc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.lc-switch input { opacity: 0; width: 0; height: 0; }

.lc-slider {
    position:      absolute;
    inset:         0;
    background:    var(--lc-surface3);
    border:        1px solid var(--lc-border);
    border-radius: 24px;
    transition:    all var(--lc-transition);
    cursor:        pointer;
}

.lc-slider::before {
    content:       '';
    position:      absolute;
    width:         16px;
    height:        16px;
    left:          3px;
    top:           3px;
    background:    var(--lc-text-dim);
    border-radius: 50%;
    transition:    all var(--lc-transition);
}

.lc-switch input:checked + .lc-slider {
    background:   var(--lc-accent);
    border-color: var(--lc-accent);
    box-shadow:   0 0 8px var(--lc-accent-glow);
}

.lc-switch input:checked + .lc-slider::before {
    left:       calc(100% - 19px);
    background: #0D0D0D;
}

/* RTL slider */
.lc-calculator[dir="rtl"] .lc-slider::before { left: auto; right: 3px; }
.lc-calculator[dir="rtl"] .lc-switch input:checked + .lc-slider::before { right: calc(100% - 19px); left: auto; }

/* ── Legal note ───────────────────────────────────────────── */
.lc-legal-note {
    display:       flex;
    gap:           12px;
    padding:       14px 16px;
    background:    rgba(201,168,76,.06);
    border:        1px solid rgba(201,168,76,.2);
    border-inline-start: 3px solid var(--lc-accent);
    border-radius: var(--lc-radius);
    margin-top:    8px;
}

.lc-note-icon { font-size: 18px; line-height: 1.5; flex-shrink: 0; }

.lc-legal-note p { font-size: 12.5px; color: var(--lc-text-muted); line-height: 1.7; }

/* ── Submit button ────────────────────────────────────────── */
.lc-submit-row {
    display:         flex;
    justify-content: center;
    padding:         8px 0 24px;
}

.lc-btn-calculate {
    position:      relative;
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    background:    linear-gradient(135deg, #B8953C, var(--lc-accent), #E8CC82, var(--lc-accent));
    background-size: 300% 100%;
    border:        none;
    border-radius: var(--lc-radius);
    color:         #0D0D0D;
    font-family:   var(--lc-font-body);
    font-size:     15px;
    font-weight:   700;
    letter-spacing: .5px;
    padding:       14px 48px;
    cursor:        pointer;
    transition:    background-position .5s ease, transform .2s, box-shadow .2s;
    box-shadow:    0 4px 16px rgba(201,168,76,.4);
    min-width:     240px;
    justify-content: center;
}

.lc-btn-calculate:hover {
    background-position: right center;
    transform:    translateY(-2px);
    box-shadow:   0 8px 24px rgba(201,168,76,.5);
}

.lc-btn-calculate:active { transform: translateY(0); }

.lc-btn-calculate.lc-loading .lc-btn-text { opacity: 0; }
.lc-btn-calculate.lc-loading .lc-btn-loader { display: block; }

.lc-btn-loader {
    display:      none;
    position:     absolute;
    width:        20px;
    height:       20px;
    border:       2px solid rgba(0,0,0,.2);
    border-top:   2px solid #0D0D0D;
    border-radius: 50%;
    animation:    lc-spin .7s linear infinite;
}

@keyframes lc-spin { to { transform: rotate(360deg); } }

/* ── Results ──────────────────────────────────────────────── */
.lc-results {
    padding:       0 40px 40px;
    animation:     lc-fadeUp .4s ease;
}

@keyframes lc-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-results-header {
    text-align:    center;
    padding:       28px 0 24px;
    border-top:    1px solid var(--lc-border);
    margin-bottom: 24px;
}

.lc-results-header h3 {
    font-family: var(--lc-font-display);
    font-size:   1.4rem;
    color:       var(--lc-accent);
    margin-bottom: 6px;
}

.lc-results-header p { font-size: 13px; color: var(--lc-text-muted); }

/* ── Cards grid ───────────────────────────────────────────── */
.lc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.lc-card {
    background:    var(--lc-surface);
    border:        1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding:       20px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    transition:    transform var(--lc-transition), box-shadow var(--lc-transition), border-color var(--lc-transition);
    animation:     lc-cardIn .35s ease both;
}

.lc-card:hover {
    transform:    translateY(-3px);
    box-shadow:   0 8px 28px rgba(0,0,0,.4);
    border-color: var(--lc-border-focus);
}

@keyframes lc-cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* stagger */
.lc-card:nth-child(1) { animation-delay: .04s; }
.lc-card:nth-child(2) { animation-delay: .08s; }
.lc-card:nth-child(3) { animation-delay: .12s; }
.lc-card:nth-child(4) { animation-delay: .16s; }
.lc-card:nth-child(5) { animation-delay: .20s; }
.lc-card:nth-child(6) { animation-delay: .24s; }
.lc-card:nth-child(7) { animation-delay: .28s; }

.lc-card-icon {
    width:         38px;
    height:        38px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    var(--lc-accent-dim);
    border:        1px solid var(--lc-border);
    border-radius: 8px;
    font-size:     18px;
}

.lc-card-label {
    font-size:   12.5px;
    font-weight: 600;
    color:       var(--lc-text-muted);
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1.4;
}

.lc-card-value {
    font-family: var(--lc-font-display);
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--lc-accent-light);
    letter-spacing: .5px;
}

.lc-card-note {
    font-size: 11.5px;
    color:     var(--lc-text-dim);
    border-top: 1px solid var(--lc-border);
    padding-top: 8px;
    margin-top: 2px;
}

/* ── Grand total ──────────────────────────────────────────── */
.lc-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         22px 28px;
    background:      linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.06));
    border:          1px solid var(--lc-border-focus);
    border-radius:   var(--lc-radius-lg);
    margin-top:      8px;
    flex-wrap:       wrap;
    gap:             12px;
    box-shadow:      0 0 0 1px rgba(201,168,76,.1), inset 0 1px 0 rgba(255,255,255,.04);
}

.lc-total-label {
    font-size:   14px;
    font-weight: 700;
    color:       var(--lc-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lc-total-amount {
    font-family: var(--lc-font-display);
    font-size:   clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color:       var(--lc-accent);
    text-shadow: 0 0 24px var(--lc-accent-glow);
}

/* ── Disclaimer ───────────────────────────────────────────── */
.lc-disclaimer {
    text-align:  center;
    font-size:   11.5px;
    color:       var(--lc-text-dim);
    margin-top:  18px;
    padding-top: 18px;
    border-top:  1px solid var(--lc-border);
}

/* ── Error ────────────────────────────────────────────────── */
.lc-error {
    margin: 0 40px 24px;
    padding: 14px 18px;
    background: rgba(224,85,85,.1);
    border:      1px solid rgba(224,85,85,.35);
    border-radius: var(--lc-radius);
    color:       var(--lc-error);
    font-size:   14px;
    animation:   lc-fadeUp .3s ease;
}

/* ── RTL specifics ────────────────────────────────────────── */
.lc-calculator[dir="rtl"] { direction: rtl; }
.lc-calculator[dir="rtl"] .lc-legal-note { border-inline-start: none; border-inline-end: 3px solid var(--lc-accent); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .lc-results { padding-inline: 20px; }
    .lc-total-row { padding: 16px 18px; }
    .lc-cards { grid-template-columns: 1fr; }
    .lc-field-row { grid-template-columns: 1fr; }
}