/* receipt.css
 *
 * Moved from inline <style> tag of the Tallet card‑to‑card gateway plugin.
 * Load this file via wp_enqueue_style with high priority (e.g., 999)
 * to ensure it overrides theme styles on any site.
 */

/* استایل اصلی (دسکتاپ) */
.receipt-container {
    position: relative !important;
    max-width: 750px !important;
    margin: 2rem auto !important;
    text-align: center !important;
    perspective: 1000px !important;
}

.receipt-card {
    position: relative !important;
    width: 100% !important;
    padding: 2rem !important;
    border-radius: 16px !important;
    transform: rotateX(5deg) rotateY(-2deg) !important;
    box-shadow: 
        -15px 20px 40px rgba(0,0,0,0.2),
        -5px 15px 15px rgba(0,0,0,0.1),
        inset 0 0 20px rgba(255,255,255,0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    transform-style: preserve-3d !important;
    background: var(--tallet-card-bg, #6B46C1) !important;
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%),
        repeating-linear-gradient(45deg, 
            rgba(255,255,255,0.05) 0px, 
            rgba(255,255,255,0.05) 2px, 
            transparent 2px, 
            transparent 8px
        ),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.2) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.15) 0%, transparent 40%) !important;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        inset 0 0 50px rgba(255,255,255,0.05) !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.receipt-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    right: -50% !important;
    bottom: -50% !important;
    background: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM37.656 0l8.485 8.485-1.414 1.414-8.485-8.485h1.414zM22.344 0L13.858 8.485 15.272 9.9l8.485-8.485H22.344zM32.4 0l7.07 7.07-1.414 1.415L30.97 0H32.4zm-5.657 0L19.67 7.07l1.415 1.415L28.284 0h-1.54zm9.9 0l6.485 6.485-1.414 1.414L36.97 0h-.684zm-14.142 0L15.515 6.485l1.414 1.414L23.514 0h-.97zm-6.573 0l-.828.828L8.2 4.243 13.342 0h-2.7zM40.085 0h-2.7L30.428 6.957 31.84 8.37 40.085 0zM36.256 0h-2.7l-5.657 5.657 1.414 1.414L36.256 0zM44.744 0h-2.7l-9.9 9.9 1.415 1.414L44.744 0zM50.657 0h-2.7L34.157 13.8l1.414 1.414L50.657 0zM30.97 0L20 10.97l1.415 1.414L32.385 0h-1.414zm-5.657 0L16.456 8.857 17.87 10.27l8.485-8.485h-1.04zM46.143 0L33.8 12.343l1.414 1.414L48.57 0h-2.428zM19.757 0l-.414.414L29.385 10.456l1.414-1.414L19.757 0zM25.414 0L0 25.414l1.414 1.414L26.828 0h-1.414zM30.97 0L0 30.97l1.414 1.414L32.385 0H30.97zm9.9 0L0 40.87l1.414 1.414L42.285 0h-1.414zm-15.556 0L0 25.414l1.414 1.414L26.828 0h-1.414zm5.657 0L0 31.07l1.414 1.414L32.385 0h-1.414zM46.142 0L0 46.142l1.414 1.414L47.557 0h-1.414zM51.8 0L0 51.8l1.414 1.414L53.214 0h-1.414zm-2.83 0L0 48.97l1.414 1.414L50.385 0h-1.414zM0 34.157L34.157 0h-2.7L0 31.456v2.7zm0 5.657L39.814 0h-2.7L0 37.113v2.7zm0 5.657L45.47 0h-2.7L0 42.77v2.7zm0 5.657L51.128 0h-2.7L0 48.428v2.7zm0 5.657L56.785 0h-2.7L0 54.085v2.7zm0 5.657L60 0h-2.7L0 57.3v2.7z' fill='rgba(255,255,255,0.05)' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    animation: slide 120s linear infinite !important;
    pointer-events: none !important;
    opacity: 0.3 !important;
}

@keyframes slide {
    from {
        transform: rotate(0deg) !important;
    }
    to {
        transform: rotate(360deg) !important;
    }
}

.receipt-content {
    position: relative !important;
    color: var(--tallet-text-color, #fff) !important;
    font-family: var(--tallet-font-family, inherit) !important;
    text-align: right !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 1.5rem !important;
    transform: translateZ(20px) !important;
}

.receipt-card:hover {
    transform: rotateX(2deg) rotateY(-1deg) translateZ(10px) !important;
    box-shadow: 
        -20px 25px 50px rgba(0,0,0,0.25),
        -8px 20px 20px rgba(0,0,0,0.15),
        inset 0 0 30px rgba(255,255,255,0.2) !important;
}

/* افکت درخشش لبه‌ها */
.receipt-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.05) 50%,
        transparent 50.1%
    ) !important;
    pointer-events: none !important;
}

.receipt-content > div {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    font-size: var(--tallet-font-size, 16px) !important;
    padding: 0.5rem 0 !important;
}

.receipt-content .pay-price {
    font-size: calc(var(--tallet-font-size, 16px) * 1.25) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.receipt-content span {
    opacity: 0.9 !important;
}

.receipt-content strong {
    font-weight: bold !important;
    flex: 1 !important;
}

.btn-copy,
.btn-deposit {
    background: rgba(255,255,255,0.2) !important;
    color: inherit !important;
    border: none !important;
    padding: 0.4em 0.8em !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.85em !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
}

.btn-copy:hover,
.btn-deposit:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: translateY(-1px) !important;
}

.alert-box {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background-color: #F0F9FF !important;
    color: #0C4A6E !important;
    padding: 20px !important;
    margin: 20px auto !important;
    max-width: 750px !important;
    text-align: right !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    border: 2px dashed #BAE6FD !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.alert-icon {
    flex-shrink: 0 !important;
    font-size: 24px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #EFF6FF !important;
    border-radius: 50% !important;
    border: 2px solid #BAE6FD !important;
}

.alert-content {
    flex: 1 !important;
}

/* مدال اطلاعات حساب تلت */
#accountModal{
    background:#fff !important;
    color:#222 !important;      /* متن همیشه تیره */
    border-radius:8px;
    padding:20px;
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 4px 8px rgba(0,0,0,.2);
    z-index:1000;
  }
  
  #accountModal h3{
    margin-top:0;
    color:#000 !important;      /* تیتر کاملاً مشکی */
  }
  
  #accountModal .btn-copy,
  #accountModal button{
    background:#2196f3 !important;
    color:#fff !important;
    border:none;
    padding:6px 12px;
    border-radius:4px;
    cursor:pointer;
    font-family:inherit;
  }

/* Toast Notification */
.tallet-toast {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #4CAF50 !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    text-align: center !important;
    min-width: 200px !important;
    max-width: 90% !important;
}

.tallet-toast.show {
    opacity: 1 !important;
}

.tallet-toast.error {
    background-color: #f44336 !important;
}

/* استایل موبایل (کوچکتر از 768 پیکسل) */
@media (max-width: 768px) {
    .receipt-container {
        margin: 1rem auto !important;
        padding: 0 1rem !important;
    }

    .receipt-card {
        padding: 1.5rem !important;
    }

    .receipt-content > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        font-size: 16px !important;
    }

    .receipt-content strong {
        display: block !important;
        margin: 0.25rem 0 !important;
    }

    .btn-copy,
    .btn-deposit {
        font-size: 14px !important;
        padding: 0.4em 0.8em !important;
        align-self: flex-start !important;
    }

    .alert-box {
        font-size: 14px !important;
        padding: 12px !important;
        margin: 1rem 0 !important;
    }
}