.ahapay-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.ahapay-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

.ahapay-logo {
    height: 24px;
}

.ahapay-subtext {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}


/*
   Title on the left, logo on the right, centred against each other. A floated logo used
   to pin the title to the top of a box the 24px logo had made taller. No margin on the
   logo either: the label row's own padding is the inset, and the 20px it used to carry
   put it 37px from the card edge against the 17px it sits at in OpenCart
*/
.ahapay-block-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.ahapay-block-logo {
    float: none;
    flex: none;
    margin-right: 0;
}



/* Checkout info box styles for AhaPay */
.ahapay-info-box {
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 16px;
    font-family: Arial, sans-serif;
    background-color: #fff;
    margin-top: 16px;
}

.ahapay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.ahapay-header .logo {
    height: 24px;
}

/* Payment gateway icon styles */
.ahapay-gateway-icon {
    height: 24px;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
    width: auto;
    max-height: 25px;
}

/* Admin API wrapper and response styles */
.ahapay-api-wrapper {
    margin-top: 15px;
}
#ahapay-api-response {
    margin-top: 10px;
}


/* Checkout promo block, rendered by payment_fields() and by the block checkout's React
   component - one stylesheet serves both. Every value is a literal because this markup
   lands in an arbitrary theme where a design-system var() would resolve to nothing, and
   both the desktop and the mobile copy ship in the markup for the media query to pick */

/* The card frame, for the case where nothing else provides one. On the CLASSIC checkout
   that is always the case - WooCommerce draws nothing around a payment method - while on
   the BLOCK checkout it frames the selected option and the override below hands it the
   role */
.ahapay-promo {
    box-sizing: border-box;
    margin: 12px 0 0;
    border: 1.5px solid #18181b;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    color: #18181b;
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
}

.ahapay-promo * {
    box-sizing: border-box;
}

/* ---- welcome-discount band ---- */
.ahapay-promo__offer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: #f36040;
    color: #fff;
}

.ahapay-promo__amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: none;
}

.ahapay-promo__cur {
    font-size: 20px;
    font-weight: 600;
    opacity: .9;
}

.ahapay-promo__num {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
}

.ahapay-promo__rule {
    width: 1px;
    flex: none;
    align-self: stretch;
    background: rgba(255, 255, 255, .35);
}

.ahapay-promo__offer-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ahapay-promo__offer-title {
    font-size: 16px;
    font-weight: 600;
}

.ahapay-promo__offer-sub {
    font-size: 13px;
    opacity: .9;
}

/* ---- feature cells ---- */
.ahapay-promo__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e4e4e7; /* shows through the gaps as hairline dividers */
}

/*
   flex-wrap does the desktop two-row cell without a second wrapper. align-content
   matters: the grid stretches all three cells to the tallest, and without it a
   one-line cell centres against its neighbours and the icons stop lining up
*/
.ahapay-promo__feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    row-gap: 4px;
    column-gap: 8px;
    padding: 18px;
    background: #fff;
}

.ahapay-promo__icon {
    display: flex;
    flex: none;
    color: #f36040;
}

.ahapay-promo__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.ahapay-promo__f-title {
    font-size: 14px;
    font-weight: 600;
}

.ahapay-promo__f-desc {
    flex-basis: 100%;
    font-size: 13px;
    line-height: 1.45;
    color: #52525b;
}

/*
   The emphasis in the mobile line needs an explicit weight. <strong> defaults to
   `bolder`, which is resolved RELATIVE to the inherited weight, and a theme whose body
   text is 300 turns that into 400 — visually no emphasis at all. Seen on a theme that
   sets its body font at 300
*/
.ahapay-promo__m-line strong {
    font-weight: 600;
}

/* ---- desktop / mobile copy switch ---- */
.ahapay-promo__m {
    display: none;
}

@media (max-width: 600px) {
    .ahapay-promo__d {
        display: none;
    }

    .ahapay-promo__m {
        display: block;
    }

    .ahapay-promo__offer {
        gap: 14px;
        padding: 14px 16px;
    }

    .ahapay-promo__cur {
        font-size: 15px;
    }

    .ahapay-promo__num {
        font-size: 34px;
    }

    .ahapay-promo__offer-title {
        font-size: 14px;
        line-height: 1.3;
    }

    .ahapay-promo__offer-sub {
        font-size: 12px;
        line-height: 1.35;
    }

    .ahapay-promo__features {
        grid-template-columns: 1fr;
    }

    .ahapay-promo__feature {
        flex-wrap: nowrap;
        column-gap: 10px;
        padding: 12px 16px;
    }

    .ahapay-promo__icon svg {
        width: 18px;
        height: 18px;
    }

    .ahapay-promo__m-line {
        font-size: 13px;
        line-height: 1.35;
    }
}


/* Block checkout: WooCommerce's own option frame IS the card. Its frame is an inset
   box-shadow, which paints below child backgrounds, so with the padding gone the band
   covered it - re-made here as a real border. NO RADIUS on purpose: the content exists
   only while SELECTED, so a radius here re-rounded the frame around other methods too */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted:has(.ahapay-promo) {
    box-shadow: none;
    border: 1.5px solid currentColor;
    overflow: hidden;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted:has(.ahapay-promo)::after {
    display: none;
}

.wc-block-components-radio-control-accordion-content:has(.ahapay-promo) {
    padding: 0;
}

.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .ahapay-promo {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Classic checkout: the inline label shrinks to its text, leaving the logo after the
   title instead of at the row's edge. WooCommerce hides the radio when a store has only
   one payment method, so this row may render without one - do not depend on it */
li.wc_payment_method:has(.ahapay-promo) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* The row is [radio][label]; the panel below it takes a line of its own */
li.wc_payment_method:has(.ahapay-promo) > .payment_box {
    flex-basis: 100%;
}

li.wc_payment_method:has(.ahapay-promo) > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    margin: 0;
}

/* Brand colour on the native radio; accent-color needs no replacement markup, and
   browsers too old for it just draw their default. Keep this selector list unbroken:
   a comment after the comma does not end it, it only looks like it does */
.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) input[type="radio"],
li.wc_payment_method:has(.ahapay-promo) input[type="radio"] {
    accent-color: #f36040;
}

/*
   ...except on the block checkout, where accent-color is inert: WooCommerce sets
   appearance:none on its radio and draws the ring with a border and the dot with a
   ::before. Those are the two things to recolour. accent-color above still does the
   work on the classic checkout, where the control stays native
*/
.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .wc-block-components-radio-control__input {
    border-color: #f36040;
}

.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .wc-block-components-radio-control__input::before {
    background: #f36040;
}

/*
   The title next to the radio: regular weight, and level with the control. WooCommerce
   places the radio absolutely, so the theme's line box decided the title's position and
   on the stand left it 4px high. Back in flow and laid out as a centred flex line, the
   two agree whatever line-height a theme brings; the weight is pinned, not inherited
*/
.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .wc-block-components-radio-control__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
}

.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .wc-block-components-radio-control__input {
    /*
       relative, not static: the dot is an absolutely placed ::before and with no
       positioned ancestor would land in the middle of the title. inset and transform
       were WooCommerce's way of placing the control while it was absolute; left in
       place they shift it for real, 9px up and 16px right into the title
    */
    position: relative;
    inset: auto;
    transform: none;
    flex: none;
}

.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .wc-block-components-radio-control__option-layout {
    flex: 1;
    min-width: 0;
}

.wc-block-components-radio-control-accordion-option:has(.ahapay-promo) .ahapay-block-label {
    font-weight: 400;
}