/*
 * GE Credite & Finantare — Unified Stylesheet
 * Mobile-first, .brns-calculator namespace, clean light grey theme.
 * v1.0.8
 */

/* ═══════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Grey accent palette — variable names kept for JS/PHP compatibility */
    --brns-gold-1:      #64748b;   /* slate-500 */
    --brns-gold-2:      #f1f5f9;   /* slate-100 */
    --brns-gold-3:      #475569;   /* slate-600 */
    --brns-gold-4:      #334155;   /* slate-700 */
    --brns-gold-dark:   #1e293b;   /* slate-800 */

    --brns-bg:          #f3f6f9;
    --brns-bg-card:     #ffffff;
    --brns-bg-input:    #f1f5f9;
    --brns-bg-results:  #f4f7fa;
    --brns-text:        #1e293b;
    --brns-text-muted:  #64748b;
    --brns-border:      rgba(0,0,0,0.08);
    --brns-green:       #16a34a;
    --brns-red:         #dc2626;
    --brns-radius:      16px;
    --brns-radius-sm:   8px;
    --brns-radius-xs:   4px;
    --brns-transition:  0.2s ease;
    --brns-shadow:      0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --brns-shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
}

/* ═══════════════════════════════════════════════════════════════════
   2. GLOBAL BOX-SIZING + RESET
   ═══════════════════════════════════════════════════════════════════ */
.brns-calculator *,
.brns-calculator *::before,
.brns-calculator *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   3. CALCULATOR WRAPPER
   ═══════════════════════════════════════════════════════════════════ */
.brns-calculator {
    background: #fbfbfb;
    border:        none;
    border-radius: 0;
    box-shadow: none;
    color:         var(--brns-text);
    font-family:   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size:     15px;
    line-height:   1.6;
    margin:        0 auto 2em;
    max-width: 100vw;
    overflow:      hidden;
    padding:       0;
    width:         100%;
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════════════════════════════ */
.brns-calc-header {
    background: #1e293b00;
    padding:     36px 40px 32px;
    text-align: left;
}

/* !important overrides any theme/page CSS that may recolour headings */
.brns-calc-title {
    color: #393939 !important;
    font-size:      clamp(1.2rem, 3vw, 1.75rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    margin:         0 0 8px;
    text-shadow:    none !important;
    line-height:    1.3;
}

.brns-calc-subtitle {
    color:     #94a3b8 !important;
    font-size: 0.9rem;
    margin:    0;
    opacity:   1;
}

/* ═══════════════════════════════════════════════════════════════════
   5. BODY / FIELD GROUPS
   ═══════════════════════════════════════════════════════════════════ */
.brns-calc-body {
    padding: 32px 36px;
}

.brns-field-group {
    margin-bottom: 28px;
}

.brns-field-group:last-child {
    margin-bottom: 0;
}

.brns-label {
    color:          #374151;
    display:        block;
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    margin-bottom:  8px;
    text-transform: uppercase;
}

.brns-label small {
    font-size:      0.78rem;
    font-weight:    400;
    letter-spacing: 0;
    opacity:        0.7;
    text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   6. INPUTS
   ═══════════════════════════════════════════════════════════════════ */
.brns-input {
    appearance:    none;
    background:    var(--brns-bg-input);
    border:        1px solid rgba(0,0,0,0.1);
    border-radius: var(--brns-radius-sm);
    color:         var(--brns-text);
    font-size:     0.95rem;
    padding:       10px 14px;
    transition:    border-color var(--brns-transition), box-shadow var(--brns-transition);
    width:         100%;
}

.brns-input:focus {
    border-color: #64748b;
    box-shadow:   0 0 0 3px rgba(100,116,139,0.15);
    outline:      none;
}

/* Hide browser number-input spinners — they overlap the unit suffix */
.brns-input[type="number"]::-webkit-inner-spin-button,
.brns-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.brns-input[type="number"] {
    -moz-appearance: textfield;
}

.brns-input--small  { width: 80px; }
.brns-input--medium { width: 130px; }

/* Input + suffix unit (Lei / Luni) */
.brns-input-suffix {
    align-items: center;
    display:     flex;
    gap:         10px;
}

.brns-input-suffix .brns-input {
    flex: 1;
}

.brns-suffix {
    color:       #64748b;
    flex-shrink: 0;
    font-size:   0.85rem;
    font-weight: 600;
    min-width:   28px;
    white-space: nowrap;
}

/* Select */
.brns-select {
    appearance:    none;
    background:    var(--brns-bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 10px;
    border:        1px solid rgba(0,0,0,0.1);
    border-radius: var(--brns-radius-sm);
    color:         var(--brns-text);
    cursor:        pointer;
    font-size:     0.95rem;
    padding:       10px 36px 10px 14px;
    transition:    border-color var(--brns-transition), box-shadow var(--brns-transition);
    width:         100%;
}

.brns-select:focus {
    border-color: #64748b;
    box-shadow:   0 0 0 3px rgba(100,116,139,0.15);
    outline:      none;
}

/* ═══════════════════════════════════════════════════════════════════
   7. RANGE SLIDER
   ═══════════════════════════════════════════════════════════════════ */
.brns-slider-wrap,
.brns-slider-row {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

@media (min-width: 480px) {
    .brns-slider-row {
        align-items: center;
        flex-direction: row;
    }
    .brns-slider-row .brns-slider {
        flex: 1;
    }
}

.brns-slider {
    -webkit-appearance: none;
    appearance:         none;
    background:         linear-gradient(to right, #475569 0%, #475569 var(--val, 0%), #dde3ea var(--val, 0%));
    border-radius:      99px;
    cursor:             pointer;
    height:             5px;
    outline:            none;
    width: 94%;
    margin:             8px 0 4px;
}

.brns-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    background:         #334155;
    border:             none;
    border-radius:      50%;
    box-shadow:         0 1px 6px rgba(0,0,0,0.25);
    cursor:             pointer;
    height:             20px;
    width:              20px;
    transition:         box-shadow var(--brns-transition);
}

.brns-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.brns-slider::-moz-range-thumb {
    background:    #334155;
    border:        none;
    border-radius: 50%;
    box-shadow:    0 1px 6px rgba(0,0,0,0.25);
    cursor:        pointer;
    height:        20px;
    width:         20px;
}

.brns-slider-limits {
    color:           var(--brns-text-muted);
    display:         flex;
    font-size:       0.72rem;
    font-weight:     500;
    justify-content: space-between;
    letter-spacing:  0.03em;
    margin-top:      2px;
    opacity:         0.75;
    width: 94%;
}

/* ═══════════════════════════════════════════════════════════════════
   8. TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════════════ */
.brns-toggle-label {
    align-items: center;
    cursor:      pointer;
    display:     flex;
    gap:         10px;
    user-select: none;
}

.brns-toggle {
    display: none;
}

.brns-toggle-track {
    background:     #dde3ea;
    border:         none;
    border-radius:  99px;
    flex-shrink:    0;
    height:         24px;
    position:       relative;
    transition:     background var(--brns-transition);
    width:          44px;
}

.brns-toggle-track::after {
    background:    #ffffff;
    border-radius: 50%;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
    content:       '';
    height:        18px;
    left:          3px;
    position:      absolute;
    top:           3px;
    transition:    transform var(--brns-transition), background var(--brns-transition);
    width:         18px;
}

.brns-toggle:checked + .brns-toggle-track {
    background: #475569;
}

.brns-toggle:checked + .brns-toggle-track::after {
    background:  #ffffff;
    transform:   translateX(20px);
}

/* Checkbox */
.brns-checkbox-label {
    align-items: center;
    color:       var(--brns-text);
    cursor:      pointer;
    display:     flex;
    gap:         8px;
}

.brns-checkbox {
    accent-color: #475569;
    cursor:       pointer;
    height:       16px;
    width:        16px;
}

/* ═══════════════════════════════════════════════════════════════════
   9. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.brns-btn {
    border:         none !important;
    border-radius:  var(--brns-radius-sm);
    cursor:         pointer;
    display:        inline-block;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        12px 32px;
    text-align:     center;
    text-transform: uppercase;
    transition:     background var(--brns-transition), box-shadow var(--brns-transition), transform var(--brns-transition);
}

.brns-btn--gold {
    background:  #334155 !important;
    box-shadow:  0 2px 8px rgba(51,65,85,0.25) !important;
    color:       #ffffff !important;
}

.brns-btn--gold:hover {
    background:  #3d4f69 !important;
    box-shadow:  0 4px 14px rgba(51,65,85,0.35) !important;
    transform:   translateY(-1px);
}

.brns-btn--gold:active {
    background:  #2b3649 !important;
    box-shadow:  0 1px 4px rgba(51,65,85,0.2) !important;
    transform:   translateY(0);
}

.brns-btn--full {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   10. RESULTS BOX
   ═══════════════════════════════════════════════════════════════════ */
.brns-results {
    background:   var(--brns-bg-results);
    border-top:   none;
    padding: 32px;
}

.brns-results--gold {
    background:   var(--brns-bg-results);
    border-top:   none;
}

.brns-results--juridic {
    /* padding-top: 0; */
    border-top:  none;
}

.brns-results-grid {
    display:               grid;
    gap:                   14px;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.brns-result-item {
    background:    #ffffff;
    border:        none;
    border-radius: var(--brns-radius-sm);
    box-shadow:    var(--brns-shadow-sm);
    padding:       16px 18px;
    text-align: left;
}

.brns-result-item--highlight {
    background:    #eef2f7;
    border-left:   3px solid #475569;
    box-shadow:    0 2px 8px rgba(0,0,0,0.08);
    padding-left:  15px;
}

.brns-results-grid--gold .brns-result-item--highlight {
    background:  #eef2f7;
    border-left: 3px solid #334155;
}

.brns-result-label {
    color:          var(--brns-text-muted);
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    margin-bottom:  6px;
    text-transform: uppercase;
}

.brns-result-value {
    color:       #1e293b;
    display:     block;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

.brns-result-value--large {
    font-size: 17px;
}

/* ═══════════════════════════════════════════════════════════════════
   11. STATUS BADGE
   ═══════════════════════════════════════════════════════════════════ */
.brns-result-status {
    margin-top: 16px;
    min-height: 24px;
    text-align: center;
}

.brns-status {
    border-radius: 20px;
    display:       inline-block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding:       4px 18px;
    text-transform: uppercase;
}

.brns-status--approved {
    background: rgba(22, 163, 74, 0.12);
    border:     1px solid var(--brns-green);
    color:      var(--brns-green);
}

.brns-status--rejected {
    background: rgb(220 38 38 / 78%);
    border: 0px solid var(--brns-red);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   12. FOOTER NOTES
   ═══════════════════════════════════════════════════════════════════ */
.brns-footer-notes {
    background:  #f8fafc;
    border-top:  none;
    color:       var(--brns-text-muted);
    font-size:   0.78rem;
    line-height: 1.7;
    padding:     20px 36px;
}

/* ═══════════════════════════════════════════════════════════════════
   13. FIELD ROW — two equal columns
   ═══════════════════════════════════════════════════════════════════ */
.brns-field-row {
    display:               grid;
    gap:                   20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom:         28px;
}

@media (max-width: 560px) {
    .brns-field-row {
        grid-template-columns: 1fr;
    }
}

.brns-field-note {
    color:     var(--brns-text-muted);
    font-size: 0.75rem;
    margin:    5px 0 0;
}

/* WooCommerce price-sync badge */
.brns-wc-badge {
    background:     rgba(130, 90, 210, 0.15);
    border:         1px solid rgba(160, 110, 230, 0.4);
    border-radius:  var(--brns-radius-xs);
    color:          #c49ef0;
    display:        inline-block;
    font-size:      0.6rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    margin-left:    7px;
    padding:        1px 5px 2px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   14. ALIASES — ipotecar / personal naming conventions
   ═══════════════════════════════════════════════════════════════════ */

.brns-row {
    display:       flex;
    flex-wrap:     wrap;
    gap:           16px;
    margin-bottom: 16px;
}

.brns-col-4  { flex: 1 1 calc(33.333% - 12px); min-width: 120px; }
.brns-col-6  { flex: 1 1 calc(50% - 8px);       min-width: 120px; }
.brns-col-8  { flex: 1 1 calc(66.667% - 12px);  min-width: 160px; }
.brns-col-12 { flex: 1 1 100%; }

@media (max-width: 600px) {
    .brns-col-4,
    .brns-col-6,
    .brns-col-8 {
        flex: 1 1 100%;
    }
}

/* Results row (ipotecar) */
.brns-row-gold {
    background:  var(--brns-bg-results);
    border-top:  none;
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px 16px;
    padding:     28px 36px;
}

.brns-row-last {
    border-top: none;
    padding:    20px 36px;
}

/* Number input wrapper */
.brns-number-wrap {
    align-items: center;
    display:     flex;
    gap:         10px;
}

/* Number input — also hides spinners */
.brns-number-input {
    appearance:    none;
    background:    var(--brns-bg-input);
    border:        1px solid rgba(0,0,0,0.1);
    border-radius: var(--brns-radius-sm);
    color:         var(--brns-text);
    font-size:     0.95rem;
    padding:       10px 14px;
    transition:    border-color var(--brns-transition), box-shadow var(--brns-transition);
    width:         100%;
}

.brns-number-input:focus {
    border-color: #64748b;
    box-shadow:   0 0 0 3px rgba(100,116,139,0.15);
    outline:      none;
}

/* Hide spinners — critical: prevents overlap with .brns-unit suffix */
.brns-number-input[type="number"]::-webkit-inner-spin-button,
.brns-number-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.brns-number-input[type="number"] {
    -moz-appearance: textfield;
}

.brns-number-wrap .brns-number-input { flex: 1; }

/* Unit suffix */
.brns-unit {
    color:       #64748b;
    flex-shrink: 0;
    font-size:   0.85rem;
    font-weight: 600;
    min-width:   28px;
    white-space: nowrap;
}

/* Range slider alias */
.brns-range-slider {
    -webkit-appearance: none;
    appearance:         none;
    background:         linear-gradient(to right, #475569 0%, #475569 var(--val, 0%), #dde3ea var(--val, 0%));
    border-radius:      99px;
    cursor:             pointer;
    height:             5px;
    margin:             8px 0 4px;
    outline:            none;
    width:              100%;
}

.brns-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    background:         #334155;
    border:             none;
    border-radius:      50%;
    box-shadow:         0 1px 6px rgba(0,0,0,0.25);
    cursor:             pointer;
    height:             20px;
    width:              20px;
    transition:         box-shadow var(--brns-transition);
}

.brns-range-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.brns-range-slider::-moz-range-thumb {
    background:    #334155;
    border:        none;
    border-radius: 50%;
    box-shadow:    0 1px 6px rgba(0,0,0,0.25);
    cursor:        pointer;
    height:        20px;
    width:         20px;
}

/* Grey button alias */
.brns-btn-gold {
    background:     #334155 !important;
    border:         none !important;
    border-radius:  var(--brns-radius-sm);
    box-shadow:     0 2px 8px rgba(51,65,85,0.25) !important;
    color:          #ffffff !important;
    cursor:         pointer;
    display:        inline-block;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        12px 32px;
    text-transform: uppercase;
    transition:     background var(--brns-transition), box-shadow var(--brns-transition), transform var(--brns-transition);
}

.brns-btn-gold:hover {
    background:  #3d4f69 !important;
    box-shadow:  0 4px 14px rgba(51,65,85,0.35) !important;
    transform:   translateY(-1px);
}

.brns-btn-gold:active {
    background:  #2b3649 !important;
    transform:   translateY(0);
}

.brns-btn-wrap { margin-top: 8px; }

/* Accent text */
.brns-gold {
    color:       #475569;
    font-weight: 600;
}

.brns-disclaimer {
    color:     var(--brns-text-muted);
    font-size: 0.78rem;
    margin:    8px 0 0;
}

.brns-asig {
    color:     var(--brns-text-muted);
    flex:      1 1 100%;
    font-size: 0.78rem;
    padding:   6px 0 0;
}

/* Toggle group row (personal) */
.brns-toggle-group {
    align-items: center;
    display:     flex;
    gap:         12px;
}

/* Toggle switch — .brns-switch (personal) */
.brns-switch {
    cursor:   pointer;
    display:  inline-block;
    height:   26px;
    position: relative;
    width:    48px;
}

.brns-switch input { display: none; }

.brns-toggle-slider {
    background:    #dde3ea;
    border:        none;
    border-radius: 99px;
    bottom:        0;
    cursor:        pointer;
    left:          0;
    position:      absolute;
    right:         0;
    top:           0;
    transition:    background var(--brns-transition);
}

.brns-toggle-slider::before {
    background:    #ffffff;
    border-radius: 50%;
    bottom:        3px;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
    content:       '';
    height:        18px;
    left:          3px;
    position:      absolute;
    transition:    transform var(--brns-transition);
    width:         18px;
}

.brns-switch input:checked + .brns-toggle-slider {
    background: #475569;
}

.brns-switch input:checked + .brns-toggle-slider::before {
    transform: translateX(22px);
}

.brns-toggle-slider.brns-round { border-radius: 99px; }
.brns-toggle-slider.brns-round::before { border-radius: 50%; }

/* Results box (personal) */
.brns-results-box {
    background:    var(--brns-bg-results);
    border:        none;
    border-radius: var(--brns-radius-sm);
    padding:       20px 24px;
}

.brns-result-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display:       flex;
    justify-content: space-between;
    padding:       11px 0;
}

.brns-result-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════
   15. CALC-SPECIFIC LAYOUTS
   ═══════════════════════════════════════════════════════════════════ */

/* Info row (ipotecar) */
.brns-info-row {
    background:    #eef2f7;
    border:        none;
    border-radius: var(--brns-radius-sm);
    color:         #475569;
    display:       flex;
    flex-wrap:     wrap;
    font-size:     0.83rem;
    gap:           10px 24px;
    margin-top:    16px;
    padding:       12px 16px;
}

.brns-info-row span strong {
    color: #1e293b;
}

.brns-fixa-row.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   16. TWO-COLUMN LAYOUT (desktop)
   ═══════════════════════════════════════════════════════════════════ */

/* Remove base padding so child cols control their own */
.brns-calc-body.brns-calc-body--two-col {
    padding: 0;
}

@media (min-width: 640px) {
    .brns-calc-body--two-col {
        display:               grid;
        gap:                   0;
        grid-template-columns: 1fr 1fr;
    }

    .brns-calc-body--two-col .brns-col-left {
        padding: 32px 28px 32px 36px;
    }

    .brns-calc-body--two-col .brns-col-right {
        background: var(--brns-bg-results);
        padding:    32px 36px 32px 28px;
    }
}

/* Mobile: stack columns, restore padding */
@media (max-width: 639px) {
    .brns-calc-body--two-col .brns-col-left {
        padding: 24px 20px;
    }

    .brns-calc-body--two-col .brns-col-right {
        background: var(--brns-bg-results);
        padding:    24px 20px;
    }
}

/* Tablet override for right-col padding */
@media (min-width: 640px) and (max-width: 767px) {
    .brns-calc-body--two-col .brns-col-left {
        padding: 24px 20px 24px 24px;
    }

    .brns-calc-body--two-col .brns-col-right {
        padding: 24px 24px 24px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   17. SOLAR SYSTEM — PARTENERI
   ═══════════════════════════════════════════════════════════════════ */
.brns-parteneri-wrap {
    align-items:     center;
    background:      radial-gradient(ellipse at center, #0a0a1a 0%, #000005 80%);
    display:         flex;
    justify-content: center;
    overflow:        hidden;
    position:        relative;
    width:           100%;
}

.brns-parteneri-wrap .conts {
    height:   100%;
    left:     50%;
    position: absolute;
    top:      50%;
    transform: translate(-50%, -50%);
    width:    100%;
}

.brns-parteneri-wrap .view-3D {
    perspective: 1000px;
}

.brns-parteneri-wrap .scale-stretched {
    height:          100%;
    transform-style: preserve-3d;
    width:           100%;
}

#brns-universe,
#brns-galaxy {
    height:          100%;
    left:            0;
    position:        absolute;
    top:             0;
    transform-style: preserve-3d;
    width:           100%;
}

#brns-solar-system {
    height:          0;
    left:            50%;
    position:        absolute;
    top:             50%;
    transform-style: preserve-3d;
    width:           0;
}

#brns-solar-system.earth {
    transform: rotateX(75deg);
}

#brns-sun {
    background:   radial-gradient(circle at 40% 40%, #fff7c0, #ffd700 40%, #ff8c00 70%, #cc4400);
    border-radius: 50%;
    box-shadow:   0 0 60px 20px rgba(255,200,0,0.6), 0 0 120px 40px rgba(255,150,0,0.3);
    height:       70px;
    left:         -35px;
    position:     absolute;
    top:          -35px;
    width:        70px;
    z-index:      10;
}

.brns-sun-logo {
    border-radius: 50%;
    height:        100%;
    object-fit:    contain;
    padding:       6px;
    width:         100%;
}

.orbit {
    animation:       orbit linear infinite;
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   50%;
    position:        absolute;
    transform-style: preserve-3d;
}

.orbit .pos {
    left:            0;
    position:        absolute;
    top:             50%;
    transform-style: preserve-3d;
}

.orbit .planet {
    animation:       suborbit linear infinite;
    background:      #333 center/cover no-repeat;
    border-radius:   50%;
    box-shadow:      inset -4px -4px 10px rgba(0,0,0,0.6), inset 4px 4px 10px rgba(255,255,255,0.05);
    cursor:          pointer;
    position:        relative;
    transform-style: preserve-3d;
}

.brns-planet-link {
    border-radius: 50%;
    bottom:   0;
    left:     0;
    position: absolute;
    right:    0;
    top:      0;
}

#saturn .ring {
    border:        4px solid rgba(255,220,100,0.3);
    border-radius: 50%;
    height:        140%;
    left:          -20%;
    position:      absolute;
    top:           -20%;
    transform:     rotateX(80deg);
    width:         140%;
}

#mercury { width: 100px; height: 100px; margin: -50px; }
#mercury .pos { margin-top: -8px; }
#mercury .planet { width: 16px; height: 16px; animation-duration: 4s; }
#mercury { animation-duration: 4s; }

#venus { width: 150px; height: 150px; margin: -75px; }
#venus .pos { margin-top: -11px; }
#venus .planet { width: 22px; height: 22px; animation-duration: 7s; }
#venus { animation-duration: 7s; }

#earth { width: 210px; height: 210px; margin: -105px; }
#earth .pos { margin-top: -13px; }
#earth .planet { width: 26px; height: 26px; animation-duration: 11s; }
#earth { animation-duration: 11s; }

#mars { width: 280px; height: 280px; margin: -140px; }
#mars .pos { margin-top: -11px; }
#mars .planet { width: 22px; height: 22px; animation-duration: 16s; }
#mars { animation-duration: 16s; }

#bant { width: 360px; height: 360px; margin: -180px; }
#bant .pos { margin-top: -14px; }
#bant .planet { width: 28px; height: 28px; animation-duration: 24s; }
#bant { animation-duration: 24s; }

#jupiter { width: 450px; height: 450px; margin: -225px; }
#jupiter .pos { margin-top: -18px; }
#jupiter .planet { width: 36px; height: 36px; animation-duration: 34s; }
#jupiter { animation-duration: 34s; }

#firstbank { width: 550px; height: 550px; margin: -275px; }
#firstbank .pos { margin-top: -16px; }
#firstbank .planet { width: 32px; height: 32px; animation-duration: 44s; }
#firstbank { animation-duration: 44s; }

#clarnet { width: 660px; height: 660px; margin: -330px; }
#clarnet .pos { margin-top: -16px; }
#clarnet .planet { width: 32px; height: 32px; animation-duration: 54s; }
#clarnet { animation-duration: 54s; }

#saturn { width: 770px; height: 770px; margin: -385px; }
#saturn .pos { margin-top: -18px; }
#saturn .planet { width: 36px; height: 36px; animation-duration: 64s; }
#saturn { animation-duration: 64s; }

#uranus { width: 890px; height: 890px; margin: -445px; }
#uranus .pos { margin-top: -16px; }
#uranus .planet { width: 32px; height: 32px; animation-duration: 76s; }
#uranus { animation-duration: 76s; }

#neptune { width: 1020px; height: 1020px; margin: -510px; }
#neptune .pos { margin-top: -16px; }
#neptune .planet { width: 32px; height: 32px; animation-duration: 90s; }
#neptune { animation-duration: 90s; }

@keyframes orbit {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(360deg); }
}

@keyframes suborbit {
    from { transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
    to   { transform: rotateX(-90deg) rotateY(0deg)   rotateZ(0deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   18. RESPONSIVE — TABLET
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .brns-calc-header  { padding: 24px 20px 20px; }
    .brns-calc-body    { padding: 24px 20px; }
    .brns-results      { padding: 24px 20px; }
    .brns-footer-notes { padding: 16px 20px; }
    .brns-row-gold     { padding: 20px 20px; }
    .brns-row-last     { padding: 16px 20px; }

    .brns-results-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   19. RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .brns-calculator {
        border-radius: 10px;
    }

    .brns-results-grid {
        grid-template-columns: 1fr;
    }

    .brns-result-value--large {
        font-size: 1.3rem;
    }

    .brns-btn,
    .brns-btn-gold {
        padding: 11px 20px;
        width:   100%;
    }

    .brns-input--small,
    .brns-input--medium {
        width: 70px;
    }

    .brns-parteneri-wrap {
        min-height: 300px !important;
    }

    #brns-solar-system.earth {
        transform: rotateX(75deg) scale(0.45);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   20. ACCESSIBILITY — REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .orbit,
    .orbit .planet {
        animation: none !important;
    }

    .brns-btn,
    .brns-btn-gold,
    .brns-input,
    .brns-select,
    .brns-toggle-track,
    .brns-toggle-track::after,
    .brns-toggle-slider {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   21. LIGHT MODE OVERRIDE (optional — add .brns-light to wrapper)
   ═══════════════════════════════════════════════════════════════════ */
.brns-calculator.brns-light {
    --brns-bg-card:    #ffffff;
    --brns-bg-input:   #f1f5f9;
    --brns-text:       #1a1a1a;
    --brns-text-muted: #64748b;
    --brns-border:     rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   22. QUOTE REQUEST BUTTON + MODAL
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trigger button ───────────────────────────────────────────────── */
.brns-quote-btn {
    background:     #334155 !important;
    border:         none !important;
    border-radius:  var(--brns-radius-sm);
    box-shadow:     0 2px 8px rgba(51,65,85,0.25) !important;
    color:          #ffffff !important;
    cursor:         pointer;
    display:        inline-block;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        12px 32px;
    text-align:     center;
    text-transform: uppercase;
    transition:     background var(--brns-transition), box-shadow var(--brns-transition), transform var(--brns-transition);
}

.brns-quote-btn:hover {
    background:  #3d4f69 !important;
    box-shadow:  0 4px 14px rgba(51,65,85,0.35) !important;
    transform:   translateY(-1px);
}

.brns-quote-btn:active {
    background:  #2b3649 !important;
    transform:   translateY(0);
}

.brns-quote-btn-wrap {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
}

/* ── Modal overlay ────────────────────────────────────────────────── */
#brns-quote-overlay {
    align-items:     center;
    background:      rgba(15,23,42,0.55);
    bottom:          0;
    display:         none;
    justify-content: center;
    left:            0;
    padding:         16px;
    position:        fixed;
    right:           0;
    top:             0;
    z-index:         99999;
}

#brns-quote-overlay.brns-modal-open {
    display: flex;
}

/* ── Dialog box ───────────────────────────────────────────────────── */
.brns-quote-dialog {
    background:    #ffffff;
    border:        none;
    border-radius: var(--brns-radius);
    box-shadow:    0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
    box-sizing:    border-box;
    max-height:    90vh;
    max-width:     480px;
    overflow-y:    auto;
    padding:       32px 32px 28px;
    position:      relative;
    width:         100%;
}

/* ── Modal header ─────────────────────────────────────────────────── */
.brns-quote-header {
    align-items:     center;
    border-bottom:   none;
    display:         flex;
    justify-content: space-between;
    margin-bottom:   20px;
    padding-bottom:  0;
}

.brns-quote-title {
    color:       #1e293b;
    font-size:   1.1rem;
    font-weight: 700;
    margin:      0;
    letter-spacing: 0.01em;
}

.brns-quote-close {
    align-items:     center;
    background:      transparent;
    border:          none;
    border-radius:   50%;
    color:           #94a3b8;
    cursor:          pointer;
    display:         flex;
    flex-shrink:     0;
    font-size:       1.4rem;
    height:          34px;
    justify-content: center;
    line-height:     1;
    padding:         0;
    transition:      background var(--brns-transition), color var(--brns-transition);
    width:           34px;
}

.brns-quote-close:hover {
    background: #f1f5f9;
    color:      #1e293b;
}

/* ── Description ──────────────────────────────────────────────────── */
.brns-quote-desc {
    color:         var(--brns-text-muted);
    font-size:     0.87rem;
    line-height:   1.6;
    margin-bottom: 20px;
}

/* ── Calc summary table ───────────────────────────────────────────── */
.brns-calc-summary {
    background:    #f8fafc;
    border:        none;
    border-radius: var(--brns-radius-sm);
    margin-bottom: 20px;
    overflow:      hidden;
}

.brns-qsummary-table {
    border-collapse: collapse;
    font-size:       0.84rem;
    width:           100%;
}

.brns-qsummary-table tr + tr {
    border-top: 1px solid rgba(0,0,0,0.05);
}

.brns-qsummary-key {
    color:       var(--brns-text-muted);
    font-size:   0.78rem;
    font-weight: 600;
    padding:     7px 12px;
    white-space: nowrap;
    width:       45%;
}

.brns-qsummary-val {
    color:       #1e293b;
    font-weight: 700;
    padding:     7px 12px;
}

/* ── Form fields ──────────────────────────────────────────────────── */
.brns-qfield {
    margin-bottom: 16px;
}

.brns-qlabel {
    color:          #374151;
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    margin-bottom:  6px;
    text-transform: uppercase;
}

.brns-qreq {
    color:       #94a3b8;
    margin-left: 2px;
}

/* ── Inputs ───────────────────────────────────────────────────────── */
.brns-qinput,
.brns-qtextarea {
    appearance:    none;
    background:    #f8fafc;
    border:        1px solid rgba(0,0,0,0.1);
    border-radius: var(--brns-radius-sm);
    box-sizing:    border-box;
    color:         #1e293b;
    font-size:     0.93rem;
    padding:       10px 14px;
    transition:    border-color var(--brns-transition), box-shadow var(--brns-transition);
    width:         100%;
}

.brns-qinput:focus,
.brns-qtextarea:focus {
    border-color: #64748b;
    box-shadow:   0 0 0 3px rgba(100,116,139,0.15);
    outline:      none;
}

.brns-qtextarea {
    min-height: 82px;
    resize:     vertical;
}

/* ── Error ────────────────────────────────────────────────────────── */
#brns-qerror {
    background:    rgba(220,38,38,0.07);
    border:        1px solid rgba(220,38,38,0.3);
    border-radius: var(--brns-radius-sm);
    color:         #dc2626;
    display:       none;
    font-size:     0.84rem;
    margin-bottom: 14px;
    padding:       9px 14px;
}

#brns-qerror:not(:empty) {
    display: block;
}

/* ── Submit ───────────────────────────────────────────────────────── */
#brns-q-submit {
    background:     #334155 !important;
    border:         none !important;
    border-radius:  var(--brns-radius-sm);
    box-shadow:     0 2px 8px rgba(51,65,85,0.25) !important;
    color:          #ffffff !important;
    cursor:         pointer;
    font-size:      0.9rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    margin-top:     4px;
    padding:        13px;
    text-transform: uppercase;
    transition:     background var(--brns-transition), box-shadow var(--brns-transition), transform var(--brns-transition), opacity var(--brns-transition);
    width:          100%;
}

#brns-q-submit:hover:not(:disabled) {
    background:  #3d4f69 !important;
    box-shadow:  0 4px 14px rgba(51,65,85,0.35) !important;
    transform:   translateY(-1px);
}

#brns-q-submit:active:not(:disabled) {
    background:  #2b3649 !important;
    transform:   translateY(0);
}

#brns-q-submit:disabled {
    cursor:  not-allowed;
    opacity: 0.55;
}

/* ── Success panel ────────────────────────────────────────────────── */
#brns-qsuccess {
    display:    none;
    padding:    12px 0 4px;
    text-align: center;
}

.brns-qsuccess-icon {
    color:         var(--brns-green);
    font-size:     3rem;
    line-height:   1;
    margin-bottom: 12px;
}

.brns-qsuccess-msg {
    color:       #1e293b;
    font-size:   1rem;
    font-weight: 600;
}

/* ── Mobile modal ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .brns-quote-dialog {
        border-radius: 10px;
        padding:       24px 20px 20px;
    }

    .brns-quote-btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   23. WOOCOMMERCE / THEME OVERRIDE GUARDS
       WC product-page scripts call preventDefault() on mousedown
       globally; click + mouseup handlers in quote-modal.js bypass
       this. pointer-events !important overrides any WC injected value.
       z-index raised above WP admin bar and all WC overlays.
   ═══════════════════════════════════════════════════════════════════ */
#brns-quote-overlay {
    z-index: 999999;
}

.brns-quote-dialog,
.brns-quote-dialog *,
.brns-quote-form,
.brns-qinput,
.brns-qtextarea,
.brns-quote-close,
#brns-q-submit {
    pointer-events: auto !important;
}
  