/* wp-smart-receipt/assets/css/receipt-form.css */
/* ==========================================
   Receipt Form Styles (Light Theme + Brand Identity)
   ========================================== */

/* متغیرهای رنگی که از تنظیمات ادمین پر می‌شوند */
.custom-receipt-wrapper { 
    width: 100%; 
    background: var(--wsr-bg-color, #ffffff); 
    padding: 20px; 
    border-radius: 16px; 
    border: 1px solid #eef2f5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    direction: rtl; 
    box-sizing: border-box; 
}

.custom-receipt-wrapper,
.custom-receipt-wrapper label,
.custom-receipt-wrapper input,
.custom-receipt-wrapper select,
.custom-receipt-wrapper button,
.custom-receipt-wrapper .cr-file-text,
.custom-receipt-wrapper .cr-notice-box {
    font-family: "IRANSans", "IranSans", Tahoma, sans-serif !important;
}

.cr-bank-section { 
    margin-bottom: 30px; 
    padding: 15px; 
    background: #f8fafc; 
    border-radius: 12px; 
    border: 1px solid #e2e8f0; 
    text-align: center; 
}
.cr-bank-instructions { 
    color: #d97706; 
    font-size: 15px; 
    margin-bottom: 20px; 
    line-height: 1.6; 
    font-weight: 500;
}

/* ==========================================
   استایل جدید و مدرن کارت بانکی و دکمه کپی (Light UI)
   ========================================== */
.cr-bank-card { 
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%); 
    border-radius: 16px; 
    padding: 24px 20px; 
    max-width: 380px; 
    margin: 0 auto; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9); 
    position: relative; 
    overflow: hidden; 
    border: 1px solid #e2e8f0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.cr-bank-card::before { 
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: radial-gradient(circle, rgba(255, 90, 0, 0.03) 0%, transparent 65%); 
    pointer-events: none; 
}

.cr-card-title { 
    color: #64748b; 
    font-size: 13px; 
    text-align: center; 
    margin-bottom: 12px; 
    letter-spacing: 0.5px; 
    font-weight: 500;
}

.cr-card-number { 
    color: #0f172a; 
    font-size: 22px; 
    font-family: monospace, sans-serif !important; 
    letter-spacing: 2.5px; 
    margin-bottom: 12px; 
    direction: ltr; 
    display: block; 
    text-align: center; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.cr-card-name {
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}

.cr-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 22px;
    background-color: #fff7ed;
    color: #ff5a00;
    border: 1px solid #ffedd5;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    box-shadow: 0 2px 6px rgba(255, 90, 0, 0.08);
}

.cr-copy-btn:hover { 
    background-color: #ff5a00; 
    color: #ffffff;
    border-color: #ff5a00; 
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.25); 
    transform: translateY(-2px); 
}

.cr-copy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 90, 0, 0.15);
}

.cr-card-warning { 
    color: #dc2626; 
    font-size: 15px; 
    margin-bottom: 20px; 
    background: rgba(239, 68, 68, 0.08); 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid rgba(239, 68, 68, 0.2); 
    text-align: center; 
    line-height: 1.6; 
}

@keyframes phonePulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.cr-support-box { 
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.08), rgba(41, 128, 185, 0.03)); 
    border: 1px solid rgba(52, 152, 219, 0.25); 
    color: #1e293b; 
    padding: 18px; 
    border-radius: 10px; 
    margin-bottom: 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    text-align: center; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); 
}
.cr-support-box svg { 
    width: 26px; 
    height: 26px; 
    fill: #3498db; 
    animation: phonePulse 2.5s infinite; 
}
.cr-support-box span { 
    font-size: 14px; 
    color: #334155; 
    font-weight: 500;
}
.cr-support-box a { 
    color: #2980b9; 
    font-weight: 900; 
    font-size: 19px; 
    direction: ltr; 
    display: inline-block; 
    text-decoration: none; 
    transition: all 0.3s; 
    letter-spacing: 1px; 
}
.cr-support-box a:hover { 
    color: #3498db; 
    transform: scale(1.05); 
}

.cr-group { margin-bottom: 25px; }
.cr-group label { 
    display: block; 
    color: #1e293b; 
    margin-bottom: 10px; 
    font-size: 14px; 
    font-weight: bold; 
}

.cr-group input[type="text"], 
.cr-group input[type="tel"], 
.cr-group select { 
    width: 100%; 
    padding: 14px 16px; 
    background-color: #ffffff; 
    border: 1px solid #cbd5e1; 
    color: #0f172a; 
    border-radius: 8px; 
    font-size: 14px; 
    transition: all 0.3s ease; 
    box-sizing: border-box; 
}
.cr-group input:focus, 
.cr-group select:focus { 
    border-color: #ff5a00; 
    background-color: #ffffff; 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.15); 
}

.cr-group select { 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23475569%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
    background-repeat: no-repeat; 
    background-position: left 15px top 50%; 
    background-size: 11px auto; 
    cursor: pointer;
}
.cr-group select option { 
    background-color: #ffffff; 
    color: #0f172a; 
}

.cr-order-details-box { 
    display: flex; 
    justify-content: flex-start; 
    align-items: stretch; 
    margin-top: 15px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

#cr-order-price-display { 
    display: none; 
    align-items: center; 
    justify-content: center; 
    padding: 12px 20px; 
    border-radius: 8px; 
    flex-grow: 1; 
    font-size: 15px; 
    font-weight: bold; 
    border: 1px solid rgba(46, 204, 113, 0.4); 
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.05); 
    color: #27ae60; 
    background: rgba(46, 204, 113, 0.08); 
}

/* استایل فیلدهای قفل شده (نام و نام خانوادگی) */
.cr-group input[type="tel"].locked-input, 
.cr-group input[type="text"].locked-input { 
    background-color: #f1f5f9 !important; 
    color: #64748b !important; 
    border: 1px dashed #cbd5e1 !important; 
    cursor: not-allowed !important; 
    user-select: none; 
    pointer-events: none; 
}

.cr-file-upload { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: #f8fafc; 
    border: 2px dashed #cbd5e1; 
    border-radius: 12px; 
    padding: 35px 20px; 
    cursor: pointer; 
    transition: all 0.3s; 
    box-sizing: border-box; 
}
.cr-file-upload:hover { 
    border-color: #ff5a00; 
    background: #fff7ed; 
}
.cr-file-upload input[type="file"] { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    cursor: pointer; 
}
.cr-file-icon { 
    font-size: 38px; 
    margin-bottom: 10px; 
    color: #94a3b8; 
    transition: color 0.3s; 
}
.cr-file-upload:hover .cr-file-icon { color: #ff5a00; }
.cr-file-text { 
    color: #64748b; 
    font-size: 14px; 
    text-align: center; 
    font-weight: 500;
}

/* نمایش تمام عرض تصویر پیش‌نمایش فیش */
.cr-preview-container { 
    position: relative; 
    display: block; 
    margin-top: 15px; 
    width: 100%; 
    text-align: center; 
}
#cr-image-preview { 
    display: none; 
    width: 100%; 
    max-width: 100%; 
    max-height: 400px; 
    object-fit: contain; 
    border-radius: 12px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); 
    background: #f8fafc; 
}

/* استایل گرد و نارنجی دکمه حذف تصویر */
.cr-remove-image-btn { 
    display: none; 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: #ff5a00; 
    color: #fff; 
    border: 2px solid #ffffff; 
    border-radius: 50%; 
    width: 36px; 
    height: 36px; 
    font-size: 16px; 
    cursor: pointer; 
    box-shadow: 0 4px 12px rgba(255, 90, 0, 0.3); 
    align-items: center; 
    justify-content: center; 
    z-index: 10; 
    line-height: 1; 
    padding: 0; 
    transition: all 0.25s ease; 
}
.cr-remove-image-btn:hover { 
    background: #e04f00; 
    transform: scale(1.1); 
}

/* استایل مدرن دکمه ثبت فرم */
.cr-submit-btn { 
    width: 100%; 
    padding: 13px; 
    background: linear-gradient(135deg, #ff5a00, #ea580c) !important; 
    color: #ffffff !important; 
    border: none !important; 
    border-radius: 30px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    margin-top: 15px; 
    box-sizing: border-box; 
    outline: none !important; 
    box-shadow: 0 6px 18px rgba(255, 90, 0, 0.25); 
}
.cr-submit-btn:hover { 
    background: linear-gradient(135deg, #ff7326, #ff5a00) !important; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.35); 
}
.cr-submit-btn:active { transform: translateY(0); }

/* دکمه در وضعیت لودینگ */
.cr-submit-btn.cr-is-loading { 
    background: #1e293b !important; 
    cursor: wait !important; 
    pointer-events: none !important; 
    opacity: 1; 
    color: #ffffff !important; 
    box-shadow: none !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* اسپینر چرخشی */
.cr-radar-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 90, 0, 0.2);
    border-top: 3px solid #ff5a00;
    border-radius: 50%;
    animation: spinLock 1s linear infinite;
    display: inline-block;
}

@keyframes spinLock {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cr-history-list { 
    margin-top: 40px; 
    border-top: 1px solid #e2e8f0; 
    padding-top: 30px; 
}
.cr-history-item { 
    background: #f8fafc; 
    padding: 15px 18px; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border: 1px solid #e2e8f0; 
    transition: all 0.3s ease; 
}
.cr-history-item:hover { 
    background: #f1f5f9; 
    border-color: #cbd5e1;
}
.cr-history-details { 
    font-size: 13px; 
    color: #475569; 
    line-height: 1.8; 
}
.cr-history-details strong {
    color: #0f172a !important;
}
.cr-history-img img { 
    width: 65px; 
    height: 65px; 
    border-radius: 8px; 
    object-fit: cover; 
    border: 1px solid #cbd5e1; 
    transition: transform 0.3s; 
}
.cr-history-img img:hover { transform: scale(1.08); }

.cr-notice-box { 
    background-color: #fffbeb; 
    border: 1px solid #fde68a; 
    color: #92400e; 
    padding: 18px; 
    border-radius: 10px; 
    margin-bottom: 25px; 
    text-align: right; 
    font-size: 13px; 
    line-height: 1.8; 
}
.cr-notice-box strong { 
    color: #b45309; 
    display: block; 
    margin-bottom: 10px; 
    font-size: 14px; 
}
.cr-notice-box ul { 
    list-style-type: disc; 
    margin: 0; 
    padding-right: 20px; 
}
.cr-notice-box li { 
    margin-bottom: 6px; 
    color: #78350f; 
}
.cr-notice-box li:last-child { margin-bottom: 0; }

.cr-terms-group { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 20px; 
    background: #f8fafc; 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid #e2e8f0; 
}
.cr-terms-group input[type="checkbox"] { 
    width: 18px; 
    height: 18px; 
    margin-left: 10px; 
    flex-shrink: 0; 
    cursor: pointer; 
    accent-color: #ff5a00; 
}
.cr-terms-group label { 
    color: #334155; 
    font-size: 13px; 
    font-weight: normal; 
    cursor: pointer; 
    margin-bottom: 0; 
    line-height: 1.6;
}

.cr-submit-btn:disabled { 
    background: #e2e8f0 !important; 
    color: #94a3b8 !important; 
    cursor: not-allowed !important; 
    opacity: 1; 
    transform: none; 
    box-shadow: none; 
}

body.woocommerce-account .woocommerce-MyAccount-content form#custom-receipt-form,
form#custom-receipt-form { 
    padding: 0 !important; 
    margin: 0 !important; 
    border: none !important; 
    box-shadow: none !important; 
    background: transparent !important; 
}

@media (max-width: 480px) {
    .cr-card-number { font-size: 19px; letter-spacing: 1px; margin-bottom: 15px; }
    .cr-bank-card { padding: 20px 10px; max-width: 100%; }
    .cr-support-box a { font-size: 17px; }
}