/* ===== VIO Call Request – Frontend Styles ===== */

:root {
    --vio-cr-primary:    #1a6b4a;
    --vio-cr-primary-d:  #145538;
    --vio-cr-accent:     #f0a500;
    --vio-cr-text:       #2c2c2c;
    --vio-cr-muted:      #6b7280;
    --vio-cr-border:     #e5e7eb;
    --vio-cr-bg:         #f9fafb;
    --vio-cr-white:      #ffffff;
    --vio-cr-error:      #dc2626;
    --vio-cr-success:    #16a34a;
    --vio-cr-radius:     12px;
    --vio-cr-shadow:     0 20px 60px rgba(0,0,0,.18);
}

/* ─── Button ─── */
.vio-cr-btn-wrap { display: block; }

.vio-cr-open-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background-color: var(--vio-cr-primary);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    padding:         14px 32px;
    font-size:       16px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background-color .25s, transform .2s, box-shadow .25s;
    font-family:     inherit;
    position:        relative;
    overflow:        hidden;
}

.vio-cr-open-btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,.12);
    opacity:    0;
    transition: opacity .2s;
}

.vio-cr-open-btn:hover { background-color: var(--vio-cr-primary-d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,107,74,.35); }
.vio-cr-open-btn:hover::after { opacity: 1; }
.vio-cr-open-btn:active { transform: translateY(0); }

/* ─── Overlay ─── */
.vio-cr-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    z-index:         999999;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding:         16px;
    animation:       vioCrFadeIn .25s ease;
}

.vio-cr-overlay.active { display: flex; }

@keyframes vioCrFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Popup ─── */
.vio-cr-popup {
    background:    var(--vio-cr-white);
    border-radius: 20px;
    box-shadow:    var(--vio-cr-shadow);
    width:         100%;
    max-width:     560px;
    max-height:    90vh;
    overflow-y:    auto;
    position:      relative;
    direction:     rtl;
    animation:     vioCrSlideUp .3s cubic-bezier(.34,1.56,.64,1);
    scrollbar-width: thin;
    scrollbar-color: var(--vio-cr-border) transparent;
}

.vio-cr-popup::-webkit-scrollbar { width: 4px; }
.vio-cr-popup::-webkit-scrollbar-track { background: transparent; }
.vio-cr-popup::-webkit-scrollbar-thumb { background: var(--vio-cr-border); border-radius: 4px; }

@keyframes vioCrSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Close btn ─── */
.vio-cr-close {
    position:    absolute;
    top:         16px;
    left:        16px;
    width:       32px;
    height:      32px;
    border:      none;
    background:  var(--vio-cr-bg);
    border-radius: 50%;
    font-size:   20px;
    line-height: 1;
    cursor:      pointer;
    color:       var(--vio-cr-muted);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background .2s, color .2s;
    z-index:     10;
}
.vio-cr-close:hover { background: #fee2e2; color: var(--vio-cr-error); }

/* ─── Header ─── */
.vio-cr-popup-header {
    text-align:  center;
    padding:     36px 32px 24px;
    background:  linear-gradient(135deg, #f0fdf6 0%, #ecfdf5 100%);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid var(--vio-cr-border);
}

.vio-cr-popup-icon {
    width:       60px;
    height:      60px;
    background:  var(--vio-cr-primary);
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    margin:      0 auto 16px;
    box-shadow:  0 8px 24px rgba(26,107,74,.3);
}

.vio-cr-popup-icon i { color: #fff; font-size: 24px; }

.vio-cr-popup-title {
    font-size:   20px;
    font-weight: 700;
    color:       var(--vio-cr-text);
    margin:      0 0 8px;
}

.vio-cr-popup-desc {
    font-size:   14px;
    color:       var(--vio-cr-muted);
    margin:      0;
    line-height: 1.7;
}

/* ─── Form ─── */
.vio-cr-form-wrap { padding: 28px 32px; }

.vio-cr-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
}

.vio-cr-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  16px;
}

.vio-cr-field label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--vio-cr-text);
}

.vio-cr-field label .req { color: var(--vio-cr-error); margin-right: 2px; }

.vio-cr-field input,
.vio-cr-field select {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--vio-cr-border);
    border-radius: var(--vio-cr-radius);
    font-size:     14px;
    font-family:   inherit;
    color:         var(--vio-cr-text);
    background:    var(--vio-cr-white);
    transition:    border-color .2s, box-shadow .2s;
    box-sizing:    border-box;
    outline:       none;
    direction:     rtl;
}

.vio-cr-field input:focus,
.vio-cr-field select:focus {
    border-color: var(--vio-cr-primary);
    box-shadow:   0 0 0 3px rgba(26,107,74,.12);
}

.vio-cr-field input[dir="ltr"] { text-align: left; direction: ltr; }

/* Date wrapper */
.vio-cr-date-wrap { position: relative; }

.vio-cr-date-wrap input { padding-left: 40px; cursor: pointer; }

.vio-cr-date-icon {
    position:  absolute;
    left:      12px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--vio-cr-primary);
    pointer-events: none;
    font-size: 15px;
}

/* Messages */
.vio-cr-error-msg {
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: var(--vio-cr-radius);
    color:         var(--vio-cr-error);
    padding:       10px 14px;
    font-size:     13px;
    margin-bottom: 16px;
}

.vio-cr-success-msg {
    background:    #f0fdf4;
    border:        1px solid #bbf7d0;
    border-radius: var(--vio-cr-radius);
    color:         var(--vio-cr-success);
    padding:       20px;
    font-size:     14px;
    font-weight:   500;
    text-align:    center;
    line-height:   1.8;
}

/* Submit button */
.vio-cr-submit-btn {
    width:         100%;
    padding:       14px;
    background:    var(--vio-cr-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--vio-cr-radius);
    font-size:     15px;
    font-weight:   700;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background .25s, transform .2s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    margin-top:    4px;
}
.vio-cr-submit-btn:hover:not(:disabled) { background: var(--vio-cr-primary-d); transform: translateY(-1px); }
.vio-cr-submit-btn:disabled { opacity: .65; cursor: not-allowed; }

/* Footer */
.vio-cr-popup-footer {
    text-align:   center;
    padding:      12px 32px 24px;
    font-size:    12px;
    color:        var(--vio-cr-muted);
    display:      flex;
    align-items:  center;
    justify-content: center;
    gap:          6px;
}

/* ─── Persian Datepicker overrides ─── */
.datepicker-plot-area { font-family: inherit !important; direction: rtl !important; }
.datepicker-plot-area .header-title { color: var(--vio-cr-primary) !important; }
.datepicker-plot-area .selected { background: var(--vio-cr-primary) !important; color: #fff !important; }
.datepicker-plot-area .is-today { border: 2px solid var(--vio-cr-primary) !important; }

/* ─── Responsive ─── */
@media (max-width: 540px) {
    .vio-cr-popup { border-radius: 16px 16px 0 0; max-height: 95vh; }
    .vio-cr-overlay { align-items: flex-end; padding: 0; }
    .vio-cr-popup-header { padding: 28px 20px 20px; }
    .vio-cr-form-wrap { padding: 20px; }
    .vio-cr-row { grid-template-columns: 1fr; }
}

/* دکمه بستن */
.vio-cr-close {
    position:        absolute;
    top:             14px;
    left:            14px;
    width:           34px;
    height:          34px;
    border:          1px solid #ededed;
    background:      #fff;
    border-radius:   50%;
    font-size:       22px;
    line-height:     1;
    cursor:          pointer;
    color:           #333;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s, color .2s;
    z-index:         10;
    padding:         0;
}
.vio-cr-close:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* ══════════════════════════════════════════
   VIO Custom Jalali Calendar
══════════════════════════════════════════ */
#vio-cr-cal {
    position:      fixed !important;
    z-index:       9999999 !important;
    background:    #fff;
    border-radius: 14px;
    box-shadow:    0 12px 40px rgba(0,0,0,.22);
    border:        1px solid #e5e7eb;
    overflow:      hidden;
    width:         280px;
    font-family:   inherit;
    direction:     rtl;
}
.vcal-inner { padding: 0; }
.vcal-hd {
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 14px;background:#1a6b4a;color:#fff;
}
.vcal-title { font-size:15px;font-weight:700; }
.vcal-btn {
    background:rgba(255,255,255,.18);border:none;color:#fff;
    width:28px;height:28px;border-radius:50%;font-size:20px;
    line-height:1;cursor:pointer;display:flex;align-items:center;
    justify-content:center;padding:0;transition:background .2s;
}
.vcal-btn:hover { background:rgba(255,255,255,.35); }
.vcal-grid {
    display:grid;grid-template-columns:repeat(7,1fr);
    padding:8px 8px 12px;gap:2px;
}
.vcal-dw { text-align:center;font-size:11px;font-weight:700;color:#9ca3af;padding:4px 0 6px; }
.vcal-d {
    text-align:center;padding:6px 2px;font-size:13px;border-radius:50%;
    cursor:pointer;color:#1f2937;transition:background .15s,color .15s;
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
}
.vcal-d:not(.vcal-x):hover { background:#d1fae5;color:#1a6b4a; }
.vcal-t { border:2px solid #1a6b4a;color:#1a6b4a;font-weight:700; }
.vcal-s { background:#1a6b4a !important;color:#fff !important;font-weight:700; }
.vcal-x { color:#d1d5db !important;cursor:not-allowed;text-decoration:line-through; }

/* ══════════════════════════════════════════
   Custom Time Picker
══════════════════════════════════════════ */
.vio-cr-time-wrap { position:relative; }

.vio-cr-time-display {
    width:100%;padding:5px 14px;border:1.5px solid #e5e7eb;
    border-radius:20px;font-size:14px;font-family:inherit;
    color:#9ca3af;background:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    transition:border-color .2s,box-shadow .2s;box-sizing:border-box;
    direction:rtl;
}
.vio-cr-time-display.has-value { color:#1f2937; }
.vio-cr-time-display:hover,
.vio-cr-time-wrap:focus-within .vio-cr-time-display {
    border-color:#1a6b4a;box-shadow:0 0 0 3px rgba(26,107,74,.12);
}
.vtd-arrow {
    font-size:18px;color:#9ca3af;line-height:1;
    transform:rotate(-90deg);display:inline-block;
    transition:transform .2s;
}
.vio-cr-time-display.open .vtd-arrow { transform:rotate(90deg);color:#1a6b4a; }

#vio-cr-time-drop {
    position:fixed !important;
    z-index:9999999 !important;
    background:#fff;border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.22);
    border:1px solid #e5e7eb;overflow:hidden;
    width:200px;direction:rtl;
}
.vtd-inner { padding:0; }
.vtd-hd {
    padding:11px 16px;background:#1a6b4a;color:#fff;
    font-size:13px;font-weight:700;
}
.vtd-list { max-height:220px;overflow-y:auto; }
.vtd-list::-webkit-scrollbar { width:4px; }
.vtd-list::-webkit-scrollbar-thumb { background:#e5e7eb;border-radius:4px; }
.vtd-opt {
    padding:10px 16px;font-size:14px;cursor:pointer;
    color:#1f2937;transition:background .15s;
    border-bottom:1px solid #f3f4f6;
}
.vtd-opt:last-child { border-bottom:none; }
.vtd-opt:hover { background:#f0fdf4;color:#1a6b4a; }
.vtd-opt.vtd-sel { background:#1a6b4a;color:#fff;font-weight:700; }

/* ─── Mobile ─── */
@media (max-width:480px) {
    #vio-cr-cal { width:calc(100vw - 20px) !important;left:10px !important; }
    .vcal-d,.vcal-dw { font-size:12px;padding:5px 1px; }
    .vcal-grid { padding:6px 6px 10px;gap:1px; }
    .vcal-title { font-size:14px; }
    #vio-cr-time-drop { width:calc(100vw - 20px) !important;left:10px !important; }
}
@media screen and (max-width:768px) {
.vio-cr-time-display {
    width:100%;padding:1px 14px;border:1.5px solid #e5e7eb;
}
}

/* ══════════════════════════════════════════
   Inline / Shortcode Form  [vio_call_form]
   فرم مستقیم (بدون پاپ‌آپ)
══════════════════════════════════════════ */
.vio-cr-inline-wrap {
    background:    var(--vio-cr-white);
    border-radius: 20px;
    box-shadow:    0 4px 32px rgba(0,0,0,.08);
    border:        1px solid var(--vio-cr-border);
    width:         100%;
    max-width:     560px;
    margin:        0 auto;
    direction:     rtl;
    overflow:      hidden;
    font-family:   inherit;
}

.vio-cr-inline-header {
    text-align:    center;
    padding:       36px 32px 24px;
    background:    linear-gradient(135deg, #f0fdf6 0%, #ecfdf5 100%);
    border-bottom: 1px solid var(--vio-cr-border);
}

@media (max-width: 540px) {
    .vio-cr-inline-wrap    { border-radius: 16px; }
    .vio-cr-inline-header  { padding: 28px 20px 20px; }
}