/*
 * Checkout / cart additions
 * -------------------------
 * All CSS that was added for the Tabby payment option and the delivery-country rules.
 * It is loaded on its own from resources/views/includes/links.blade.php.
 * To merge it into the main stylesheet: copy this file's contents into custom.min.css and
 * custom-rtl.min.css (it uses logical properties, so it works for both directions), then
 * delete this file and its <link> line in includes/links.blade.php.
 *
 * Sections
 *   1. Payment method cards      (checkout page, resources/views/shop/checkout.blade.php)
 *   2. Delivery notices          (order summary: customs notice and "contact us" message,
 *                                 resources/views/shop/order-summary.blade.php, used on cart and checkout)
 *   3. Delivery pop-up           (checkout page, built by JavaScript in checkout.blade.php;
 *                                 its text is editor HTML written in the admin)
 *   4. Order summary loader      (checkout page, shown while a country change recalculates the totals)
 *   5. Refunds                   (customer's order page, resources/views/user/order-detail.blade.php)
 *
 * Colours used: border/background of the dark theme, accent blue #3d5afe, notice gold #d9a441, warning red #d9534f.
 */


/* ==========================================================================
   1. Payment method cards
   Markup: .payment-method-field > .pm-options > label.pm-option > input.pm-input + .pm-body
   The real radio input is visually hidden but stays keyboard-focusable.
   ========================================================================== */

.payment-method-field .pm-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.payment-method-field label.pm-option {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
}

.payment-method-field .pm-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-field .pm-body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 16px 18px;
    border: 1px solid #3a3f45;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.payment-method-field .pm-option:hover .pm-body {
    border-color: #6b7380;
}

/* Selected card */
.payment-method-field .pm-input:checked + .pm-body {
    border-color: #3d5afe;
    background: rgba(61, 90, 254, .12);
    box-shadow: 0 0 0 1px #3d5afe inset;
}

/* Keyboard focus */
.payment-method-field .pm-input:focus-visible + .pm-body {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Round radio mark */
.payment-method-field .pm-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #8a919c;
    border-radius: 50%;
    position: relative;
}

.payment-method-field .pm-input:checked + .pm-body .pm-check {
    border-color: #3d5afe;
}

.payment-method-field .pm-input:checked + .pm-body .pm-check::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #3d5afe;
}

/* Name and hint */
.payment-method-field .pm-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.payment-method-field .pm-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
}

.payment-method-field .pm-hint {
    font-size: 13px;
    line-height: 1.4;
    opacity: .7;
}

/* Gateway logos (inline SVG) */
.payment-method-field .pm-logos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.payment-method-field .pm-logos svg {
    display: block;
    height: 26px;
    width: auto;
    border-radius: 4px;
}

@media (max-width: 575px) {
    .payment-method-field .pm-body {
        flex-wrap: wrap;
    }

    .payment-method-field .pm-logos {
        width: 100%;
        margin-inline-start: 34px;
    }
}


/* ==========================================================================
   2. Delivery notices in the order summary
   .cart-delivery-notice          customs duties notice (gold border)
   .cart-delivery-blocked         "contact the head office" message (red border), added to the same element
   .delivery-email-link           email address turned into a mailto link inside those messages
   ========================================================================== */

.cart-delivery-notice {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid #d9a441;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.cart-delivery-notice.cart-delivery-blocked {
    border-color: #d9534f;
}

.delivery-email-link,
.cart-delivery-notice a,
.delivery-popup__text a {
    color: #d9a441;
}

/* The messages can contain editor HTML (paragraphs, lists): keep the spacing tight inside the boxes */
.cart-delivery-notice p,
.delivery-popup__text p {
    margin: 0 0 8px;
}

.cart-delivery-notice > :last-child,
.delivery-popup__text > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   3. Delivery pop-up (country where store products cannot be ordered online)
   Markup is created by JavaScript: .delivery-popup > .delivery-popup__box > div.delivery-popup__text + a.btnn
   Shown by adding the class .is-open
   ========================================================================== */

.delivery-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    padding: 16px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
}

.delivery-popup.is-open {
    display: flex;
}

.delivery-popup__box {
    width: 100%;
    max-width: 520px;
    padding: 28px;
    border: 1px solid #555;
    border-radius: 10px;
    background: #111;
    color: #fff;
    text-align: center;
}

.delivery-popup__text {
    margin: 0 0 20px;
    line-height: 1.6;
}


/* ==========================================================================
   4. Order summary loader
   While the delivery country is being recalculated, #order_summary gets the class .is-loading
   and a .delivery-loader overlay with a spinner is placed on top of it.
   ========================================================================== */

#order_summary.is-loading {
    position: relative;
}

.delivery-loader {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
}

.delivery-loader__spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: delivery-spin .8s linear infinite;
}

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


/* ==========================================================================
   5. Refunds on the customer's order page (resources/views/user/order-detail.blade.php)
   The refund table and totals reuse the dashboard's own table and summary styles; only the spacing and the booking line are new.
   ========================================================================== */

/* Space between the order totals above and the refund table */
.refund-section {
    margin-top: 48px;
}

/* "Booking #139 was cancelled" under the refund status, on its own line */
.refund-booking-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .8;
}