/* Main Recharge Form Styles */
.gifto-recharge-form {
    max-width: 100%;
    margin: 1rem auto;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    animation: fadeIn 0.4s ease-out;
    box-sizing: border-box;
}

.gifto-recharge-form h3 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

/* Balance Display Styling */
.balance-display {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
    margin: 0 0 2rem 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e40af;
    border: 1px solid #dbeafe;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.balance-display p {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e40af;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .balance-display {
        padding: 1.25rem 1rem;
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .balance-display p {
        font-size: 1.2rem;
    }
}

/* Balance Section Styling */
.gifto-user-balance {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%) !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px !important;
    margin: 0 0 2rem 0 !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1e40af !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.gifto-user-balance:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.gifto-user-balance:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.gifto-user-balance .balance-label {
    display: block;
    color: #4b5563;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.gifto-user-balance .balance-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    margin: 0.5rem auto 0;
    color: #1e40af;
    font-weight: 700;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.gifto-user-balance .balance-amount:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

/* Responsive adjustments for balance */
@media (max-width: 480px) {
    .gifto-user-balance {
        padding: 1.25rem 1rem;
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .gifto-user-balance .balance-amount {
        font-size: 1.4rem;
        padding: 0.5rem 1.25rem;
    }
    
    .gifto-user-balance .balance-label {
        font-size: 0.9rem;
    }
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Input Fields - Aggressive iOS Zoom Prevention */
.network-selection select,
.phone-input input,
.amount-input input[type="number"],
.amount-input input[type="tel"],
#phone,
#amount {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    transform: scale(1) !important;
    transform-origin: 0 0 !important;
    background-color: #ffffff !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Safari and iOS specific CSS here */
    .gifto-user-balance,
    .gifto-user-balance * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
    
    .amount-input input[type="number"],
    .phone-input input,
    #phone,
    #amount {
        font-size: 16px !important;
        line-height: 1.5 !important;
        padding: 14px 16px !important;
        -webkit-appearance: none !important;
        border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    
    /* Prevent zoom on focus */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
        select:focus,
        textarea:focus,
        input:not([type="range"]):focus {
            font-size: 16px !important;
        }
    }
}

/* Fix for number input spinners */
.amount-input input[type="number"] {
    -moz-appearance: textfield;
    padding-right: 80px; /* Space for MAX button */
}

.amount-input input[type="number"]::-webkit-outer-spin-button,
.amount-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Amount Input Container */
.amount-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* MAX Button */
#max-amount {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    background-color: #edf2f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 2;
}

#max-amount:hover {
    background-color: #e2e8f0;
}

.network-selection select:focus,
.phone-input input:focus,
.amount-input input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

button[type="submit"]:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Message Styling */
#gifto-message {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    display: none;
    align-items: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#gifto-message:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentColor;
    opacity: 0.8;
}

#gifto-message.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

#gifto-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

#gifto-message.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

#gifto-message .message-icon {
    margin-right: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

#gifto-message .message-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    padding: 4px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

#gifto-message .message-close:hover {
    opacity: 1;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gifto-recharge-form {
        padding: 1rem;
        margin: 0.5rem auto;
        border-radius: 8px;
    }
    
    .gifto-recharge-form h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .gifto-user-balance {
        font-size: 1.1rem;
    }
    
    /* Adjust amount input layout for mobile */
    .amount-input {
        flex-direction: column;
        align-items: stretch;
    }
    
    .amount-input input[type="number"] {
        padding-right: 1rem;
        margin-bottom: 0.5rem;
    }
    
    #max-amount {
        position: static;
        transform: none;
        align-self: flex-start;
        width: auto;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    /* Ensure proper touch targets */
    .gifto-recharge-form button,
    .gifto-recharge-form input,
    .gifto-recharge-form select {
        min-height: 48px;
    }
    
    /* Adjust form elements */
    .gifto-recharge-form input[type="text"],
    .gifto-recharge-form input[type="tel"],
    .gifto-recharge-form input[type="number"],
    .gifto-recharge-form select {
        font-size: 16px; /* Maintain 16px to prevent iOS zoom */
        padding: 0.75rem;
    }
}

/* Fix for iOS form elements */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .gifto-recharge-form select,
    .gifto-recharge-form textarea,
    .gifto-recharge-form input {
        font-size: 16px !important;
    }
}

/* Ensure form elements don't zoom on focus in iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select:focus,
    textarea:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus {
        font-size: 16px !important;
    }
}

/* Make the network selection more visible when auto-selected */
#network option:checked {
    font-weight: bold;
    background-color: #e9ecef;
}

/* Style for the network dropdown */
#network {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    width: 100%;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Hover state for network options */
#network option:hover {
    background-color: #f8f9fa;
}

/* Focus state for better accessibility */
#network:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Transaction History Styles */
.gifto-transaction-history-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.gifto-transaction-history-section h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #3498db;
}

.gifto-transaction-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gifto-transaction-table th {
    background-color: #f8f9fa;
    text-align: left;
    padding: 12px 15px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e0e0e0;
}

.gifto-transaction-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.gifto-transaction-table tr:last-child td {
    border-bottom: none;
}

.gifto-transaction-table tr:hover {
    background-color: #f8f9fa;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.status-failed {
    background-color: #f8d7da;
    color: #721c24;
}

.status-cancelled {
    background-color: #e2e3e5;
    color: #383d41;
}

/* Responsive table */
@media (max-width: 768px) {
    .gifto-transaction-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* No transactions message */
.no-transactions {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}

/* Country and Network Selection */
.country-selection,
.network-selection {
    margin-bottom: 1rem;
}

.country-selection select,
.network-selection select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fff;
}

.country-selection select:focus,
.network-selection select:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* Disabled state styling */
select:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* Recharge Form Styles */
.gifto-recharge-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.gifto-recharge-form .form-group {
    margin-bottom: 15px;
}

.gifto-recharge-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.gifto-recharge-form .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.gifto-recharge-form .input-group {
    display: flex;
}

/* Style MAX button inside input-group to align nicely with the amount input */
.gifto-recharge-form .input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gifto-recharge-form .input-group #max-amount,
.gifto-recharge-form .input-group .btn#max-amount {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f1f1f1;
    cursor: pointer;
    color: #333;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .gifto-recharge-form .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    .gifto-recharge-form .input-group #max-amount,
    .gifto-recharge-form .input-group .btn#max-amount {
        width: 100%;
        margin-top: 8px;
    }
}

.gifto-recharge-form .input-group .input-group-text {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 4px 0 0 4px;
}

.gifto-recharge-form .input-group input {
    border-radius: 0 4px 4px 0;
    flex: 1;
}

.gifto-recharge-form button[type="submit"] {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.gifto-recharge-form button[type="submit"]:hover {
    background-color: #005177;
}

.gifto-recharge-form button[type="submit"].processing {
    opacity: 0.7;
    position: relative;
    padding-left: 40px;
}

.gifto-recharge-form button[type="submit"].processing:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive adjustments */
@media (max-width: 480px) {
    .gifto-recharge-form {
        padding: 15px;
    }
    
    .gifto-recharge-form .form-control {
        font-size: 14px;
    }
}

/* Style for the network dropdown */
#network {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    width: 100%;
    font-size: 16px;
    margin-bottom: 15px;
}

/* Hover state for network options */
#network option:hover {
    background-color: #f8f9fa;
}

/* Focus state for better accessibility */
#network:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* =================================== */
/* Network Selector with Icons */
/* =================================== */
.network-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.network-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: inherit;
}

/* Select2 Customization */
.select2-container {
    width: 100% !important;
    margin-bottom: 15px;
}

.select2-container--default .select2-selection--single {
    height: 46px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 15px;
    color: #2c3e50;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

.select2-container--default .select2-results__option {
    padding: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f8f9fa;
    color: #2c3e50;
}

/* Make sure the dropdown matches our theme */
.select2-dropdown {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Focus state */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* Selected item in dropdown */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f1f8ff;
}

/* Hover state */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e3f2fd;
    color: #2c3e50;
}

/* ----------------------------------
   Dark / Light mode (iOS / Safari)
   The form will adapt automatically to the user's system appearance
   ---------------------------------- */
@media (prefers-color-scheme: dark) {
    .gifto-recharge-form {
        background: #0b1220; /* deep neutral */
        color: #e6eef8;
        box-shadow: none;
        border: 1px solid rgba(255,255,255,0.04);
        -webkit-font-smoothing: antialiased;
        color-scheme: dark;
    }

    .gifto-recharge-form h3,
    .gifto-recharge-form label,
    .gifto-recharge-form .form-group label {
        color: #e6eef8;
    }

    /* Inputs / selects */
    .gifto-recharge-form input,
    .gifto-recharge-form select,
    .gifto-recharge-form .form-control,
    .gifto-amount-wrap .gifto-amount-input,
    #amount,
    #phone {
        background: #0f1724;
        color: #e6eef8;
        border-color: rgba(255,255,255,0.06);
    }

    /* Force override for selectors previously set with !important (ensure proper blending) */
    .gifto-recharge-form input,
    .gifto-recharge-form select,
    .gifto-recharge-form .form-control,
    .gifto-amount-wrap .gifto-amount-input,
    #amount,
    #phone {
        background-color: #0f1724 !important;
        color: #e6eef8 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    /* Make placeholder text visible in dark mode */
    .gifto-recharge-form input::placeholder,
    .gifto-recharge-form textarea::placeholder {
        color: rgba(230,238,248,0.55) !important;
        opacity: 1 !important;
    }

    /* Style bootstrap-style input-group text (the $ sign in your markup) */
    .gifto-recharge-form .input-group-text,
    .gifto-recharge-form .input-group .input-group-text {
        background: transparent !important;
        background-color: transparent !important;
        color: #dbeeff !important;
        border-color: rgba(255,255,255,0.04) !important;
        box-shadow: none !important;
    }

    /* Ensure the MAX button inside input-group is visible and blends */
    .gifto-recharge-form .input-group .btn,
    .gifto-recharge-form .input-group .btn#max-amount,
    .gifto-amount-wrap .gifto-max-btn,
    .gifto-amount-wrap #max-amount {
        background: rgba(255,255,255,0.04) !important;
        color: #e6eef8 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    /* If input-group uses border-radius styling, ensure input and group match */
    .gifto-recharge-form .input-group .form-control,
    .gifto-recharge-form .input-group input.form-control {
        background-color: #0f1724 !important;
        color: #e6eef8 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    /* Placeholder color for inputs */
    .gifto-recharge-form input::placeholder,
    .gifto-recharge-form textarea::placeholder {
        color: rgba(230,238,248,0.55);
    }

    /* Fix Safari / iOS autofill tinting */
    input:-webkit-autofill,
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 30px #0f1724 inset !important;
        -webkit-text-fill-color: #e6eef8 !important;
    }

    /* Balance display darker theme - force overrides to avoid white background from earlier rules */
    .balance-display,
    .gifto-user-balance {
        background: linear-gradient(135deg, #071428 0%, #021627 100%) !important;
        color: #cfe8ff !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        box-shadow: none !important;
    }

    .balance-display p {
        color: #cfe8ff !important;
    }

    .gifto-user-balance .balance-amount {
        background: linear-gradient(135deg, #071428 0%, #0b1a2a 100%) !important;
        color: #dbeeff !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        box-shadow: none !important;
    }

    /* Currency and MAX inside input */
    .gifto-amount-wrap .gifto-currency {
        color: #9fb7d6;
    }

    .gifto-amount-wrap .gifto-max-btn,
    .gifto-amount-wrap #max-amount {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
        color: #e6eef8;
    }

    .gifto-amount-wrap .gifto-max-btn:hover,
    .gifto-amount-wrap #max-amount:hover {
        background: rgba(255,255,255,0.06);
    }

    /* Submit button tuned for dark */
    .gifto-recharge-form button[type="submit"] {
        background: linear-gradient(90deg, #2563eb, #1e40af);
        color: #ffffff;
        border: none;
    }

    .gifto-recharge-form button[type="submit"]:hover {
        background: linear-gradient(90deg, #1e5ad0, #163a8a);
    }

    /* Messages */
    #gifto-message.success {
        background: #052e11;
        color: #8ef0a2;
        border: 1px solid rgba(120, 230, 150, 0.12);
    }

    #gifto-message.error {
        background: #2b0a0a;
        color: #ffb4b4;
        border: 1px solid rgba(255,80,80,0.12);
    }

    /* Ensure inline and global AJAX messages adapt in dark mode (force overrides) */
    .gifto-message,
    #gifto-message,
    .gifto-recharge-form .gifto-message,
    #gifto-message.gifto-message {
        background: rgba(20,28,36,0.9) !important;
        color: #e6f6e9 !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    }

    .gifto-message.success,
    #gifto-message.success,
    .gifto-recharge-form .gifto-message.success {
        background: linear-gradient(90deg, rgba(5,46,17,0.9), rgba(8,60,22,0.9)) !important;
        color: #8ef0a2 !important;
        border: 1px solid rgba(120, 230, 150, 0.12) !important;
    }

    .gifto-message.error,
    #gifto-message.error,
    .gifto-recharge-form .gifto-message.error {
        background: linear-gradient(90deg, rgba(43,10,10,0.9), rgba(60,10,10,0.9)) !important;
        color: #ffb4b4 !important;
        border: 1px solid rgba(255,80,80,0.12) !important;
    }

    /* Select2 adjustments for dark mode */
    .select2-container--default .select2-selection--single {
        background: #0f1724;
        border-color: rgba(255,255,255,0.06);
        color: #e6eef8;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e6eef8;
    }

    /* Ensure icons and small text remain legible */
    .network-icon,
    .status-badge {
        color: rgba(255,255,255,0.9);
    }

    /* More specific input-group overrides (Bootstrap markup) */
    .gifto-recharge-form .input-group-text,
    .gifto-recharge-form .input-group .input-group-text,
    .input-group-text {
        background: transparent !important;
        background-color: transparent !important;
        color: #dbeeff !important;
        border-color: rgba(255,255,255,0.04) !important;
        box-shadow: none !important;
    }

    /* Selects (including disabled) should match dark background */
    .gifto-recharge-form select,
    .gifto-recharge-form select:disabled,
    #network,
    #country {
        background-color: #0f1724 !important;
        color: #e6eef8 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    /* Transaction table dark adjustments */
    .gifto-transaction-table,
    .gifto-transaction-table th,
    .gifto-transaction-table td {
        background: transparent !important;
        color: #dbeeff !important;
        border-color: rgba(255,255,255,0.04) !important;
    }

    .gifto-transaction-table th {
        background-color: rgba(255,255,255,0.02) !important;
        color: #e6eef8 !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    }

    .gifto-transaction-table tr:hover {
        background-color: rgba(255,255,255,0.02) !important;
    }

    /* Status badges - keep contrast but darker backgrounds */
    .status-badge {
        color: #f8fafc !important;
        background: rgba(255,255,255,0.04) !important;
    }

    .status-completed { background: rgba(16,185,129,0.14) !important; color: #8ef0a2 !important; }
    .status-pending   { background: rgba(250,204,21,0.08) !important; color: #fbbf24 !important; }
    .status-failed    { background: rgba(239,68,68,0.08) !important; color: #ffb4b4 !important; }
    .status-cancelled { background: rgba(156,163,175,0.06) !important; color: #cbd5e1 !important; }

    /* Inline login form - dark mode overrides (scoped to plugin form) */
    .gifto-recharge-form .gifto-login-container {
        background: transparent !important;
        color: #e6eef8 !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    /* Target standalone .gifto-login-message (may be outside container) - scoped */
    .gifto-recharge-form .gifto-login-message {
        background: transparent !important;
        color: #cfe8ff !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 8px 0 !important;
    }

    .gifto-recharge-form .gifto-login-message p {
        color: #cfe8ff !important;
        margin: 0 !important;
    }

    .gifto-recharge-form .gifto-login-container .gifto-login-message p {
        color: #cfe8ff !important;
    }

    .gifto-login-form,
    .gifto-login-form .form-group {
        background: transparent !important;
        color: #e6eef8 !important;
    }

    .gifto-login-form label {
        color: #e6eef8 !important;
    }

    .gifto-login-form .form-control,
    .gifto-login-form input,
    #user_login,
    #user_pass {
        background: #0f1724 !important;
        color: #e6eef8 !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        box-shadow: none !important;
    }

    .gifto-login-form input::placeholder {
        color: rgba(230,238,248,0.52) !important;
        opacity: 1 !important;
    }

    .gifto-login-form input:focus,
    .gifto-login-form .form-control:focus {
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
        border-color: rgba(37,99,235,0.6) !important;
    }

    /* Buttons and submit */
    .gifto-login-form .button,
    .gifto-login-form .button-primary,
    #wp-submit {
        background: linear-gradient(90deg, #2563eb, #1e40af) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(16,24,40,0.4) !important;
    }

    .gifto-login-links a {
        color: #93c5fd !important;
    }

    .gifto-login-links a:hover {
        color: #bfdbfe !important;
    }

    .login-remember label,
    .gifto-login-form .login-remember {
        color: #e6eef8 !important;
    }

    /* Auth modal adjustments for dark mode */
    .gifto-auth-panel {
        background: #071428 !important;
        color: #e6eef8 !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
    }

    .gifto-auth-panel h3,
    .gifto-auth-form label,
    .auth-tab {
        color: #e6eef8 !important;
    }

    .gifto-auth-close {
        color: #dbeeff !important;
    }

    .gifto-auth-form .form-control,
    .gifto-auth-form input {
        background: #0f1724 !important;
        color: #e6eef8 !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
    }

    .gifto-auth-form .button,
    .gifto-auth-form .button.button-primary {
        background: linear-gradient(90deg, #2563eb, #1e40af) !important;
        color: #fff !important;
        border: none !important;
    }

    /* Fix: ensure the inline login message/container never appears white in dark themes
       Some site themes add a high-specificity light background; force transparent/dark-safe
       styles here and scope to the plugin form. Keep these highly-specific to override
       third-party theme rules. */
    .gifto-recharge-form .gifto-login-message,
    .gifto-recharge-form .gifto-login-container,
    .gifto-login-message,
    .gifto-login-container {
        background: transparent !important;
        color: #cfe8ff !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 8px 0 !important;
    }

    .gifto-recharge-form .gifto-login-message p,
    .gifto-login-message p {
        color: #cfe8ff !important;
        margin: 0 !important;
    }
}

/* Light scheme explicit tweaks (optional, reinforces defaults) */
@media (prefers-color-scheme: light) {
    .gifto-recharge-form { color-scheme: light; }

    /* Light-mode adjustments for inline login to blend with light backgrounds.
       Make the message subtler (lighter gray) and add a very faint background
       to the login container so it separates slightly from the page without
       creating a high-contrast white box. Dark-mode rules are left as-is above. */
    .gifto-recharge-form .gifto-login-message {
        /* very subtle background and lighter gray text for less visual weight */
        background: rgba(15,23,42,0.02) !important; /* extremely faint */
        color: #6b7280 !important; /* lighter muted gray */
        margin: 0 0 8px 0 !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        border: 1px solid rgba(16,24,40,0.03) !important;
    }

    .gifto-recharge-form .gifto-login-container {
        /* faint lift so the container reads as a group without stark contrast */
        background: rgba(15,23,42,0.02) !important;
        color: #111827 !important;
        border: 1px solid rgba(16,24,40,0.04) !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }

    /* Tone down input contrast inside the plugin in light mode */
    .gifto-recharge-form .gifto-login-form .form-control,
    .gifto-recharge-form .gifto-login-form input,
    .gifto-recharge-form #user_login,
    .gifto-recharge-form #user_pass {
        /* very slightly off-white so it's not a stark white block */
        background: #fbfdff !important;
        color: #374151 !important; /* muted slate */
        border: 1px solid rgba(16,24,40,0.06) !important; /* softer border */
        box-shadow: none !important;
    }

    .gifto-recharge-form .gifto-login-form label {
        color: #4b5563 !important; /* softer label tone */
    }

    .gifto-recharge-form .gifto-login-form input::placeholder,
    .gifto-recharge-form .gifto-login-form .form-control::placeholder {
        color: rgba(55,65,81,0.45) !important; /* subtle placeholder */
        opacity: 1 !important;
    }

    .gifto-recharge-form .gifto-login-links a {
        color: #2563eb !important;
    }

    /* Autofill (light) - ensure browser-saved credentials don't create
       a high-contrast background; scoped to the plugin form only. */
    .gifto-recharge-form input:-webkit-autofill,
    .gifto-recharge-form input:-webkit-autofill:focus,
    .gifto-recharge-form input:-webkit-autofill:hover,
    .gifto-recharge-form textarea:-webkit-autofill,
    .gifto-recharge-form textarea:-webkit-autofill:focus,
    .gifto-recharge-form textarea:-webkit-autofill:hover {
        -webkit-box-shadow: 0 0 0 1000px #fbfdff inset !important; /* match input bg */
        box-shadow: 0 0 0 1000px #fbfdff inset !important;
        -webkit-text-fill-color: #374151 !important; /* muted text */
        caret-color: #374151 !important;
        background-clip: padding-box !important;
    }

    /* Some WebKit implementations render the first-line with different color */
    .gifto-recharge-form input:-webkit-autofill::first-line {
        color: #374151 !important;
    }
}

/* Make sure the selected item shows the icon */
.select2-selection__rendered .network-icon {
    margin-right: 8px;
}

button.loading {
    position: relative;
    color: transparent;
}
button.loading:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

/* Message Styling */
.gifto-message {
    padding: 15px 20px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    border: 1px solid transparent;
    animation: fadeIn 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Success Message */
.gifto-message.success {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

/* Error Message */
.gifto-message.error {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* AJAX Response Messages */
.gifto-message {
    padding: 12px 20px;
    margin: 0 0 20px 0;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    border: 1px solid transparent;
    animation: fadeIn 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Success Message */
.gifto-message.success {
    background-color: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

/* Error Message */
.gifto-message.error {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Close Button */
.gifto-message-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0 0 15px;
    margin-left: 10px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.gifto-message-close:hover {
    opacity: 1;
}

/* Message Content */
.gifto-message-content {
    flex-grow: 1;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Stronger specificity to avoid theme overrides */
.gifto-recharge-form .gifto-message,
#gifto-message.gifto-message,
.gifto-recharge-form #gifto-message {
    padding: 12px 18px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    position: relative !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Make sure the success/error color rules are applied */
.gifto-recharge-form .gifto-message.success,
#gifto-message.gifto-message.success {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.gifto-recharge-form .gifto-message.error,
#gifto-message.gifto-message.error {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}

/* =================================== */
/* Auth Modal Styles (for non-logged-in users) */
/* =================================== */
.gifto-auth-modal { display: none; }
.gifto-auth-modal.open { display: block; }
.gifto-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
}
.gifto-auth-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    max-width: 420px;
    width: calc(100% - 40px);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 20px 18px;
    z-index: 9999;
}
.gifto-auth-close {
    position: absolute;
    right: 10px;
    top: 8px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
}
.gifto-auth-panel h3 { text-align:center; margin-top:0; margin-bottom:12px; font-size:20px }
.gifto-auth-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:12px }
.auth-tab { background: transparent; border: 1px solid #e6e6e6; padding:8px 12px; border-radius:6px; cursor:pointer }
.auth-tab.active { background:#f1f8ff; border-color:#cfe8ff; font-weight:600 }
.gifto-auth-form .form-group { margin-bottom:12px }
.gifto-auth-form label { display:block; margin-bottom:6px; font-weight:600 }
.gifto-auth-form .form-control { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px }
.gifto-auth-form .button { display:inline-block; padding:10px 14px; border-radius:6px; background:#0073aa; color:#fff; border:none; cursor:pointer }
.gifto-auth-form .button.button-primary { background:#0073aa }
.gifto-auth-links { text-align:center; margin-top:8px }
.gifto-auth-note { font-size:13px; color:#666; margin-top:8px; text-align:center }

@media (max-width:480px) {
    .gifto-auth-panel { padding: 16px }
}

/* Embedded amount controls - wrap input, currency, and max inside a single visual control */
.gifto-amount-wrap {
    position: relative;
    width: 100%;
    display: block;
}

.gifto-amount-wrap .gifto-currency {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: #6b7280;
    pointer-events: none;
    z-index: 3;
}

.gifto-amount-wrap .gifto-amount-input {
    padding-left: 38px !important; /* space for currency */
    padding-right: 86px !important; /* space for max button */
}

.gifto-amount-wrap .gifto-max-btn,
.gifto-amount-wrap #max-amount {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    z-index: 4;
    line-height: 1;
}

/* Slightly smaller hit area on desktop but still tappable on mobile */
.gifto-amount-wrap .gifto-max-btn:focus,
.gifto-amount-wrap .gifto-max-btn:hover,
.gifto-amount-wrap #max-amount:focus,
.gifto-amount-wrap #max-amount:hover {
    background: #e6edf3;
}

@media (max-width: 480px) {
    .gifto-amount-wrap .gifto-amount-input {
        padding-left: 34px !important;
        padding-right: 72px !important;
        font-size: 16px;
    }

    .gifto-amount-wrap .gifto-currency {
        left: 10px;
        font-size: 0.95rem;
    }

    .gifto-amount-wrap .gifto-max-btn,
    .gifto-amount-wrap #max-amount {
        right: 6px;
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    /* Extra high-specificity fallbacks for login message to counter theme overrides
       (scoped to the plugin form to avoid touching header/site styles) */
    body.dark .gifto-recharge-form .gifto-login-message,
    html.dark .gifto-recharge-form .gifto-login-message,
    [data-theme="dark"] .gifto-recharge-form .gifto-login-message,
    body[class*="dark"] .gifto-recharge-form .gifto-login-message,
    .gifto-recharge-form .entry-content .gifto-login-message,
    .gifto-recharge-form .post .gifto-login-message,
    .gifto-recharge-form .page .gifto-login-message,
    .gifto-recharge-form .gifto-login-message {
        background: transparent !important;
        color: #cfe8ff !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 8px 0 !important;
    }

    body.dark .gifto-recharge-form .gifto-login-message p,
    html.dark .gifto-recharge-form .gifto-login-message p,
    [data-theme="dark"] .gifto-recharge-form .gifto-login-message p,
    body[class*="dark"] .gifto-recharge-form .gifto-login-message p,
    .gifto-recharge-form .entry-content .gifto-login-message p,
    .gifto-recharge-form .post .gifto-login-message p,
    .gifto-recharge-form .page .gifto-login-message p,
    .gifto-recharge-form .gifto-login-message p {
        color: #cfe8ff !important;
        margin: 0 !important;
    }

    /* Also add a non-prefers fallback for themes that don't expose system theme */
    .gifto-recharge-form .gifto-login-message {
        background: transparent !important;
        color: #374151 !important; /* neutral fallback for both themes */
    }
}

/* Scoped, high-specificity late override for light mode to ensure subtle
   separation only inside the plugin form. This avoids affecting site header
   or other elements that might share generic class names. */
@media (prefers-color-scheme: light) {
    .gifto-recharge-form .gifto-login-message,
    .gifto-recharge-form .gifto-login-container {
        background: rgba(15,23,42,0.02) !important; /* very faint lift */
        color: #6b7280 !important; /* lighter muted gray */
        border: 1px solid rgba(16,24,40,0.03) !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
    }

    /* Paragraph text inside message */
    .gifto-recharge-form .gifto-login-message p {
        color: #6b7280 !important;
        margin: 0 !important;
    }
}

/* Strong, scoped mobile login layout fixes to override theme/framework rules (Bootstrap etc.)
   These keep the login fields stacked, force full-width inputs, and ensure the remember
   checkbox and its label remain together on narrow screens. Scoped to plugin classes only. */
.gifto-recharge-form .gifto-login-form,
.gifto-recharge-form .gifto-login-form * {
    box-sizing: border-box !important;
}

.gifto-recharge-form .gifto-login-form .form-group,
.gifto-recharge-form .gifto-login-form p.login-username,
.gifto-recharge-form .gifto-login-form p.login-password,
.gifto-recharge-form .gifto-login-form p.login-submit {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
}

.gifto-recharge-form .gifto-login-form .input,
.gifto-recharge-form .gifto-login-form input[type="text"],
.gifto-recharge-form .gifto-login-form input[type="password"],
.gifto-recharge-form .gifto-login-form .form-control {
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevent theme rules that convert form rows into flex rows from affecting us */
.gifto-recharge-form .gifto-login-form .row,
.gifto-recharge-form .gifto-login-form .form-row,
.gifto-recharge-form .gifto-login-form .d-flex {
    display: block !important;
}

/* Keep the checkbox and label together */
.gifto-recharge-form .gifto-login-form .login-remember,
.gifto-recharge-form .gifto-login-form .login-remember label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

.gifto-recharge-form .gifto-login-form .login-remember input[type="checkbox"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

/* Login links: stack vertically on small screens, horizontal on larger */
.gifto-recharge-form .gifto-login-links {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

@media (max-width: 480px) {
    .gifto-recharge-form .gifto-login-links { flex-direction: column !important; }
    .gifto-recharge-form .gifto-login-links a { display: block !important; text-align: center !important; }
    /* Ensure login paragraphs don't become inline due to framework rules */
    .gifto-recharge-form .gifto-login-form p { display: block !important; }
}

/* Extra specific fallback for sites that add high-specificity Bootstrap utilities */
#gifto-inline-login .gifto-login-form .login-remember,
.gifto-login-container .gifto-login-form .login-remember {
    display: inline-flex !important;
}

/* Additional layout safety: force the login message and container to be full-width
   and not participate in any site-level flex/float layout that pushes the form to the right.
   This addresses themes that convert content areas to horizontal flex rows, which can
   leave the message on the left and the form shifted to the right on small screens. */
.gifto-recharge-form .gifto-login-message,
.gifto-recharge-form .gifto-login-container {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 12px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important; /* keep the small message centered */
}

/* Keep the actual form centered and constrained so it doesn't hug the right edge */
.gifto-recharge-form .gifto-login-form {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important; /* inputs and labels remain left-aligned inside the form */
}

@media (max-width: 480px) {
    .gifto-recharge-form .gifto-login-message { text-align: center !important; }
    .gifto-recharge-form .gifto-login-container { padding-left: 12px !important; padding-right: 12px !important; }

    /* Force the login message/container to the top on small screens even
       when the surrounding layout is a horizontal flex or grid. This makes
       sure the small notice appears above the form instead of to the left
       or centered off-form. */
    .gifto-recharge-form .gifto-login-message,
    .gifto-recharge-form .gifto-login-container {
        display: block !important;
        width: 100% !important;
        flex-basis: 100% !important;
        flex: 0 0 100% !important;
        order: -1 !important; /* put above other flex children */
        align-self: stretch !important;
        clear: both !important;
        margin: 0 0 12px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    /* If the parent is grid, force the message to span all columns */
    .gifto-recharge-form .gifto-login-message {
        grid-column: 1 / -1 !important;
    }
}