/**
 * TPG Addons for WooCommerce - Enhanced Checkout Styles
 *
 * Styles for payment errors, form validation, payment methods accordion,
 * and empty cart state. Based on approved Aarya Version 5 designs.
 *
 * @package TPG_Addons_WooCommerce
 * @since   2.1.0
 */


/* ==========================================================================
   1. PAYMENT ERROR BANNER
   ========================================================================== */

.tpg-payment-error {
    background-color: #FDEDED;
    border-left: 4px solid #D32F2F;
    border-radius: var(--tpg-radius-md, 8px);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    animation: tpg-error-fade-in 0.2s ease-out;
}

@keyframes tpg-error-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tpg-payment-error__icon {
    flex-shrink: 0;
    color: #D32F2F;
    margin-top: 2px;
}

.tpg-payment-error__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.tpg-payment-error__content {
    flex: 1;
    min-width: 0;
}

.tpg-payment-error__title {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: #B71C1C;
    margin: 0 0 6px;
    line-height: 1.4;
}

.tpg-payment-error__message {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--tpg-dark-gray, #4A4B4C);
    margin: 0 0 12px;
    line-height: 1.5;
}

.tpg-payment-error__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.tpg-payment-error__try-again {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpg-dark-gray, #4A4B4C);
    background: var(--tpg-white, #FFFFFF);
    border: 1px solid var(--tpg-gray, #D8DDE2);
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tpg-payment-error__try-again:hover {
    background: var(--tpg-light-gray, #F0F4F7);
    border-color: var(--tpg-dark-gray, #4A4B4C);
}

.tpg-payment-error__try-again:focus {
    outline: 2px solid #D32F2F;
    outline-offset: 2px;
}

.tpg-payment-error__change-method {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpg-dark-orange, #F05A28);
    text-decoration: none;
    transition: color 0.15s ease;
}

.tpg-payment-error__change-method:hover {
    color: var(--tpg-orange, #F99351);
    text-decoration: underline;
}

.tpg-payment-error__dismiss {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--tpg-medium-gray, #8A8E90);
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tpg-payment-error__dismiss:hover {
    color: var(--tpg-dark-gray, #4A4B4C);
    background-color: rgba(0, 0, 0, 0.05);
}

.tpg-payment-error__dismiss:focus {
    outline: 2px solid #D32F2F;
    outline-offset: 2px;
}

.tpg-payment-error__dismiss svg {
    display: block;
}


/* ==========================================================================
   2. FORM FIELD VALIDATION STATES
   ========================================================================== */

/* Error State */
.tpg-field-error input,
.tpg-field-error select,
.tpg-field-error textarea,
.tpg-checkout-flow .wc-block-components-text-input.has-error input,
.tpg-checkout-flow .has-error input,
.tpg-checkout-flow .has-error select,
.tpg-checkout-flow .has-error textarea {
    border-color: #D32F2F !important;
    background-color: var(--tpg-white, #FFFFFF) !important;
}

.tpg-field-error input:focus,
.tpg-field-error select:focus,
.tpg-field-error textarea:focus,
.tpg-checkout-flow .has-error input:focus,
.tpg-checkout-flow .has-error select:focus,
.tpg-checkout-flow .has-error textarea:focus {
    border-color: #D32F2F !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15) !important;
}

/* Error Message */
.tpg-field-error-message {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #D32F2F;
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.4;
    animation: tpg-field-error-fade 0.15s ease-out;
}

@keyframes tpg-field-error-fade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tpg-field-error-message svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

/* Success State */
.tpg-field-success input,
.tpg-field-success select,
.tpg-field-success textarea {
    border-color: var(--tpg-success, #079D88) !important;
}

.tpg-field-success input:focus,
.tpg-field-success select:focus,
.tpg-field-success textarea:focus {
    box-shadow: 0 0 0 3px rgba(7, 157, 136, 0.15) !important;
}

/* WooCommerce Validation Error Override */
.tpg-checkout-flow .wc-block-components-validation-error {
    color: #D32F2F !important;
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px !important;
    margin-top: 6px !important;
}


/* ==========================================================================
   3. WOOCOMMERCE NOTICE OVERRIDES
   ========================================================================== */

/* Error Notices */
.tpg-checkout-flow .woocommerce-error,
.tpg-checkout-flow .wc-block-components-notice-banner.is-error {
    background-color: #FDEDED !important;
    border: none !important;
    border-left: 4px solid #D32F2F !important;
    border-radius: var(--tpg-radius-md, 8px) !important;
    color: var(--tpg-dark-gray, #4A4B4C) !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.tpg-checkout-flow .woocommerce-error::before {
    color: #D32F2F !important;
}

.tpg-checkout-flow .woocommerce-error li,
.tpg-checkout-flow .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Success Notices */
.tpg-checkout-flow .woocommerce-message,
.tpg-checkout-flow .wc-block-components-notice-banner.is-success {
    background-color: #E8F5E9 !important;
    border: none !important;
    border-left: 4px solid var(--tpg-success, #079D88) !important;
    border-radius: var(--tpg-radius-md, 8px) !important;
}

/* Info Notices */
.tpg-checkout-flow .woocommerce-info,
.tpg-checkout-flow .wc-block-components-notice-banner.is-info {
    background-color: #E3F2FD !important;
    border: none !important;
    border-left: 4px solid var(--tpg-blue, #1D75BC) !important;
    border-radius: var(--tpg-radius-md, 8px) !important;
}


/* ==========================================================================
   4. PAYMENT METHODS - RADIO BUTTON ACCORDION
   ========================================================================== */
   .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow: none !important;
}


/* Individual Payment Method */
.tpg-checkout-flow .wc-block-components-radio-control-accordion-option,
.tpg-checkout-flow #payment .payment_methods li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.tpg-checkout-flow .wc-block-components-radio-control-accordion-option:last-child,
.tpg-checkout-flow #payment .payment_methods li:last-child {
    border-bottom: none;
}

/* Payment Method Header */
.tpg-checkout-flow .wc-block-components-radio-control-accordion-option__label,
.tpg-checkout-flow #payment .payment_methods li > label {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin: 0;
}

.tpg-checkout-flow .wc-block-components-radio-control-accordion-option__label:hover,
.tpg-checkout-flow #payment .payment_methods li > label:hover {
    background-color: var(--tpg-light-gray, #F0F4F7);
}

/* Radio Button */
.tpg-checkout-flow .wc-block-components-radio-control__input,
.tpg-checkout-flow #payment .payment_methods li input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 12px 0 0 !important;
    border: 2px solid var(--tpg-gray, #D8DDE2) !important;
    border-radius: 50% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
    flex-shrink: 0;
    position: relative !important;
    top: 7px !important;
}

.tpg-checkout-flow .wc-block-components-radio-control__input:checked,
.tpg-checkout-flow #payment .payment_methods li input[type="radio"]:checked {
    border-color: var(--tpg-orange-primary) !important;
    background: radial-gradient(circle, var(--tpg-orange-primary) 40%, transparent 40%) !important;
}

.tpg-checkout-flow .wc-block-components-radio-control__input:focus,
.tpg-checkout-flow #payment .payment_methods li input[type="radio"]:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

.tpg-checkout-flow .wc-block-components-radio-control__input:before {
    background: var(--tpg-orange-primary) !important;
}

/* Payment Method Label Text */
.tpg-checkout-flow .wc-block-components-radio-control__label,
.tpg-checkout-flow #payment .payment_methods li > label {
    flex: 1;
    font-family: var(--tpg-font-body) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--tpg-black, #212122) !important;
}

/* Card Brand Icons */
.tpg-checkout-flow .wc-block-components-payment-method-icons,
.tpg-checkout-flow #payment .payment_methods li img {
    margin-left: auto;
}

.tpg-checkout-flow .wc-block-components-payment-method-icons img,
.tpg-checkout-flow .wc-block-components-payment-method-icon {
    height: 24px;
    width: auto;
    margin-left: 8px;
}

/* Payment Method Content (Expanded) */

@keyframes tpg-payment-expand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
    }
}

/* Selected Payment Method Highlight */
.tpg-checkout-flow .wc-block-components-radio-control-accordion-option--checked,
.tpg-checkout-flow #payment .payment_methods li.wc_payment_method > input:checked + label {
    background-color: rgba(240, 90, 40, 0.03);
}

.wc-block-components-radio-control--highlight-checked:after {
    display: none;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control.disable-radio-control .wc-block-components-radio-control__input {
    display: block !important;
}


/* ==========================================================================
   5. CREDIT CARD FORM FIELDS
   ========================================================================== */

.tpg-card-form {
    display: grid;
    gap: 16px;
}

.tpg-card-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tpg-card-form__field {
    position: relative;
}

.tpg-card-form__label {
    display: block;
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--tpg-dark-gray, #4A4B4C);
    margin-bottom: 6px;
}

.tpg-card-form__input {
    width: 100%;
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 16px;
    padding: 12px;
    border: 1px solid var(--tpg-gray, #D8DDE2);
    border-radius: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: var(--tpg-white, #FFFFFF);
}

.tpg-card-form__input:focus {
    border-color: var(--tpg-blue, #1D75BC);
    box-shadow: 0 0 0 3px rgba(29, 117, 188, 0.15);
    outline: none;
}

/* Card Number with Brand Icon */
.tpg-card-form__card-number {
    position: relative;
}

.tpg-card-form__brand-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: auto;
    pointer-events: none;
}

.tpg-card-form__card-number .tpg-card-form__input {
    padding-right: 48px;
}

/* Save Card Checkbox */
.tpg-card-form__save {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.tpg-card-form__save input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--tpg-dark-orange, #F05A28);
    cursor: pointer;
}

.tpg-card-form__save label {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: 14px;
    color: var(--tpg-dark-gray, #4A4B4C);
    cursor: pointer;
}


/* ==========================================================================
   6. EMPTY CART STATE
   ========================================================================== */
/* Recommendation Card */
.tpg-recommendation-card {
    display: block;
    background: var(--tpg-white, #FFFFFF);
    border: 1px solid var(--tpg-gray, #D8DDE2);
    border-radius: var(--tpg-radius-md, 8px);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tpg-recommendation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tpg-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.tpg-recommendation-card__image-wrapper {
    aspect-ratio: 16/9;
    background: var(--tpg-light-gray, #F0F4F7);
    overflow: hidden;
}

.tpg-recommendation-card__image-wrapper--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tpg-medium-gray, #8A8E90);
}

.tpg-recommendation-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpg-recommendation-card__content {
    padding: var(--tpg-spacing-md, 16px);
}

.tpg-recommendation-card__title {
    font-family: var(--tpg-font-heading, 'Lora', serif);
    font-size: var(--tpg-text-small, 1em);
    font-weight: 600;
    color: var(--tpg-black, #212122);
    margin: 0 0 var(--tpg-spacing-sm, 8px);
    line-height: 1.3;
}

.tpg-recommendation-card__price {
    font-family: var(--tpg-font-body, 'Source Sans Pro', sans-serif);
    font-size: var(--tpg-text-body, 1.125em);
    font-weight: 600;
    color: var(--tpg-dark-orange, #F05A28);
}



/* ==========================================================================
   8. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 599px) {
    /* Payment Error */
    .tpg-payment-error {
        padding: 12px 16px;
        padding-right: 40px;
    }
    
    .tpg-payment-error__icon svg {
        width: 20px;
        height: 20px;
    }
    
    .tpg-payment-error__title {
        font-size: 15px;
    }
    
    .tpg-payment-error__message {
        font-size: 13px;
    }
    
    .tpg-payment-error__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .tpg-payment-error__dismiss {
        top: 8px;
        right: 8px;
    }
    
    /* Card Form */
    .tpg-card-form__row {
        grid-template-columns: 1fr;
    }
    
    /* Payment Method Content */
    .tpg-checkout-flow .wc-block-components-radio-control-accordion-content,
    .tpg-checkout-flow #payment .payment_methods li .payment_box {
        margin: 0 12px 12px;
        padding: 16px;
    }
}


/* ==========================================================================
   9. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

@media (prefers-contrast: high) {
    .tpg-payment-error {
        border: 2px solid #D32F2F;
    }
    
    .tpg-payment-error__title {
        color: #000000;
    }
    
    .tpg-field-error input,
    .tpg-field-error select,
    .tpg-field-error textarea {
        border-width: 2px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tpg-payment-error,
    .tpg-field-error-message,
    .tpg-checkout-flow .wc-block-components-radio-control-accordion-content,
    .tpg-recommendation-card {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   10. PRINT STYLES
   ========================================================================== */