/* 
 * Additional styles for NOLS Single Page Checkout - Updated
 * 
 * These styles enhance the product and customer information display
 * and fix styling issues with the coupon section and payment methods
 */

/* Product display */
.nols-spc-product-section {
    margin-bottom: 30px;
}

.nols-spc-product-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.nols-spc-product-display {
    margin-bottom: 20px;
}

.nols-spc-product-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
}

.nols-spc-product-remove {
    flex: 0 0 20px;
    margin-right: 10px;
}

.nols-spc-product-remove a {
    display: block;
    font-size: 18px;
    text-align: center;
    color: #ccc;
    text-decoration: none;
}

.nols-spc-product-remove a:hover {
    color: #e2401c;
}

.nols-spc-product-info {
    flex: 1;
}

.nols-spc-product-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.nols-spc-product-custom-fields {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.nols-spc-product-custom-field {
    margin-bottom: 3px;
}

.nols-spc-field-label {
    font-weight: 500;
}

.nols-spc-product-price {
    flex: 0 0 80px;
    text-align: right;
    font-weight: 600;
}

/* Customer information */
.nols-spc-customer-info {
    background-color: #f9f9f9;
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 0.9em;
}

.nols-spc-customer-field {
    margin-bottom: 5px;
    display: flex;
}

.nols-spc-customer-field .nols-spc-field-label {
    flex: 0 0 100px;
    font-weight: 500;
}

.nols-spc-customer-field .nols-spc-field-value {
    flex: 1;
}

/* Enhanced Coupon Section */
.nols-spc-coupon-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 5px;
}

.nols-spc-coupon-form p {
    margin-bottom: 10px;
}

.coupon-form-fields {
    display: flex;
    gap: 10px;
}

.coupon-form-fields input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.coupon-form-fields button {
    padding: 10px 15px;
    background-color: #d35400;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.coupon-form-fields button:hover {
    background-color: #e67e22;
}

/* Order Totals */
.nols-spc-order-totals {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.nols-spc-order-totals .cart-subtotal,
.nols-spc-order-totals .order-total,
.nols-spc-order-totals .cart-discount,
.nols-spc-order-totals .fee,
.nols-spc-order-totals .tax-total,
.nols-spc-order-totals .tax-rate {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.nols-spc-order-totals .order-total {
    font-weight: 700;
    font-size: 1.1em;
    border-bottom: none;
}

/* Payment Methods */
.nols-spc-payment-methods {
    margin-bottom: 30px;
}

.nols-spc-payment-methods h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.nols-payment-message {
    background-color: #f8f8f8;
    padding: 15px;
    border-left: 3px solid #2ea3f2;
    margin-bottom: 20px;
}

/* Terms and Conditions */
.nols-spc-terms {
    margin-bottom: 20px;
}

.nols-spc-terms .woocommerce-terms-and-conditions-checkbox-text {
    padding-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nols-spc-product-item {
        flex-wrap: wrap;
    }
    
    .nols-spc-product-price {
        flex: 0 0 100%;
        text-align: left;
        margin-top: 10px;
        padding-left: 30px;
    }
    
    .nols-spc-customer-field {
        flex-direction: column;
    }
    
    .nols-spc-customer-field .nols-spc-field-label {
        flex: 0 0 100%;
        margin-bottom: 2px;
    }
    
    .coupon-form-fields {
        flex-direction: column;
    }
    
}

/* Loading Spinner Animation */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stripe Card Type Messages */
.stripe-card-type-checkout-message {
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 10px 0;
    color: #0073aa;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.stripe-card-type-checkout-message::before {
    content: "⏳";
    margin-right: 8px;
    font-size: 16px;
}