/* ================================================================
   Masaha Storage — monthly auto-pay: the "How would you like to pay?"
   block on the payment step (templates/partials/step6-payment.php).

   Shown only while MASAHA_AUTOPAY_MODE is 'on'. Built to sit beside
   the payment-method cards and look like them: the same border,
   radius, active colour and top bar, taken from the same tokens.
   Nothing here restyles any existing element.
   ================================================================ */

.masaha-billing-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-sp-3);
}

.masaha-billing-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--m-sp-1);
    padding: var(--m-sp-4) var(--m-sp-5);
    background: var(--m-surface);
    border: 2px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.masaha-billing-option:hover { border-color: var(--m-gray-400); }

.masaha-billing-option:focus-visible {
    outline: 3px solid var(--m-primary);
    outline-offset: 2px;
}

.masaha-billing-option--active {
    border-color: var(--m-primary);
    background: var(--m-primary-ghost);
    box-shadow: var(--m-shadow-card-active);
}

.masaha-billing-option--active::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--m-gradient-primary);
}

.masaha-billing-option__title {
    font-size: var(--m-text-base);
    font-weight: var(--m-weight-bold, 700);
    color: var(--m-gray-900);
}

.masaha-billing-option__note {
    font-size: var(--m-text-sm);
    color: var(--m-gray-600);
    line-height: 1.5;
}

.masaha-billing-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--m-sp-3);
    margin-top: var(--m-sp-4);
    padding: var(--m-sp-4);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    font-size: var(--m-text-sm);
    color: var(--m-gray-800);
    line-height: 1.6;
    cursor: pointer;
}

.masaha-billing-consent[hidden] { display: none; }

.masaha-billing-consent input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--m-primary);
}

/* While monthly is chosen, mada cannot be used. */
.masaha-payment-option.masaha-payment-option--unavailable {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 560px) {
    .masaha-billing-options { grid-template-columns: minmax(0, 1fr); }
}