/**
 * WRG Gift Cards — Frontend Styles
 */

/* Bonus banner */
.wrg-bonus-banner {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 2px solid #f9a825;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
}

.wrg-bonus-banner__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wrg-bonus-banner__icon {
    font-size: 28px;
    flex-shrink: 0;
}

.wrg-bonus-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wrg-bonus-banner__text strong {
    font-size: 15px;
    color: #e65100;
}

.wrg-bonus-banner__text span {
    font-size: 13px;
    color: #555;
}

/* Card form */
.wrg-card-form {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.wrg-card-form h3 {
    margin: 0 0 16px;
    font-size: 18px;
}

.wrg-card-form__field {
    margin-bottom: 14px;
}

.wrg-card-form__field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
}

.wrg-card-form__field label .required {
    color: #c00;
}

.wrg-amount-input {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wrg-currency-symbol {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.wrg-amount-input input {
    font-size: 22px;
    font-weight: 700;
    padding: 8px 12px;
    width: 180px;
    border: 2px solid #ccc;
    border-radius: 6px;
}

.wrg-amount-input input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

.wrg-field-note {
    font-size: 12px;
    color: #888;
    margin: 4px 0 0;
}

.wrg-card-form__personalization {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.wrg-card-form__personalization h4 {
    font-size: 14px;
    margin: 0 0 12px;
    color: #555;
}

.wrg-card-form__personalization input,
.wrg-card-form__personalization textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.wrg-card-form__personalization textarea {
    resize: vertical;
}

/* Add Card button */
.wrg-add-card-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: background 0.2s;
}

.wrg-add-card-btn:hover {
    background: #135e96 !important;
}

/* Cards list */
.wrg-cards-list {
    margin-top: 20px;
}

.wrg-cards-list h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 18px;
}

.wrg-card-count {
    background: #2271b1;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Individual card in list */
.wrg-card-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}

.wrg-card-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.wrg-card-item__info {
    flex: 1;
}

.wrg-card-item__amount {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.wrg-card-item__personalization {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.wrg-card-item__personalization strong {
    color: #444;
}

.wrg-card-item__remove {
    background: none;
    border: none;
    color: #c00;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 10px;
}

.wrg-card-item__remove:hover {
    background: #fce4ec;
}

/* Order summary */
.wrg-order-summary {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
}

.wrg-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 15px;
}

.wrg-bonus-row {
    background: #e8f5e9;
    margin: 6px -16px -4px;
    padding: 10px 16px;
    border-radius: 0 0 6px 6px;
    border-top: 1px dashed #a5d6a7;
}

.wrg-bonus-hint {
    font-size: 13px;
    color: #e65100;
    font-style: italic;
    padding-top: 6px;
    border-top: 1px dashed #ddd;
    margin-top: 4px;
}

/* Action buttons */
.wrg-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.wrg-add-another-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
}

.wrg-add-to-cart-btn {
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    flex-grow: 1;
    text-align: center;
}

/* Status messages */
.wrg-status {
    margin-top: 16px;
}

.wrg-status__message {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
}

.wrg-status--success .wrg-status__message {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.wrg-status--error .wrg-status__message {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.wrg-status--loading .wrg-status__message {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* ============================================
   Order received / Thank-you page cleanup
   ============================================ */

/* Hide product thumbnail placeholders on the order details table */
.woocommerce-order-details .product-thumbnail,
.woocommerce-table--order-details .product-thumbnail {
    display: none !important;
}

/* Fix payment method row: hide the duplicate plain-text "- 4242" after the logo
   div. Targets both the legacy .wc-payment-card-logo class and the current
   .wc-payment-gateway-method-logo-wrapper used by the payment gateway. */
.woocommerce-table--order-details tfoot .wc-payment-card-logo,
.woocommerce-table--order-details tfoot .wc-payment-gateway-method-logo-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* The "- 4242" text node sits after the logo div as a sibling text node. Zero
   the td font so that stray text disappears, then restore the size on the logo
   wrapper only — at the same size as the surrounding totals (was a tiny 14px). */
.woocommerce-table--order-details tfoot tr td.product-total:has(.wc-payment-card-logo),
.woocommerce-table--order-details tfoot tr td.product-total:has(.wc-payment-gateway-method-logo-wrapper) {
    font-size: 0;       /* hide stray text nodes like "- 4242" */
    line-height: 0;
}
.woocommerce-table--order-details tfoot tr td.product-total .wc-payment-card-logo,
.woocommerce-table--order-details tfoot tr td.product-total .wc-payment-gateway-method-logo-wrapper {
    font-size: 18px;    /* restore + match the surrounding order totals */
    line-height: 1.5;
}
.woocommerce-table--order-details tfoot tr td.product-total .wc-payment-card-logo img,
.woocommerce-table--order-details tfoot tr td.product-total .wc-payment-gateway-method-logo-wrapper img {
    height: 22px;
    width: auto;
    vertical-align: middle;
}

/* Fix payment method in the order overview list (top summary bar) */
.woocommerce-order-overview .method strong {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.woocommerce-order-overview .method .wc-payment-card-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.woocommerce-order-overview .method .wc-payment-card-logo img {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

/* ============================================
   Checkout page improvements
   ============================================ */

/* --- Order review table --- */

/* Force a fixed table layout so we can control column widths */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    margin-bottom: 20px;
    font-size: 17px;
    table-layout: fixed !important;
    width: 100% !important;
}

/* Left column (Product / label) = 50%, right column (Total / value) = 50% */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-name,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child {
    width: 50% !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child {
    width: 50% !important;
}

/* Same split for tfoot rows */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    width: 50% !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    width: 50% !important;
}

/* Table header row — bigger font */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
}

/* All body & footer cells */
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    font-size: 17px !important;
    padding: 12px;
    vertical-align: middle;
}

/* Product name in body rows */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
    font-size: 17px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Totals row labels */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    font-weight: 600;
}

/* Total row — slightly larger */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 19px !important;
    font-weight: 700;
}

/* --- Shipping dropdown fix --- */

/* When shipping is a list of radio buttons */
.woocommerce-checkout .woocommerce-shipping-methods,
.woocommerce-checkout #shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-checkout .woocommerce-shipping-methods li label,
.woocommerce-checkout #shipping_method li label {
    font-size: 14px !important;
}

/* When shipping is a <select> dropdown — give it full width of its cell */
.woocommerce-checkout select.shipping_method,
.woocommerce-checkout .woocommerce-shipping-totals select,
.woocommerce-checkout .woocommerce-shipping-totals td select,
.woocommerce-checkout td.product-total select,
.woocommerce-checkout tfoot td select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
    height: auto !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide product thumbnails on checkout too */
.woocommerce-checkout .product-thumbnail {
    display: none !important;
}

/* --- Section headings (added by checkout-layout.js) --- */

#wrg-cc-heading {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

/* Match Avada's existing "Review Your Order" heading style */
.woocommerce-checkout #order_review_heading {
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

/* Place order wrapper — when moved below the review table */
.woocommerce-checkout .place-order,
.woocommerce-checkout .wrg-place-order-moved {
    margin-top: 16px;
}

/* --- Payment section --- */

.woocommerce-checkout #payment {
    background: #f8f9fa;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 24px 28px !important;
    margin-bottom: 24px;
}

/* Payment method label */
.woocommerce-checkout #payment .wc_payment_methods {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 16px !important;
    margin-bottom: 16px;
}

.woocommerce-checkout #payment .wc_payment_methods li {
    padding: 12px 0 !important;
}

.woocommerce-checkout #payment .wc_payment_methods label {
    font-size: 16px !important;
    font-weight: 600;
}

/* Card input area (Stripe/WooPayments) */
.woocommerce-checkout #payment .payment_box {
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px !important;
    margin-top: 10px;
}

.woocommerce-checkout #payment .payment_box::before {
    display: none !important;
}

/* Stripe Elements — give each field proper vertical space */
.woocommerce-checkout #payment .payment_box fieldset {
    padding: 0 !important;
    margin: 0;
}

.woocommerce-checkout #payment .payment_box .wc-payment-form {
    padding: 0 !important;
    margin: 0;
}

.woocommerce-checkout #payment .payment_box .form-row,
.woocommerce-checkout #payment .payment_box .wc-payment-form .form-row {
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.woocommerce-checkout #payment .payment_box .form-row label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

/* The Stripe iframe container — taller so fields aren't squished */
.woocommerce-checkout #payment .payment_box iframe {
    min-height: 48px !important;
}

/* The div wrapping each Stripe Element */
.woocommerce-checkout #payment .payment_box .wc-payment-elements-field,
.woocommerce-checkout #payment .payment_box .wcpay-payment-element,
.woocommerce-checkout #payment .payment_box .StripeElement,
.woocommerce-checkout #payment .payment_box .wc-stripe-elements-field {
    padding: 12px !important;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    min-height: 48px;
    box-sizing: border-box;
}

/* Place order button — works inside #payment or after being moved out */
.woocommerce-checkout #place_order {
    font-size: 18px !important;
    padding: 14px 32px !important;
    border-radius: 8px;
    width: 100%;
    margin-top: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .wrg-card-form {
        padding: 16px;
    }

    .wrg-amount-input input {
        width: 140px;
        font-size: 18px;
    }

    .wrg-actions {
        flex-direction: column;
    }

    .wrg-add-to-cart-btn {
        width: 100%;
    }
}

/* ============================================
   Cart page — totals box (Avada column)
   ============================================ */

/* The cart-totals box sits in an Avada page-builder column that carries a
   themed background image + dark gradient. Replace it with solid black.
   Scoped to the cart page only, and to the specific column that contains the
   WooCommerce totals so the page's hero/footer image sections are untouched. */
body.woocommerce-cart .fusion-layout-column:has(.cart_totals) > .fusion-column-wrapper,
body.woocommerce-cart .fusion-column-wrapper:has(.cart_totals) {
    background: #000 !important;
}

/* --- Shipping row inside the cart totals --- */

/* Avada absolutely-positions the "Shipment N" heading and an (empty) value
   container, while the WSDM shipping plugin injects its dropdown as a normal-
   flow sibling — so the dropdown renders on top of the heading. Reset to a
   simple vertical stack: heading on its own line, dropdown beneath it. */
body.woocommerce-cart .cart_totals .awb-shipping-heading {
    position: static !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 8px !important;
}

/* The themed value container is empty once WSDM converts the methods. */
body.woocommerce-cart .cart_totals .awb-shipping-td {
    display: none !important;
}

body.woocommerce-cart .cart_totals td.awb-shipping {
    text-align: left !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods.wsdm-package-converted {
    margin: 0 0 10px !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

body.woocommerce-cart .cart_totals .wsdm-shipping-wrapper {
    width: 100% !important;
}

/* Clean, readable shipping dropdown that fills the box width. */
body.woocommerce-cart .cart_totals select.wsdm-shipping-select {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    height: auto !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}

/* "Ship to a different address?" and "Order notes (optional)" sit on the black
   box and ship as black text — make them white so they are readable. (The order
   notes textarea keeps its dark text on its light field, so it is left alone.) */
body.woocommerce-cart #ship-to-different-address,
body.woocommerce-cart #ship-to-different-address label,
body.woocommerce-cart #ship-to-different-address span,
body.woocommerce-cart label[for="order_comments"] {
    color: #fff !important;
}

/* --- Hide the product thumbnail on cart line items (gift cards have no
       meaningful image — the value/name is what matters) and the cart shipping
       calculator (shipping is flat-rate, and the real address is collected at
       checkout, so the partial country/state/ZIP form just confuses people). --- */

body.woocommerce-cart td.product-name img {
    display: none !important;
}

body.woocommerce-cart .woocommerce-shipping-calculator {
    display: none !important;
}

/* Hide the "Shipping to <address>." line under the cart shipping options. */
body.woocommerce-cart .woocommerce-shipping-destination {
    display: none !important;
}

/* Shipping-method dropdown (built from the radio list by cart-quantity.js) — on
   both the cart totals and the checkout review. Clean white field, full width. */
select.wrg-ship-select {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    height: auto !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}