/* assets/css/receipt-form.css */
/* ==========================================
   Receipt Form Styles
   ========================================== */

/* متغیرهای رنگی که از تنظیمات ادمین پر می‌شوند */
.custom-receipt-wrapper { 
    width: 100%; 
    background: var(--wsr-bg-color, #1a1a1a); 
    padding: 10px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    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: 10px; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); text-align: center; }
.cr-bank-instructions { color: #f39c12; font-size: 15px; margin-bottom: 20px; line-height: 1.6; }
.cr-bank-card { background: linear-gradient(135deg, #1e2a35, #000000); border-radius: 15px; padding: 30px 20px; max-width: 380px; margin: 0 auto; box-shadow: 0 10px 20px rgba(0,0,0,0.6); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.cr-bank-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; }
.cr-card-title { color: #888; font-size: 13px; text-align: center; margin-bottom: 20px; letter-spacing: 1px; }

.cr-card-number { color: #fff; font-size: 22px; font-family: monospace, sans-serif !important; letter-spacing: 2px; margin-bottom: 20px; direction: ltr; display: block; text-align: center; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); word-wrap: break-word; }
.cr-card-name { color: #dcdcdc; font-size: 15px; text-align: center; }

/* استایل جدید و لوکس دکمه کپی (با تم رنگ سازمانی) */
.cr-copy-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    margin: 25px auto 0; 
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.1), rgba(255, 255, 255, 0.03)); 
    color: #fff; 
    border: 1px solid rgba(255, 90, 0, 0.3); 
    padding: 10px 25px; 
    border-radius: 30px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500; 
    letter-spacing: 0.5px; 
    backdrop-filter: blur(5px); 
    box-shadow: 0 4px 15px rgba(255, 90, 0, 0.15), inset 0 1px 0 rgba(255,255,255,0.1); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.cr-copy-btn:hover { 
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.2), rgba(255, 90, 0, 0.1)); 
    border-color: #ff5a00; 
    box-shadow: 0 6px 20px rgba(255, 90, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2); 
    transform: translateY(-2px); 
}

.cr-card-warning { color: #ffffff; font-size: 16px; margin-bottom: 20px; background: rgba(231, 76, 60, 0.15); padding: 15px; border-radius: 8px; border: 1px solid rgba(231, 76, 60, 0.4); 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.15), rgba(41, 128, 185, 0.05)); border: 1px solid rgba(52, 152, 219, 0.3); color: #ecf0f1; padding: 20px; 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 15px rgba(0,0,0,0.2); }
.cr-support-box svg { width: 28px; height: 28px; fill: #3498db; animation: phonePulse 2.5s infinite; }
.cr-support-box span { font-size: 15px; color: #d0e8f9; }
.cr-support-box a { color: #3498db; font-weight: 900; font-size: 20px; direction: ltr; display: inline-block; text-decoration: none; transition: all 0.3s; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.cr-support-box a:hover { color: #5dade2; transform: scale(1.05); }

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

.cr-group input[type="text"], .cr-group input[type="tel"], .cr-group select { width: 100%; padding: 15px; background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 8px; font-size: 15px; transition: border 0.3s, background 0.3s; box-sizing: border-box; }
.cr-group input:focus, .cr-group select:focus { border-color: #ff5a00; background-color: rgba(255,255,255,0.05); outline: none; box-shadow: 0 0 8px rgba(255, 90, 0, 0.2); }

.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%23ffffff%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: 12px auto; }
.cr-group select option { background-color: #2d2d2d; color: #fff; }

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

#cr-order-price-display, #cr-timer-display, #cr-booking-time-display { display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; flex-grow: 1; font-size: 15px; font-weight: bold; border-style: solid; border-width: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#cr-order-price-display { color: #2ecc71; background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.3); display: none; }
#cr-booking-time-display { color: #3498db; background: rgba(52, 152, 219, 0.1); border-color: rgba(52, 152, 219, 0.3); display: none; text-align: center; } 

@keyframes safePulse { 0% { transform: scale(1); box-shadow: 0 0 5px rgba(46, 204, 113, 0.2); background: rgba(46, 204, 113, 0.05); } 50% { transform: scale(1.02); box-shadow: 0 0 15px 5px rgba(46, 204, 113, 0.6); background: rgba(46, 204, 113, 0.15); } 100% { transform: scale(1); box-shadow: 0 0 5px rgba(46, 204, 113, 0.2); background: rgba(46, 204, 113, 0.05); } }
@keyframes warningPulse { 0% { transform: scale(1); box-shadow: 0 0 5px rgba(243, 156, 18, 0.2); background: rgba(243, 156, 18, 0.05); } 50% { transform: scale(1.03); box-shadow: 0 0 18px 6px rgba(243, 156, 18, 0.65); background: rgba(243, 156, 18, 0.2); } 100% { transform: scale(1); box-shadow: 0 0 5px rgba(243, 156, 18, 0.2); background: rgba(243, 156, 18, 0.05); } }
@keyframes dangerPulse { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); background: rgba(231, 76, 60, 0.1); } 50% { transform: scale(1.06); box-shadow: 0 0 30px 10px rgba(231, 76, 60, 0.8); background: rgba(231, 76, 60, 0.3); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); background: rgba(231, 76, 60, 0.1); } }

#cr-timer-display { display: none; text-align: center; min-width: 180px; transition: all 0.3s ease; }
#cr-timer-display.timer-safe { color: #2ecc71; border-color: rgba(46, 204, 113, 0.5); animation: safePulse 1.5s infinite ease-in-out; } 
#cr-timer-display.timer-warning { color: #f39c12; border-color: rgba(243, 156, 18, 0.5); animation: warningPulse 1.2s infinite ease-in-out; } 
#cr-timer-display.timer-danger { color: #ff4757; border-color: #ff4757; animation: dangerPulse 0.8s infinite ease-in-out; font-weight: 900; text-shadow: 0 0 10px rgba(231, 76, 60, 0.5); z-index: 10; } 

.digital-font { font-family: "Courier New", Courier, monospace, sans-serif !important; letter-spacing: 3px; font-size: 1.3em; margin-right: 5px; direction: ltr; display: inline-block; }

/* استایل فیلدهای قفل شده (نام و نام خانوادگی) */
.cr-group input[type="tel"].locked-input, .cr-group input[type="text"].locked-input { 
    background-color: rgba(255,255,255,0.01) !important; 
    color: #7f8c8d !important; 
    border: 1px dashed rgba(255,255,255,0.1) !important; 
    cursor: not-allowed !important; 
    opacity: 0.8; 
    user-select: none; 
    pointer-events: none; /* جلوگیری کامل از کلیک با CSS */
}

.cr-file-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.02); border: 2px dashed rgba(255,255,255,0.2); border-radius: 10px; padding: 30px; cursor: pointer; transition: all 0.3s; box-sizing: border-box; }
.cr-file-upload:hover { border-color: #ff5a00; background: rgba(255,255,255,0.04); }
.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: 40px; margin-bottom: 12px; color: #777; transition: color 0.3s; }
.cr-file-upload:hover .cr-file-icon { color: #ff5a00; }
.cr-file-text { color: #aaa; font-size: 15px; text-align: center; }

/* اصلاح تمام عرض شدن تصویر فیش */
.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 rgba(255,255,255,0.15); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); 
    background: rgba(0,0,0,0.2); 
}

/* استایل جدید، شیک، گرد و نارنجی برای دکمه حذف تصویر */
.cr-remove-image-btn { 
    display: none; 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: rgba(255, 90, 0, 0.85); /* نارنجی سازمانی */
    color: #fff; 
    border: 2px solid rgba(255,255,255,0.2); 
    border-radius: 50%; /* کاملا گرد */
    width: 40px; 
    height: 40px; 
    font-size: 20px; 
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(255, 90, 0, 0.4); 
    align-items: center; 
    justify-content: center; 
    z-index: 10; 
    line-height: 1; 
    padding: 0; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    backdrop-filter: blur(4px); 
}
.cr-remove-image-btn:hover { 
    background: #ff5a00; 
    transform: scale(1.1); /* بزرگنمایی ملایم، حذف انیمیشن چرخش */
    border-color: rgba(255,255,255,0.5); 
}

/* استایل جدید و مدرن دکمه ثبت فرم */
.cr-submit-btn { 
    width: 100%; 
    padding: 10px; 
    background: linear-gradient(135deg, #ff5a00, #e04f00) !important; /* گرادیانت نارنجی لوکس */
    color: #fff !important; 
    border: none !important; 
    border-radius: 30px; /* طراحی مدرن‌تر و گردتر */
    font-size: 17px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s; 
    margin-top: 15px; 
    box-sizing: border-box; 
    outline: none !important; 
    box-shadow: 0 4px 15px rgba(255, 90, 0, 0.3); 
}
.cr-submit-btn:hover { 
    background: linear-gradient(135deg, #ff7326, #ff5a00) !important; 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255, 90, 0, 0.5); 
}
.cr-submit-btn:active { transform: translateY(0); }

/* --- استایل جدید دکمه قفل شده (لودینگ گاوصندوقی) --- */
.cr-submit-btn.cr-is-loading { 
    background: linear-gradient(135deg, #1e2a35, #000000) !important; /* رنگ تیره و قفل شده */
    cursor: wait !important; 
    pointer-events: none !important; 
    opacity: 1; 
    color: #dcdcdc !important; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1) !important; /* حس فرورفتگی */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* اسپینر چرخشی (مانند رادار یا چرخش قفل گاوصندوق) */
.cr-radar-spinner {
    width: 22px;
    height: 22px;
    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 rgba(255,255,255,0.1); padding-top: 30px; }
.cr-history-item { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,0.05); transition: background 0.3s; }
.cr-history-item:hover { background: rgba(255,255,255,0.06); }
.cr-history-details { font-size: 14px; color: #bbb; line-height: 1.8; }
.cr-history-img img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); transition: transform 0.3s; }
.cr-history-img img:hover { transform: scale(1.1); }

.cr-notice-box { background-color: rgba(241, 196, 15, 0.1); border: 1px solid rgba(241, 196, 15, 0.3); color: #fdf6e3; padding: 20px; border-radius: 10px; margin-bottom: 25px; text-align: right; font-size: 14px; line-height: 1.8; }
.cr-notice-box strong { color: #f1c40f; display: block; margin-bottom: 12px; font-size: 16px; }
.cr-notice-box ul { list-style-type: disc; margin: 0; padding-right: 20px; }
.cr-notice-box li { margin-bottom: 8px; color: #e0e0e0; }
.cr-notice-box li:last-child { margin-bottom: 0; }

/* استایل اصلاح شده برای راست‌چین ماندن بدون تداخل با CSS داخلی شورت‌کد */
.cr-terms-group { display: flex; align-items: flex-start; margin-bottom: 20px; background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.cr-terms-group input[type="checkbox"] { width: 20px; height: 20px; margin-left: 12px; flex-shrink: 0; cursor: pointer; accent-color: #ff5a00; }
.cr-terms-group label { color: #ddd; font-size: 14px; font-weight: normal; cursor: pointer; margin-bottom: 0; }

.cr-submit-btn:disabled { background: #444 !important; color: #888 !important; cursor: not-allowed !important; opacity: 0.8; 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: 20px; letter-spacing: 1px; margin-bottom: 15px; }
    .cr-bank-card { padding: 20px 10px; max-width: 100%; }
    .cr-support-box a { font-size: 17px; }
}