/* Main Stylesheet for Payment Checkout Templates */

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols Configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.material-symbols-outlined.success-icon {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
    font-size: 84px;
    color: #1e293b;
}

/* Layout */
.page-bg {
    background-color: #0f172a;
}

.card-bg {
    background-color: #ffffff;
}

/* Form Input Container */
.form-input-container {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input-container:focus-within {
    border-color: #94a3b8;
}

/* Validation states */
.form-input-container.border-green-500 {
    border-color: #22c55e;
}

.form-input-container.border-red-500 {
    border-color: #ef4444;
}

.form-input-container.border-yellow-500 {
    border-color: #eab308;
}

/* Form Icon */
.form-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure Material Icons render at exact size */
.material-symbols-outlined.form-icon {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    word-spacing: 0;
    text-indent: 0;
    overflow: visible;
}

/* Validation Icon (right side) */
.validation-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    z-index: 1;
    line-height: 1;
}

.validation-icon.text-green-500 {
    color: #22c55e;
}

.validation-icon.text-red-500 {
    color: #ef4444;
}

.validation-icon.text-yellow-500 {
    color: #eab308;
}

/* Text color utilities for validation */
.text-green-500 {
    color: #22c55e;
}

.text-red-500 {
    color: #ef4444;
}

.text-yellow-500 {
    color: #eab308;
}

/* Font size utilities */
.text-xl {
    font-size: 1.25rem;
}

.text-20px {
    font-size: 20px;
}

/* Form Input - Bootstrap compatible */
.form-input {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: #ffffff;
    color: #334155;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Only apply border styling if not in input-group */
.input-group .form-input {
    border: none;
    border-radius: 0;
}

.form-input:focus {
    border-color: #94a3b8;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.25);
}

/* Input group container - unified border */
.input-group {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.input-group:focus-within {
    border-color: #94a3b8;
    box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.25);
}

/* Validation states for input-group */
.input-group.border-green-500 {
    border-color: #22c55e;
}

.input-group.border-red-500 {
    border-color: #ef4444;
}

.input-group.border-yellow-500 {
    border-color: #eab308;
}

/* Input group text styling - no border, seamless */
.input-group-text {
    border: none;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.input-group-text .material-symbols-outlined {
    font-size: 20px;
    color: #94a3b8;
}

/* Form input - no border, seamless */
.form-input.border-start-0 {
    border: none;
    border-radius: 0;
    padding: 0.75rem;
}

.form-input.border-start-0:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Form select styling - no border, seamless */
.form-select.border-start-0 {
    border: none;
    border-radius: 0;
    padding: 0.75rem;
}

.form-select.border-start-0:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Calculate: icon left (1rem = 16px) + icon width (24px) + gap (8px) = 48px = 3rem */
/* Using 3.5rem (56px) to ensure no overlap */

/* Card number field needs extra padding for validation icon */
#card_number {
    padding-right: 3rem;
}

.form-input:focus {
    outline: none;
}

.form-input::placeholder {
    color: #cbd5e1;
}

.form-input select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: none;
}

/* Icon Colors */
.icon-blue-gray {
    color: #94a3b8;
}

.border-blue-gray-custom {
    border-color: #e2e8f0;
}

/* Buttons */
.pay-button,
.primary-button {
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    border: none;
    cursor: pointer;
    width: 100%;
}

.pay-button:hover,
.primary-button:hover {
    background-color: #1e293b;
}

.pay-button:active,
.primary-button:active {
    transform: scale(0.98);
}

.secondary-button {
    background-color: #64748b;
    color: #ffffff;
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    border: none;
    cursor: pointer;
    width: 100%;
}

.secondary-button:hover {
    background-color: #475569;
}

.secondary-button:active {
    transform: scale(0.98);
}

.pay-button-loading {
    background-color: #334155;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    border: none;
}

/* Alert Styles */
.alert-danger {
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    animation: shake 0.5s;
}

/* Animations */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Card Logos */
.card-logos img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-logos img.active {
    opacity: 1;
    transform: scale(1.1);
}

/* Bootstrap-compatible utility classes */
.min-vh-100 {
    min-height: 100vh;
}

.max-w-500 {
    max-width: 500px;
}

.rounded-2xl {
    border-radius: 1rem;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.text-slate-900 {
    color: #0f172a;
}

.text-slate-500 {
    color: #64748b;
}

.text-slate-400 {
    color: #94a3b8;
}

.text-slate-700 {
    color: #334155;
}

.bg-slate-50 {
    background-color: #f8fafc;
}

.border-slate-100 {
    border-color: #f1f5f9;
}

.border-slate-200 {
    border-color: #e2e8f0;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-8 > * + * {
    margin-top: 2rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-6 {
    gap: 1.5rem;
}

.opacity-80 {
    opacity: 0.8;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.leading-relaxed {
    line-height: 1.625;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-blue-500 {
    color: #3b82f6;
}

.text-blue-700 {
    color: #1d4ed8;
}

.bg-blue-50 {
    background-color: #eff6ff;
}

.border-blue-100 {
    border-color: #dbeafe;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-full {
    border-radius: 9999px;
}

.w-24 {
    width: 6rem;
}

.h-24 {
    height: 6rem;
}

.h-4 {
    height: 1rem;
}

.h-6 {
    height: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.border-b {
    border-bottom-width: 1px;
}

.grayscale {
    filter: grayscale(100%);
}

.grayscale-0 {
    filter: grayscale(0);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.pointer-events-none {
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .form-input-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .form-icon {
        left: 0.75rem;
        width: 20px;
        height: 20px;
    }
    
    .validation-icon {
        right: 0.75rem;
    }
    
    .form-input {
        padding-left: 3rem;
        padding-right: 0.75rem;
    }
    
    #card_number {
        padding-right: 2.75rem;
    }
}

@media (min-width: 768px) {
    .md\:p-10 {
        padding: 2.5rem;
    }
}