/* MyCyberWay Social Sign-in: the buttons, the "or" line, the strip above the
   checkout and the panel under Account details. It uses the shop's own colours
   (W01's --mcw-* tokens) where the page sets them, and dark fallbacks where not.
   Each button keeps its maker's colours and logo, as Google, LinkedIn and Meta
   require. Loaded only on My Account and the checkout (and where the shortcode is). */

.mcw-ssi{clear:both;box-sizing:border-box;margin:0;padding:0;
  font-family:var(--mcw-font-body,'Karla',system-ui,-apple-system,'Segoe UI',Arial,sans-serif)}
.mcw-ssi *,.mcw-ssi *::before,.mcw-ssi *::after{box-sizing:border-box}

/* ---- the "or" line between a form and the buttons ---- */
.mcw-ssi-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;padding:0;background-color:transparent;
  color:var(--mcw-muted,#A3ACB8);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.mcw-ssi-or::before,.mcw-ssi-or::after{content:"";flex:1 1 auto;height:1px;background-color:var(--mcw-line-strong,rgba(255,255,255,.16))}

/* ---- the buttons ---- */
.mcw-ssi-buttons{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0}
.mcw-ssi a.mcw-ssi-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:10px 16px;
  border:1px solid transparent;border-radius:4px;box-shadow:none;
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:0;text-transform:none;
  text-decoration:none!important;transition:filter .2s,outline-color .2s}
.mcw-ssi a.mcw-ssi-btn--google{background-color:#FFFFFF;color:#1F1F1F!important;border-color:#747775}
.mcw-ssi a.mcw-ssi-btn--linkedin{background-color:#0A66C2;color:#FFFFFF!important}
.mcw-ssi a.mcw-ssi-btn--facebook{background-color:#1877F2;color:#FFFFFF!important}
.mcw-ssi a.mcw-ssi-btn:hover{filter:brightness(1.05);outline:2px solid rgba(249,213,72,.45);outline-offset:2px}
.mcw-ssi a.mcw-ssi-btn:focus-visible{outline:2px solid #F9D548;outline-offset:3px}
.mcw-ssi-logo{display:inline-flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px}
.mcw-ssi-logo svg{display:block;width:100%;height:100%}
.mcw-ssi-label{flex:1 1 auto;padding-right:34px;text-align:center}
.mcw-ssi-heading{margin:0;padding:0;background-color:transparent;color:var(--mcw-ink,#EAECEF);
  font-size:16.5px;font-weight:700;line-height:1.35}

/* ---- above the checkout: as wide as the checkout and W04's assurance marks
   (the theme's text column is narrower, hence the longer selector) ---- */
.mcw-ssi--checkout,.mcw-ssi--strip{display:block;margin:0 auto 28px;padding:16px 20px 18px;
  border:1px solid var(--mcw-line,rgba(255,255,255,.09));border-radius:16px;
  background-color:var(--mcw-panel,#121418);color:var(--mcw-ink,#EAECEF)}
.is-layout-constrained>.mcw-ssi.mcw-ssi--checkout,.is-layout-constrained>.mcw-ssi.mcw-ssi--strip{
  max-width:var(--wp--style--global--wide-size,1280px)}
.mcw-ssi--checkout .mcw-ssi-heading,.mcw-ssi--strip .mcw-ssi-heading{margin:0 0 12px}
.mcw-ssi--checkout .mcw-ssi-buttons,.mcw-ssi--strip .mcw-ssi-buttons{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

/* ---- Account details: connect and disconnect ---- */
.mcw-ssi-accounts{clear:both;box-sizing:border-box;margin:32px 0 0;padding:20px 22px;
  border:1px solid var(--mcw-line,rgba(255,255,255,.09));border-radius:16px;
  background-color:var(--mcw-panel,#121418);color:var(--mcw-ink,#EAECEF);
  font-family:var(--mcw-font-body,'Karla',system-ui,-apple-system,'Segoe UI',Arial,sans-serif)}
.mcw-ssi-accounts h3{margin:0 0 4px;color:var(--mcw-ink,#EAECEF);font-family:inherit;font-size:19px;font-weight:700;line-height:1.3;
  letter-spacing:0;text-transform:none}
.mcw-ssi-accounts p{margin:0 0 14px;color:var(--mcw-ink-soft,#C3C9D2);font-size:15px;line-height:1.5}
.mcw-ssi-accounts ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mcw-ssi-account{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0;padding:10px 12px;
  border:1px solid var(--mcw-line,rgba(255,255,255,.09));border-radius:12px;background-color:rgba(255,255,255,.02);color:var(--mcw-ink,#EAECEF)}
.mcw-ssi-account .mcw-ssi-logo{width:34px;height:34px;padding:6px;border-radius:8px;background-color:#FFFFFF}
.mcw-ssi-account .mcw-ssi-logo--linkedin{background-color:#0A66C2}
.mcw-ssi-account .mcw-ssi-logo--facebook{background-color:#1877F2}
.mcw-ssi-account .mcw-ssi-name{flex:1 1 auto;font-weight:700}
.mcw-ssi-account .mcw-ssi-state{color:#80E0B2;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mcw-ssi-account form{margin:0}
.mcw-ssi-accounts a.mcw-ssi-connect,.mcw-ssi-accounts button.mcw-ssi-disconnect{display:inline-flex;align-items:center;min-height:38px;margin:0;
  padding:6px 16px;border:1px solid var(--mcw-line-strong,rgba(255,255,255,.16));border-radius:8px;background-color:transparent;
  color:var(--mcw-ink,#EAECEF)!important;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;
  text-decoration:none!important;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}
.mcw-ssi-accounts a.mcw-ssi-connect:hover,.mcw-ssi-accounts button.mcw-ssi-disconnect:hover{border-color:var(--mcw-primary,#F9D548);
  background-color:transparent;color:var(--mcw-primary,#F9D548)!important}
.mcw-ssi-accounts a.mcw-ssi-connect:focus-visible,.mcw-ssi-accounts button.mcw-ssi-disconnect:focus-visible{outline:2px solid #F9D548;outline-offset:3px}
.mcw-ssi .screen-reader-text,.mcw-ssi-accounts .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .mcw-ssi--checkout,.mcw-ssi--strip{padding:14px}
  .mcw-ssi-accounts{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .mcw-ssi a.mcw-ssi-btn{transition:none}
}