/**
 * Alfafaa Payment Gateway - Frontend Styles
 */

/* Common Styles */
:root {
    --apg-primary: #4a6cf7;
    --apg-primary-dark: #3a5be7;
    --apg-success: #4caf50;
    --apg-warning: #ff9800;
    --apg-error: #f44336;
    --apg-text: #333333;
    --apg-text-light: #666666;
    --apg-border: #e0e0e0;
    --apg-background: #ffffff;
    --apg-background-alt: #f9f9f9;
}

/* Payment Form Container */
.apg-payment-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--apg-background);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.apg-payment-form-wrapper h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--apg-text);
    font-size: 1.8rem;
}

/* Form Elements */
.apg-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.apg-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.apg-form-row label {
    font-weight: 600;
    color: var(--apg-text);
}

.apg-form-row label .required {
    color: var(--apg-error);
}

.apg-form-row input[type="text"],
.apg-form-row input[type="email"],
.apg-form-row input[type="number"],
.apg-form-row textarea {
    padding: 12px;
    border: 1px solid var(--apg-border);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.apg-form-row input:focus,
.apg-form-row textarea:focus {
    border-color: var(--apg-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}

/* Amount Field */
.apg-amount-wrapper {
    position: relative;
}

.apg-currency-symbol {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--apg-text-light);
    font-weight: 600;
    background-color: #cfe8ff;
    padding: 7px;
    border-radius: 4px 0px 0px 4px;
}

.apg-amount-wrapper input {
    padding-left: 50px !important;
    font-weight: bold;
}

/* Payment Methods */
.apg-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.apg-payment-method {
    position: relative;
}

.apg-payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.apg-payment-method label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 12px;
    border: 1px solid var(--apg-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.apg-payment-method input[type="radio"]:checked + label {
    border-color: var(--apg-primary);
    background-color: rgba(74, 108, 247, 0.05);
}

.apg-method-icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.apg-icon-stripe {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="%236772E5" d="M165 144.7l-43.3 9.2-.2 142.4c0 26.3 19.8 43.3 46.1 43.3 14.6 0 25.3-2.7 31.2-5.9v-33.8c-5.7 2.3-33.7 10.5-33.7-15.7V221h33.7v-37.8h-33.7zm89.1 51.6l-2.7-13.1H213v153.2h44.3V233.3c10.5-13.8 28.2-11.1 33.9-9.3v-40.8c-6-2.1-26.7-6-37.1 13.1zm92.3-72.3l-44.6 9.5v36.2l44.6-9.5zM44.9 228.3c0-6.9 5.8-9.6 15.1-9.7 13.5 0 30.7 4.1 44.2 11.4v-41.8c-14.7-5.8-29.4-8.1-44.1-8.1-36 0-60 18.8-60 50.2 0 49.2 67.5 41.2 67.5 62.4 0 8.2-7.1 10.9-17 10.9-14.7 0-33.7-6.1-48.6-14.2v40c16.5 7.1 33.2 10.1 48.5 10.1 36.9 0 62.3-15.8 62.3-47.8 0-52.9-67.9-43.4-67.9-63.4zM640 261.6c0-45.5-22-81.4-64.2-81.4s-67.9 35.9-67.9 81.1c0 53.5 30.3 78.2 73.5 78.2 21.2 0 37.1-4.8 49.2-11.5v-33.4c-12.1 6.1-26 9.8-43.6 9.8-17.3 0-32.5-6.1-34.5-26.9h86.9c.2-2.3.6-11.6.6-15.9zm-87.9-16.8c0-20 12.3-28.4 23.4-28.4 10.9 0 22.5 8.4 22.5 28.4zm-112.9-64.6c-17.4 0-28.6 8.2-34.8 13.9l-2.3-11H363v204.8l44.4-9.4.1-50.2c6.4 4.7 15.9 11.2 31.4 11.2 31.8 0 60.8-23.2 60.8-79.6.1-51.6-29.3-79.7-60.5-79.7zm-10.6 122.5c-10.4 0-16.6-3.8-20.9-8.4l-.3-66c4.6-5.1 11-8.8 21.2-8.8 16.2 0 27.4 18.2 27.4 41.4.1 23.9-10.9 41.8-27.4 41.8zm-126.7 33.7h44.6V183.2h-44.6z"/></svg>');
}

.apg-icon-paypal {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23003087" d="M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z"/></svg>');
}

/* Submit Button */
.apg-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.apg-submit-button {
    position: relative;
    background-color: var(--apg-primary);
    color: white;
    border: none;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
}

.apg-submit-button:hover {
    background-color: var(--apg-primary-dark);
}

.apg-submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.apg-spinner {
    display: none;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: apg-spin 1s ease-in-out infinite;
}

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

/* Loading State */
.apg-form.apg-loading,
.apg-payment-form.apg-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Error Message */
.apg-error {
    color: var(--apg-error);
    padding: 12px;
    background-color: rgba(244, 67, 54, 0.1);
    border-radius: 4px;
    margin-top: 1rem;
    font-weight: 500;
    display: none;
}

/* Success Page */
.apg-success-container,
.apg-failure-container,
.apg-pending-container,
.apg-receipt-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--apg-background);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.apg-success-icon,
.apg-failure-icon,
.apg-pending-icon {
    margin-bottom: 1.5rem;
}

.apg-success-title,
.apg-failure-title,
.apg-pending-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--apg-text);
}

.apg-success-message,
.apg-failure-message,
.apg-pending-message {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--apg-text-light);
}

/* Payment Details Grid */
.apg-payment-details {
    margin: 2rem 0;
    text-align: left;
}

.apg-payment-details h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--apg-text);
    text-align: center;
}

.apg-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.apg-detail-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--apg-border);
}

.apg-detail-row:last-child {
    border-bottom: none;
}

.apg-detail-label {
    font-weight: 600;
    color: var(--apg-text);
}

.apg-detail-value {
    color: var(--apg-text-light);
}

.apg-notes-row {
    grid-template-columns: 1fr;
}

/* Status Badges */
.apg-status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.apg-status-completed {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--apg-success);
}

.apg-status-pending {
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--apg-warning);
}

.apg-status-failed {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--apg-error);
}

/* Action Buttons */
.apg-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--apg-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin: 0 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.apg-button:hover {
    background-color: var(--apg-primary-dark);
    color: white;
}

.apg-receipt-button,
.apg-print-button {
    background-color: var(--apg-success);
}

.apg-receipt-button:hover,
.apg-print-button:hover {
    background-color: #3d8b40;
}

.apg-retry-button {
    background-color: var(--apg-warning);
}

.apg-retry-button:hover {
    background-color: #e68900;
}

/* Receipt Page */
.apg-receipt-container {
    text-align: left;
    max-width: 800px;
}

.apg-receipt-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--apg-border);
}

.apg-receipt-logo img {
    max-height: 60px;
    width: auto;
}

.apg-receipt-logo h2 {
    margin: 0;
    font-size: 1.8rem;
}

.apg-receipt-info h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.apg-receipt-id,
.apg-receipt-date {
    margin: 0.2rem 0;
    color: var(--apg-text-light);
}

.apg-receipt-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.apg-receipt-merchant,
.apg-receipt-customer {
    margin-bottom: 1.5rem;
}

.apg-receipt-merchant h3,
.apg-receipt-customer h3,
.apg-receipt-details h3,
.apg-receipt-payment-method h3,
.apg-receipt-status h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--apg-text);
}

.apg-receipt-details,
.apg-receipt-payment-method,
.apg-receipt-status {
    grid-column: span 2;
}

.apg-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.apg-receipt-table th,
.apg-receipt-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--apg-border);
}

.apg-receipt-table th {
    font-weight: 600;
}

.apg-receipt-table tfoot {
    font-weight: 600;
}

.apg-receipt-table tfoot th,
.apg-receipt-table tfoot td {
    padding-top: 1rem;
}

.apg-transaction-id {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--apg-text-light);
}

.apg-receipt-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--apg-border);
    text-align: center;
}

.apg-receipt-actions {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .apg-payment-container,
    .apg-success-container,
    .apg-failure-container,
    .apg-pending-container,
    .apg-receipt-container {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .apg-detail-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    
    .apg-receipt-header {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        text-align: center;
    }
    
    .apg-receipt-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .apg-receipt-details,
    .apg-receipt-payment-method,
    .apg-receipt-status {
        grid-column: span 1;
    }
    
    .apg-actions {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .apg-button {
        margin: 0;
    }
}

/* Print Styles */
@media print {
    body {
        background-color: white;
    }
    
    .apg-receipt-container {
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }
    
    .apg-receipt-actions {
        display: none;
    }
} 


/* Invoice View */