/*
 * assets/css/4square-checkout.css
 *
 * Baseline fallback sizing for the checkout rail logo. The AUTHORITATIVE
 * per-merchant sizes are injected inline at runtime from the admin settings
 * (see build_checkout_inline_css / build_blocks_inline_css) and load AFTER
 * this file, so they override these values. These rules only apply if, for
 * some reason, the inline style is absent — they keep the logo sane rather
 * than letting it render unstyled.
 *
 * .foursquare-rails-collapsed -> logo on the payment radio row.
 * .foursquare-rails-expanded  -> full logo in the expanded description box.
 */


/* ==========================================================
   COLLAPSED ROW LOGO — fallback baseline (inline CSS overrides)
   ========================================================== */
.foursquare-rails-collapsed {
    display: block;
    height: auto;
    max-height: 120px;              /* fallback DESKTOP SIZE */
    width: auto;
    max-width: 100%;
    margin: 8px 0;
    object-fit: contain;
}

@media (max-width: 480px) {
    .foursquare-rails-collapsed {
        width: 100%;                /* fallback MOBILE: fill column width */
        height: auto;
        max-height: none;
    }
}


/* ==========================================================
   EXPANDED DESCRIPTION-BOX LOGO — fallback baseline
   ========================================================== */
.foursquare-rails-expanded {
    display: block;
    height: 120px;                  /* fallback EXPANDED SIZE */
    width: auto;
    max-width: 100%;
    margin: 10px 0;
    object-fit: contain;
}