/* ═══════════════════════════════════════════════════════════
   Leview Price Calculator – Styles v2.0
   RTL-first · Equal-height columns · 4 anim modes
   فونت IranSans باید جداگانه در قالب لود شده باشد
═══════════════════════════════════════════════════════════ */

/* ── Wrapper ────────────────────────────────────────────────
   RTL: panel sits on the LEFT, sections on the RIGHT.
   row-reverse + direction:rtl achieves this without JS.    */
.leview-calc-wrapper {
    display:         flex;
    flex-direction:  row-reverse;   /* RTL: sections → right, panel → left */
    gap:             var(--lc-gap, 20px);
    font-family:     var(--lc-font, Tahoma, sans-serif);
    color:           var(--lc-txt, #ffffff);
    direction:       rtl;
    text-align:      right;
    align-items:     stretch;       /* ← both columns same height */
    background:      var(--lc-bg, #1e2a23);
    border-radius:   var(--lc-wrap-radius, 0px);
    padding:         var(--lc-wrap-padding, 0px);
}

/* ── Right column: Sections ─────────────────────────────── */
.leview-calc-sections {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    gap:             var(--lc-section-gap, 12px);
}

.leview-section {
    background:      var(--lc-section-bg, rgba(255,255,255,0.04));
    border:          1px solid var(--lc-section-border, rgba(255,255,255,0.07));
    border-radius:   var(--lc-section-radius, 14px);
    padding:         18px 20px 16px;
    transition:      border-color 0.3s;
}

.leview-section:hover {
    border-color: rgba(1,206,132,0.2);
}

/* Section header */
.leview-section-header {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             10px;
    margin-bottom:   12px;
    flex-direction:  row;   /* icon on right of title in RTL */
}

.ls-icon,
.leview-section-icon {
    color:           var(--lc-accent, #01CE84);
    font-size:       18px;
    display:         flex;
    align-items:     center;
    flex-shrink:     0;
}

.ls-icon svg,   .ls-icon i,
.leview-section-icon svg, .leview-section-icon i {
    width:  20px;
    height: 20px;
}

.ls-title,
.leview-section-title {
    margin:      0;
    font-size:   var(--lc-section-title-size, 15px);
    font-weight: 600;
    color:       var(--lc-txt, #ffffff);
}

/* Divider */
.leview-section-divider {
    height:        1px;
    background:    linear-gradient(90deg, transparent, var(--lc-divider-color, rgba(1,206,132,0.3)), transparent);
    margin-bottom: 14px;
}

/* Options row */
.leview-options-row {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: flex-start;
}

/* ── Option Button ──────────────────────────────────────── */
.leview-option-btn {
    display:      inline-flex;
    align-items:  center;
    cursor:       pointer;
    background:   var(--lc-btn-def, #424242);
    border:       1px solid rgba(255,255,255,0.08);
    border-radius: var(--lc-btn-radius, 18px);
    padding:      var(--lc-btn-padding, 9px 22px);
    transition:   all 0.25s ease;
    box-shadow:   0 0 10px rgba(177,177,177,0.12);
    user-select:  none;
    position:     relative;
    overflow:     hidden;
}

/* Gradient overlay for selected state */
.leview-option-btn::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    linear-gradient(var(--lc-btn-grad-dir, 180deg), var(--lc-sel-s, #002417) 0%, var(--lc-sel-e, #01CE84) 100%);
    opacity:       0;
    transition:    opacity 0.25s ease;
    border-radius: inherit;
}

.leview-option-btn:hover {
    border-color: rgba(1,206,132,0.35);
    box-shadow:   0 0 14px rgba(1,206,132,0.18);
    transform:    translateY(-1px);
}

.leview-option-btn:hover::before { opacity: 0.5; }

.leview-option-btn.is-selected {
    border-color: rgba(1,206,132,0.6);
    box-shadow:   0 0 12px rgba(1,206,132,0.25);
}

.leview-option-btn.is-selected::before { opacity: 1; }

/* Hide native input */
.leview-option-btn input[type="radio"],
.leview-option-btn input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

/* Option label text */
.lo-text,
.leview-option-text {
    font-size:   var(--lc-btn-font-size, 14px);
    font-weight: 500;
    color:       var(--lc-txt, #ffffff);
    position:    relative;
    z-index:     1;
    line-height: 1.4;
    text-align:  center;
}

/* ── Left column: Panel ─────────────────────────────────── */
.leview-calc-panel {
    width:           var(--lc-panel-width, 260px);
    min-width:       var(--lc-panel-min-width, 220px);
    max-width:       var(--lc-panel-max-width, 320px);
    background:      var(--lc-panel-bg, #162018);
    border:          1px solid var(--lc-panel-border-color, rgba(1,206,132,0.15));
    border-radius:   var(--lc-panel-radius, 16px);
    padding:         var(--lc-panel-padding, 22px 18px);
    display:         flex;
    flex-direction:  column;
    gap:             14px;
    /* sticky behaviour preserved – useful when sections column is long */
    position:        sticky;
    top:             20px;
    align-self:      flex-start; /* override stretch only for sticky panels */
}

/* When wrapper is set to stretch panels, remove align-self */
.leview-calc-wrapper[data-panel-stretch="1"] .leview-calc-panel {
    position:    relative;
    top:         0;
    align-self:  auto;
}

.leview-panel-title {
    margin:        0;
    font-size:     var(--lc-panel-title-size, 15px);
    font-weight:   700;
    color:         var(--lc-txt, #ffffff);
    text-align:    right;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lc-panel-divider, rgba(1,206,132,0.2));
}

/* Price blocks */
.leview-price-block,
.leview-price-row {
    background:    rgba(0,0,0,0.25);
    border-radius: 12px;
    padding:       12px 14px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
    border:        1px solid rgba(255,255,255,0.06);
}

.lp-from,
.leview-price-from { border-color: rgba(1,206,132,0.2); }

.lp-to,
.leview-price-to   { border-color: rgba(1,206,132,0.35); }

.lp-label,
.leview-price-label {
    font-size:      11px;
    color:          rgba(255,255,255,0.5);
    font-weight:    500;
    letter-spacing: 0.5px;
    text-align:     right;
}

.lp-val-wrap {
    display:         flex;
    align-items:     baseline;
    gap:             6px;
    justify-content: flex-end;
}

/* The animated number element – perspective needed for flip */
.lp-value,
.leview-price-value {
    font-family: B titr !important;
    font-size:       var(--lc-price-font-size, 22px);
    font-weight:     700;
    color:           var(--lc-accent, #01CE84);
    display:         inline-block;
    perspective:     400px;
    transform-style: preserve-3d;
    will-change:     transform, opacity;
    /* transitions are set dynamically by JS */
}

.lp-currency,
.leview-price-currency {
    font-size:  12px;
    color:      rgba(255,255,255,0.6);
    font-weight: 500;
}

/* Panel note */
.leview-panel-note {
    margin:        0;
    font-size:     var(--lc-note-size, 12px);
    line-height:   1.8;
    color:         rgba(255,255,255,0.5);
    text-align:    right;
    padding:       10px 0;
    border-top:    1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Contact Form ──────────────────────────────────────────*/
.leview-contact-form {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.lc-field,
.leview-field-group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.lc-field label,
.leview-field-group label {
    font-size:   12px;
    color:       rgba(255,255,255,0.6);
    font-weight: 500;
    text-align:  right;
}

.lc-field input,
.leview-field-group input {
    background:   rgba(255,255,255,0.05);
    border:       1px solid rgba(255,255,255,0.1);
    border-radius: var(--lc-input-radius, 10px);
    padding:      9px 12px;
    color:        var(--lc-txt, #ffffff);
    font-family:  var(--lc-font, Tahoma, sans-serif);
    font-size:    13px;
    text-align:   right;
    direction:    rtl;
    transition:   border-color 0.2s;
    width:        100%;
    box-sizing:   border-box;
}

.lc-field input:focus,
.leview-field-group input:focus {
    outline:    none;
    border-color: rgba(1,206,132,0.5);
    box-shadow: 0 0 0 3px rgba(1,206,132,0.1);
}

.lc-field input::placeholder,
.leview-field-group input::placeholder {
    color:       rgba(255,255,255,0.25);
    font-family: var(--lc-font, Tahoma, sans-serif);
}

/* ── Submit Button ──────────────────────────────────────── */
.leview-submit-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      linear-gradient(var(--lc-btn-grad-dir, 180deg), var(--lc-sel-s, #002417) 0%, var(--lc-sel-e, #01CE84) 100%);
    border:          1px solid #fff;
    border-radius:   var(--lc-submit-radius, 12px);
    color:           var(--lc-submit-text-color, #ffffff);
    font-family:     var(--lc-font, Tahoma, sans-serif);
    font-size:       var(--lc-submit-font-size, 14px);
    font-weight:     600;
    padding:         12px 18px;
    cursor:          pointer;
    width:           100%;
    transition:      all 0.25s ease;
    box-shadow:      0 4px 15px rgba(1,206,132,0.2);
    margin-top:      4px;
    direction:       rtl;
}
[type=submit], button{
    border-color:#fff!important;
    color:#fff!important;
}
.leview-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(1,206,132,0.35);
    transform:  translateY(-1px);
    filter:     brightness(1.1);
}

.leview-submit-btn:active { transform: translateY(0); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .leview-calc-wrapper {
        flex-direction: column;   /* panel on top in mobile RTL stacks fine */
        align-items:    stretch;
    }
    .leview-calc-panel {
        width:    100%;
        max-width: 100%;
        position: static;
    }
}

@media (max-width: 480px) {
    .leview-option-btn {
        padding: 8px 14px;
        flex:    1 1 calc(50% - 8px);
        justify-content: center;
    }
    .lo-text,
    .leview-option-text { font-size: 13px; }
}