/* Online Buy flow (ticket 0019000) */

/* main */
#body {
    padding: 0;
    margin: 0;
    padding-bottom: 400px;
}
.row {
    padding: 0;
    margin: 0;
}
.center-this {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Step width.
 *
 * Each fragment wraps itself in .buy-step so it controls its own width --
 * the container cannot, since htmx only ever replaces its innerHTML. Narrow
 * matches the KYC app's #form (350px); .buy-step-wide is for the location
 * list, which needs the room.
 */
.buy-step {
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}
.buy-step-wide {
    max-width: 800px;
}
/* Wide enough to keep a 36-character transaction ID on one line. */
.buy-step-medium {
    max-width: 560px;
}

/*
 * Link-style buttons.
 *
 * hilt.css:148 paints every button[type=button]/[type=submit] pink via a bare
 * element selector, which outranks Bootstrap's .btn-link. Undo it for buttons
 * that are meant to read as links.
 */
.buy-step .btn-link,
.buy-step .btn-link:hover {
    background: transparent;
    color: #b30857;
}
.buy-step .btn-link:hover {
    color: #ff0b7d;
}

/*
 * Anchors styled as buttons.
 *
 * hilt.css paints button elements pink but an <a class="btn"> is not one, so
 * it falls through to Bootstrap's blue with hilt.css's pink link colour on
 * top. Match the real buttons instead.
 */
.buy-step a.btn-primary,
.buy-step a.btn-primary:hover {
    border: 0;
    background: #b30857;
    color: #fff;
}
.buy-step a.btn-primary:hover {
    background: #710437;
}

/* Phone numbers and amounts should not break across lines. */
.nowrap {
    white-space: nowrap;
}

/*
 * Coin cards.
 *
 * A grid rather than a flex row so the cards are equal width and wrap evenly
 * -- content-sized cards left four coins as an awkward 3 + 1.
 */
.coin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.coin-grid .card {
    align-items: center;
}
.coin-grid img {
    width: 100px;
    height: 100px;
    max-width: 100%;
}

/*
 * Location cards.
 *
 * .background (hilt.css) paints a near-white card but never sets a text
 * colour, so it inherits body's white. Scope the fix to the buy flow rather
 * than touching hilt.css, which the KYC and status pages also load.
 */
.buy-step .background {
    color: #121212;
}
.buy-step .location-name {
    font-size: 1.1em;
}
.buy-step .location-distance {
    color: #555;
}

/* Receipt */
.session-id {
    font-size: 1.4em;
    font-weight: bold;
}

/* Break only where it must -- narrow screens -- rather than mid-word always. */
.session-id,
.crypto-address {
    overflow-wrap: anywhere;
}

.crypto-estimate {
    min-height: 1.6em;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.expires {
    font-weight: bold;
}

.cashier-hours-notice {
    color: #aaa;
    font-size: 0.95em;
    text-align: center;
    margin-bottom: 24px;
}

/* htmx: dim the flow while a step is in flight */
#buy-flow.htmx-request {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 150ms ease-in;
}