/*!
 * Buy SMS — packages, payment method and order summary.
 *
 * Presentation only. What a package costs is decided in App\SmsOrder and priced
 * again on the server when the order is saved; nothing here changes a figure.
 *
 * Same brand language as the rest of the POS: violet for the chosen thing.
 * There is one payment method now — the control panel — so no tile needs a
 * colour of its own to be told apart from another.
 */


/* ---- Packages ---------------------------------------------------- */
.buy-sms-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.buy-sms-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid #E6E0F0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.buy-sms-pack:hover { border-color: #C4A2F8; background: #FBFAFE; }

/* The chosen package fills, the way the tracking cards do on the
   product form — one visual language for "this is the one". */
.buy-sms-pack.is-on {
    border-color: #7C3AED;
    background: linear-gradient(135deg, #F5EFFE, #FBFAFE);
    box-shadow: 0 2px 10px -4px rgba(124, 58, 237, .35);
}

/* The radio itself is the control; the tile is what you see. */
.buy-sms-pack__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.buy-sms-pack__radio:focus-visible + .buy-sms-pack__name {
    outline: 2px solid #7C3AED;
    outline-offset: 3px;
}

.buy-sms-pack__name {
    font-size: 14.5px;
    font-weight: 700;
    color: #3B1063;
}
.buy-sms-pack__qty {
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    font-variant-numeric: tabular-nums;
}
.buy-sms-pack__rate {
    font-size: 11.5px;
    color: #6B6484;
}

/* ---- Amount on the form ------------------------------------------ */
.buy-sms-amount {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid #E0DAEC;
    border-radius: 9px;
    background: #FBFAFE;
}
.buy-sms-amount__value {
    font-size: 17px;
    font-weight: 700;
    color: #3B1063;
    font-variant-numeric: tabular-nums;
}

/* ---- Payment method --------------------------------------------- */
.buy-sms-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.buy-sms-method {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 16px;
    border: 1.5px solid #E0DAEC;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #4A3B63;
    transition: border-color .15s ease, background-color .15s ease;
}
.buy-sms-method:hover { border-color: #C4A2F8; }

.buy-sms-method__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Drawn, not native: the browser paints a native radio from its own
   colour scheme, which on a dark OS comes out as a filled dark disc. */
.buy-sms-method__mark {
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid #C9CFDD;
    border-radius: 50%;
    background: #fff;
    position: relative;
}
.buy-sms-method.is-on .buy-sms-method__mark { border-width: 2px; }
.buy-sms-method.is-on .buy-sms-method__mark::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
}

/* The wallet tiles are gone with the wallets, and their brand colours went
   with them: bKash pink and Nagad orange described choices this form no
   longer offers. Order history names those methods in text, which needs no
   styling of its own. */
.buy-sms-method--bcp.is-on {
    border-color: #7C4DFF;
    background: #F4F0FF;
    color: #4B2FA8;
}
.buy-sms-method--bcp.is-on .buy-sms-method__mark { border-color: #7C4DFF; }
.buy-sms-method--bcp.is-on .buy-sms-method__mark::after { background: #7C4DFF; }

.buy-sms-method__name { font-size: 14px; }

/* The wallet fields are hidden and shown by the script, not by a rule here.
   Defaulting them to display:none would hide them permanently on a page
   whose JavaScript failed to run, and a form missing the fields it needs is
   worse than one showing two it does not. */

/* ---- Summary and checkout ---------------------------------------- */
.buy-sms-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #F1EEF7;
    font-size: 13px;
    color: #6B6484;
}
.buy-sms-summary__row strong {
    color: #1B1230;
    font-variant-numeric: tabular-nums;
}

.buy-sms-summary__row--total {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 15px;
}
.buy-sms-summary__row--total strong {
    font-size: 22px;
    color: #3B1063;
}

.buy-sms-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 18px;
    border: 0;
    border-radius: 10px;
    /* The same violet ramp as the primary buttons everywhere else. */
    background-image: linear-gradient(to right, #7C3AED, #A855F7);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-image .15s ease, box-shadow .15s ease;
}
.buy-sms-checkout:hover:not(:disabled) {
    background-image: linear-gradient(to right, #6D28D9, #8B37F0);
    box-shadow: 0 4px 14px -4px rgba(124, 58, 237, .5);
}
.buy-sms-checkout:focus-visible {
    outline: 2px solid #3B1063;
    outline-offset: 2px;
}
/* Nothing to buy is not an order. */
.buy-sms-checkout:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- Order history ----------------------------------------------- */
.buy-sms-table > thead > tr > th {
    border-top: 0 !important;
    border-bottom: 1.5px solid #E8E4EF !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B6484;
    white-space: nowrap;
}
.buy-sms-table > tbody > tr > td {
    border-top: 1px solid #F1EEF7 !important;
    padding: 11px 8px !important;
    font-size: 13.5px;
    vertical-align: middle !important;
}

.buy-sms-status {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
/* Contrast checked on their own grounds so the word carries the state,
   not the colour alone. */
.buy-sms-status--pending { background: #FFF7E6; color: #8A5B12; }
.buy-sms-status--paid { background: #EDF8F1; color: #1B6B3A; }
.buy-sms-status--cancelled { background: #FEF0F0; color: #B91C1C; }

.buy-sms-inline-form { display: inline-block; margin-right: 4px; }

.buy-sms-empty {
    padding: 26px 8px !important;
    text-align: center;
    color: #6B6484;
    font-size: 13px;
}

@media (max-width: 575px) {
    .buy-sms-packages,
    .buy-sms-methods { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .buy-sms-pack,
    .buy-sms-method,
    .buy-sms-checkout { transition: none; }
}

/* ---- Minimum-quantity line and band tiles ------------------------ */
.buy-sms-min {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #4A3B63;
}
.buy-sms-min i { color: #2E9E63; }
.buy-sms-min strong { color: #3B1063; font-variant-numeric: tabular-nums; }

/* The bands are buttons now: clicking one only fills in a quantity, so
   it must not look like a separate thing being bought. */
.buy-sms-pack {
    text-align: left;
    font: inherit;
    width: 100%;
}

/* Below the minimum there is no band and no price; say which. */
.buy-sms-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #6B6484;
}
.buy-sms-hint.is-bad { color: #B91C1C; font-weight: 600; }

/* ------------------------------------------------------------------
   SMS balance

   Shown above the purchase form, because "what do I have" is the
   question a shop arrives with and "how much is more" is the one it
   asks second. The balance is the only large figure on the panel so
   that it can be read at a glance without hunting for it.
   ------------------------------------------------------------------ */
.sms-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 28px;
}

.sms-balance__figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sms-balance__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.sms-balance__value {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #16a34a;
}

/* An unknown balance must not look like a healthy one, so it drops the
   green and reads as absent rather than as zero. */
.sms-balance__value--unknown {
    color: #9ca3af;
}

.sms-balance__unit {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.sms-balance__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    font-size: 13px;
    color: #6b7280;
}

.sms-balance__meta strong {
    color: #374151;
}

.sms-balance__awaiting {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    color: #b45309;
}