/*
 * The Cryptoway payment-method block at checkout.
 *
 * The store theme stays in charge: text colours are inherited from it; the only
 * colours of our own are the coin circles, where colour is the recognition.
 * The styling adapts to a dark store theme when the system setting declares one.
 */

.cryptoway-method {
    display: block;
}

.cryptoway-method__text {
    display: block;
    line-height: 1.55;
}

.cryptoway-method__coins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.cryptoway-coin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 13px 5px 5px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(17, 17, 17, .13);
    border-radius: 999px;
}

.cryptoway-coin__mark {
    flex: 0 0 auto;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.cryptoway-coin__name {
    display: inline-block;
}

.cryptoway-coin--more {
    padding: 5px 13px;
    font-weight: 500;
    border-style: dashed;
    opacity: .72;
}

@media (prefers-color-scheme: dark) {
    .cryptoway-coin { border-color: rgba(244, 244, 242, .18); }
}

/* The Cryptoway wordmark in the payment-method list.
   The brand book requires at least 96px of width; 135 keeps the wordmark
   readable without competing with neighbouring method logos. */
.cryptoway-logo__img {
    display: block;
    width: 135px;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* On a narrow screen the wordmark shrinks, but never below the brand minimum. */
@media (max-width: 420px) {
    .cryptoway-logo__img { width: 108px; }
}

/* The coin network — a muted note beside the name. */
.cryptoway-coin__net {
    font-size: 11px;
    font-weight: 500;
    opacity: .62;
}

/* -- EDD checkout ----------------------------------------------------- */

/* The gateway block sits inside EDD's payment-mode wrapper. Remove the empty
   space a theme leaves above it and the stray margin on the first paragraph. */
#edd_purchase_form .cryptoway-method {
    margin-top: 4px;
}

#edd_purchase_form .cryptoway-method__text {
    margin-top: 0;
}

#edd_purchase_form .cryptoway-method__coins {
    margin-bottom: 4px;
}

/* -- Coin strip from the shortcode ------------------------------------ */

.cryptoway-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.cryptoway-strip__title {
    font-size: 14px;
    font-weight: 600;
}

.cryptoway-strip .cryptoway-method__coins { margin: 0; }