/* ============================================================
   checkout_split.css — overrides for the Stripe split-checkout
   page (/index.php?r=stripe/checkOut). This file is linked AFTER
   tts_sg_profile.css, so these rules win; !important is used only
   where the base file sets explicit widths.
   Hand-authored override (no SCSS source).
   ============================================================ */

/* 1) Email form + "Continue with Google" button + "Continue to secure
      checkout" submit → full width of the summary box. The summary has
      margin:0 and fills the card content box (~446px); these were capped
      to 400px (inset by 23px). Stretch them so everything lines up
      edge-to-edge. */
.sg-profile__auth-form,
#google-login-btn,
.sg-profile__glog,
.sg-profile__auth-submit,
.sg-checkout-split__submit {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2) Terms block — remove the top gap and use a slightly more muted colour. */
.sg-checkout-split__terms {
    margin-top: 0 !important;
    color: #94a3b8 !important;
}

/* 3) Terms / Privacy links — drop the blue accent colour; a plain
      underline is enough (inherit the muted terms colour). */
.sg-checkout-split__terms a {
    color: inherit !important;
    text-decoration: underline !important;
}

/* 4) "EMAIL" label — no ALL-CAPS (show "Email"). */
.sg-checkout-split__label {
    text-transform: none !important;
}

/* 5) Security trust row under the submit button — lock + "Secured by Stripe"
      + Visa / Mastercard / Amex. NOTE: needs the matching markup in the
      template (insert right AFTER .sg-checkout-split__submit) — see the HTML
      snippet shipped with this change. Until then these rules are inert. */
.sg-checkout-split__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 12px 0 0;
}
.sg-trust__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px/1 'Inter', sans-serif;
    color: #64748b;
    white-space: nowrap;
}
.sg-trust__secure svg { width: 13px; height: 13px; }
.sg-trust__cards { display: inline-flex; align-items: center; gap: 6px; }
.sg-trust__cards svg { height: 20px; width: 32px; display: block; }