/* ============================================================ Stacey West Car Share — scoped inside #sw-carshare-app All rules use the wrapper prefix to avoid theme conflicts. ============================================================ */ #sw-carshare-app { --red:#C8102E; --red-h:#e01530; --white:#FAFAFA; --off:#F3F3F1; --g100:#EAEAEA; --g200:#D8D8D8; --g400:#AAAAAA; --g600:#666; --g800:#2A2A2A; --black:#0F0F0F; --green:#0d7a4e; --green-l:rgba(13,122,78,.1); --fd:'Barlow Condensed',sans-serif; --fb:'DM Sans',sans-serif; --sh:0 4px 20px rgba(0,0,0,.08); --shmd:0 8px 36px rgba(0,0,0,.13); font-family:var(--fb); color:var(--black); box-sizing:border-box; } #sw-carshare-app *, #sw-carshare-app *::before, #sw-carshare-app *::after { box-sizing:border-box; margin:0; padding:0; } /* ── HERO ── */ #sw-carshare-app .hero{background:var(--black)!important;padding:3.2rem 2rem 2.8rem;position:relative;overflow:hidden;} #sw-carshare-app .hero::before{content:'';position:absolute;top:-80px;right:-60px;width:440px;height:440px;background:radial-gradient(circle,rgba(200,16,46,.12) 0%,transparent 65%);pointer-events:none;} #sw-carshare-app .hero-inner{max-width:1000px;margin:0 auto;} #sw-carshare-app .eyebrow{display:flex!important;align-items:center;gap:8px;font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)!important;margin-bottom:.65rem;} #sw-carshare-app .eyebrow::before{content:'';width:18px;height:2px;background:var(--red);flex-shrink:0;} #sw-carshare-app .hero h1{font-family:var(--fd)!important;font-weight:900!important;font-size:clamp(2.4rem,5vw,4.2rem)!important;color:var(--white)!important;line-height:.93!important;text-transform:uppercase!important;margin:0!important;padding:0!important;border:none!important;} #sw-carshare-app .hero h1 em{color:var(--red)!important;font-style:normal;display:block;} #sw-carshare-app .hero-desc{color:var(--g400)!important;font-size:.9rem;font-weight:300;line-height:1.65;margin-top:.85rem;max-width:460px;} #sw-carshare-app .hero-ctas{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap;} /* ── BUTTONS ── */ #sw-carshare-app .btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:700;font-size:.93rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border:none;cursor:pointer;text-decoration:none;transition:all .2s;line-height:1;} #sw-carshare-app .btn-r{background:var(--red);color:#fff!important;clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);} #sw-carshare-app .btn-r:hover{background:var(--red-h);transform:translateY(-1px);} #sw-carshare-app .btn-o{background:transparent;color:var(--white)!important;border:1.5px solid rgba(255,255,255,.22);} #sw-carshare-app .btn-o:hover{border-color:rgba(255,255,255,.6);} #sw-carshare-app .btn-g{background:var(--green);color:#fff!important;clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);} #sw-carshare-app .btn-g:hover{background:#0a6340;transform:translateY(-1px);} #sw-carshare-app .bsm{font-family:var(--fd);font-weight:700;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;padding:7px 16px;border:none;cursor:pointer;clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);transition:all .18s;white-space:nowrap;line-height:1;} #sw-carshare-app .bsm.r{background:var(--red);color:#fff!important;} #sw-carshare-app .bsm.r:hover{background:var(--red-h);} #sw-carshare-app .bsm.g2{background:var(--green);color:#fff!important;} #sw-carshare-app .bsm.g2:hover{background:#0a6340;} #sw-carshare-app .bsm.g{background:transparent;color:var(--red)!important;border:1.5px solid var(--red);clip-path:none;padding:6px 14px;} #sw-carshare-app .bsm.g:hover{background:#fff0f3;} #sw-carshare-app .bsm.dim{background:var(--g100);color:var(--g400)!important;clip-path:none;cursor:default;} #sw-carshare-app .bsm.dk{background:var(--g800);color:var(--white)!important;} #sw-carshare-app .bsm.dk:hover{background:var(--black);} #sw-carshare-app .rc-book-btn{font-family:var(--fd);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border:none;cursor:pointer;background:var(--green);color:#fff!important;clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);transition:background .2s;white-space:nowrap;} #sw-carshare-app .rc-book-btn:hover{background:#0a6340;} #sw-carshare-app .rc-book-btn:disabled{background:var(--g200);color:var(--g400)!important;cursor:default;clip-path:none;} #sw-carshare-app .rc-save-btn{background:var(--black);} #sw-carshare-app .rc-save-btn:hover{background:#333;} #sw-carshare-app .rc-owner-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--green-l);color:var(--green)!important;border:1px solid rgba(13,122,78,.25);padding:2px 8px;border-radius:3px;margin-bottom:.5rem;} #sw-carshare-app .rc-seats-label{font-size:.75rem;font-weight:600;color:var(--g600);display:flex;align-items:center;gap:.4rem;white-space:nowrap;} #sw-carshare-app .rc-seats-select{font-family:var(--fb);font-size:.82rem;font-weight:600;border:1px solid #ddd;border-radius:4px;padding:4px 6px;background:#fff;cursor:pointer;} #sw-carshare-app .rc-inline-notes{width:100%;font-family:var(--fb);font-size:.83rem;border:1px solid #ddd;border-radius:4px;padding:5px 8px;resize:vertical;color:var(--black);background:#fafafa;} #sw-carshare-app .btn-wh{background:#fff;color:var(--red)!important;font-family:var(--fd);font-weight:700;font-size:.93rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 24px;border:none;cursor:pointer;clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);transition:all .2s;} #sw-carshare-app .btn-wh:hover{background:#f2f2f2;} /* ── PAGE WRAPPER ── */ #sw-carshare-app .page{max-width:1000px;margin:0 auto;padding:2.4rem 2rem;background:var(--off);} #sw-carshare-app .sh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.2rem;gap:1rem;flex-wrap:wrap;} #sw-carshare-app .st{font-family:var(--fd);font-size:1.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--black)!important;} #sw-carshare-app .st span{color:var(--red)!important;} #sw-carshare-app .slink{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--red)!important;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .2s;text-decoration:none;} #sw-carshare-app .slink:hover{border-color:var(--red);} #sw-carshare-app .notice{background:#fff8f9;border:1px solid #ffe0e5;border-left:3px solid var(--red);padding:10px 14px;font-size:.81rem;color:var(--g800)!important;margin-bottom:1.2rem;} #sw-carshare-app .notice strong{color:var(--red)!important;} /* ── LOGIN BANNER (subtle) ── */ #sw-carshare-app .sw-login-wall{background:#fafafa;border:1px solid #e8e8e8;border-radius:6px;padding:.7rem 1rem;margin-bottom:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;} #sw-carshare-app .sw-login-wall__inner{display:contents;} #sw-carshare-app .sw-login-wall__title{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--black);} #sw-carshare-app .sw-login-wall__sub{font-size:.78rem;color:var(--g600);flex:1;min-width:140px;} #sw-carshare-app .sw-login-wall__btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:0;} #sw-carshare-app .sw-login-wall__btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:4px;font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;transition:background .2s,opacity .2s;white-space:nowrap;} #sw-carshare-app .sw-login-wall__btn svg{width:13px;height:13px;} #sw-carshare-app .sw-login-wall__btn--patreon{background:#f96854;color:#fff!important;} #sw-carshare-app .sw-login-wall__btn--patreon:hover{background:#e85542;} #sw-carshare-app .sw-login-wall__btn--discord{background:#5865F2;color:#fff!important;} #sw-carshare-app .sw-login-wall__btn--discord:hover{background:#4752c4;} #sw-carshare-app .sw-login-wall__btn--guest{background:transparent;color:var(--g600)!important;border:1px solid #ddd;padding:4px 10px;} #sw-carshare-app .sw-login-wall__btn--guest:hover{background:#f0f0f0;color:var(--black)!important;} #sw-carshare-app .sw-login-wall__code-panel{display:none;width:100%;padding-top:.6rem;border-top:1px solid #eee;margin-top:.3rem;} #sw-carshare-app .sw-login-wall__code-label{font-size:.75rem;color:var(--g600);margin-bottom:.4rem;} #sw-carshare-app .sw-login-wall__code-row{display:flex;gap:.4rem;max-width:320px;} #sw-carshare-app .sw-login-wall__code-input{flex:1;border:1px solid #ddd;border-radius:4px;padding:6px 9px;font-size:.84rem;} #sw-carshare-app .sw-login-wall__code-verify{font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:4px;border:none;background:var(--black);color:#fff;cursor:pointer;white-space:nowrap;} #sw-carshare-app .sw-login-wall__code-verify:hover{opacity:.85;} /* Signed-in strip */ #sw-carshare-app .sw-member-auth{background:linear-gradient(135deg,#fafafa 0%,#fff 100%);border:1px solid #e8e8e8;border-radius:8px;padding:.85rem 1.1rem;margin-bottom:1.2rem;font-size:.84rem;} #sw-carshare-app .sw-member-auth__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;margin-bottom:.65rem;} #sw-carshare-app .sw-member-auth__title{font-family:var(--fd);font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--black);} #sw-carshare-app .sw-member-auth__sub{font-size:.74rem;color:var(--g600);} #sw-carshare-app .sw-member-auth__row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;} #sw-carshare-app .sw-member-auth__cell{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;} #sw-carshare-app .sw-member-auth__lbl{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#888;min-width:4.5rem;} #sw-carshare-app .sw-member-auth__who{font-weight:600;color:var(--black);} #sw-carshare-app .sw-member-auth__hint{font-size:.78rem;color:var(--g600);} #sw-carshare-app .sw-member-auth__link{font-size:.78rem;font-weight:600;color:#5865F2;text-decoration:none;border-bottom:1px solid transparent;} #sw-carshare-app .sw-member-auth__link:hover{border-color:#5865F2;} #sw-carshare-app .sw-member-auth__foot{margin:.55rem 0 0;font-size:.76rem;color:var(--g600);line-height:1.45;} #sw-carshare-app .sw-auth-code-input{border:1px solid #ddd;border-radius:4px;} #sw-carshare-app .sw-auth-code-btn{font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer;} #sw-carshare-app .sw-auth-code-btn:hover{background:#f5f5f5;} #sw-carshare-app .sw-patreon-oauth__btn{display:inline-flex;align-items:center;gap:6px;background:#f96854;color:#fff!important;font-family:var(--fd);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:4px;text-decoration:none;transition:background .2s;} #sw-carshare-app .sw-patreon-oauth__btn:hover{background:#e85542;} #sw-carshare-app .sw-post-oauth-panel{background:#fafafa;border:1px solid #eee;border-radius:6px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.84rem;} #sw-carshare-app .sw-modal-oauth__badge--pat{background:#f96854;} #sw-carshare-app .sw-discord-oauth{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .85rem;background:#f6f7fb;border:1px solid #e3e5f0;border-radius:6px;padding:.65rem 1rem;margin-bottom:1.2rem;font-size:.84rem;} #sw-carshare-app .sw-discord-oauth__label{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#5865F2;} #sw-carshare-app .sw-discord-oauth__user{font-weight:600;color:var(--black);} #sw-carshare-app .sw-discord-oauth__hint{color:var(--g600);font-size:.78rem;} #sw-carshare-app .sw-discord-oauth__link{font-size:.78rem;font-weight:600;color:#5865F2;text-decoration:none;border-bottom:1px solid transparent;} #sw-carshare-app .sw-discord-oauth__link:hover{border-color:#5865F2;} #sw-carshare-app .sw-discord-oauth__btn{display:inline-flex;align-items:center;gap:6px;background:#5865F2;color:#fff!important;font-family:var(--fd);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:4px;text-decoration:none;transition:background .2s;} #sw-carshare-app .sw-discord-oauth__btn:hover{background:#4752c4;} #sw-carshare-app .sw-post-discord-panel{background:#f8f9fc;border:1px solid #e3e5f0;border-radius:8px;padding:.9rem 1.1rem;margin-bottom:1.25rem;font-size:.84rem;line-height:1.45;} #sw-carshare-app .sw-post-discord-panel__line{margin:0 0 .35rem;} #sw-carshare-app .sw-post-discord-panel__cta{margin:0 0 .35rem;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .65rem;} #sw-carshare-app .sw-post-discord-panel__editnote{margin:.55rem 0 0;padding-top:.55rem;border-top:1px dashed #d8dce8;font-size:.8rem;color:var(--g600);} #sw-carshare-app .sw-post-discord-panel__muted{font-weight:400;color:var(--g600);font-size:.8rem;} /* Modals — Discord OAuth + Patreon note */ #sw-carshare-app .sw-modal-oauth{background:#f4f6fb;border:1px solid #e0e4f0;border-radius:6px;padding:.65rem .85rem;margin-bottom:.75rem;} #sw-carshare-app .sw-modal-oauth__status{margin:0;font-size:.8rem;line-height:1.4;color:var(--g800);} #sw-carshare-app .sw-modal-oauth__badge{display:inline-block;font-family:var(--fd);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5865F2;margin-right:.35rem;} #sw-carshare-app .sw-modal-oauth__row{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;} #sw-carshare-app .sw-modal-oauth__hint{font-size:.72rem;color:var(--g600);line-height:1.35;flex:1;min-width:140px;} #sw-carshare-app .sw-modal-oauth__pat{margin:0 0 .75rem;font-size:.72rem;line-height:1.45;color:var(--g600);padding:.5rem .65rem;background:#fafafa;border-radius:4px;border:1px solid var(--g100);} /* ── FIXTURES ── */ #sw-carshare-app .ftable{background:var(--white);border:1px solid var(--g100);} #sw-carshare-app .fdiv{background:var(--g800);color:var(--g600)!important;font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 1.2rem;} #sw-carshare-app .frow{display:grid;grid-template-columns:68px 1fr auto auto;align-items:center;gap:.9rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--g100);transition:background .15s;} #sw-carshare-app .frow:last-child{border-bottom:none;} #sw-carshare-app .frow:hover{background:#fdf5f7;} #sw-carshare-app .fdate{text-align:center;} #sw-carshare-app .fday{font-family:var(--fd);font-size:1.5rem;font-weight:900;line-height:1;color:var(--black)!important;} #sw-carshare-app .fmon{font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;margin-top:1px;} #sw-carshare-app .ftags{display:flex;align-items:center;gap:4px;margin-bottom:3px;flex-wrap:wrap;} #sw-carshare-app .tag{font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;background:var(--g100);color:var(--g600)!important;} #sw-carshare-app .tag.sp{background:rgba(200,16,46,.1);color:var(--red)!important;} #sw-carshare-app .fopp{font-family:var(--fd);font-size:1.08rem;font-weight:800;letter-spacing:.02em;color:var(--black)!important;} #sw-carshare-app .fven{font-size:.7rem;color:var(--g400)!important;display:flex;align-items:center;gap:4px;margin-top:2px;} #sw-carshare-app .fseats{text-align:center;} #sw-carshare-app .fsn{font-family:var(--fd);font-size:1.4rem;font-weight:900;color:var(--red)!important;line-height:1;} #sw-carshare-app .fsn.z{color:var(--g400)!important;} #sw-carshare-app .fsl{font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g400)!important;margin-top:1px;} /* ── TABS ── */ #sw-carshare-app .tabs{display:flex;border-bottom:2px solid var(--g100);margin-bottom:1.2rem;overflow-x:auto;} #sw-carshare-app .tab{font-family:var(--fd);font-weight:700;font-size:.87rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border:none;background:transparent;color:var(--g400)!important;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap;flex-shrink:0;} #sw-carshare-app .tab.active{color:var(--red)!important;border-bottom-color:var(--red);} #sw-carshare-app .tab:hover:not(.active){color:var(--black)!important;} /* ── RIDE CARDS ── */ #sw-carshare-app .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem;} #sw-carshare-app .rcard{background:var(--white)!important;border:1px solid var(--g100);padding:1.15rem;position:relative;transition:box-shadow .2s,transform .2s;} #sw-carshare-app .rcard:hover{box-shadow:var(--shmd);transform:translateY(-2px);} #sw-carshare-app .rcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);} #sw-carshare-app .rcard.isnew::before{background:var(--green);} #sw-carshare-app .rc-fix{font-family:var(--fd);font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--red)!important;margin-bottom:2px;} #sw-carshare-app .rc-route{font-family:var(--fd);font-size:1.18rem;font-weight:800;color:var(--black)!important;margin-bottom:.8rem;} #sw-carshare-app .rc-meta{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem;margin-bottom:.9rem;} #sw-carshare-app .rl{font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;font-weight:500;} #sw-carshare-app .rv{font-size:.85rem;font-weight:500;color:var(--black)!important;margin-top:1px;} #sw-carshare-app .rc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:.85rem;border-top:1px solid var(--g100);gap:.5rem;} #sw-carshare-app .drv{display:flex;align-items:center;gap:7px;} #sw-carshare-app .av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:.78rem;color:#fff!important;flex-shrink:0;} #sw-carshare-app .dn{font-size:.82rem;font-weight:500;color:var(--black)!important;} #sw-carshare-app .pill{padding:3px 9px;font-family:var(--fd);font-size:.78rem;font-weight:700;background:var(--off);border:1px solid var(--g100);color:var(--black)!important;white-space:nowrap;} #sw-carshare-app .pill.full{background:#fff0f3;border-color:#ffd0d8;color:var(--red)!important;} #sw-carshare-app .pill.new{background:var(--green-l);border-color:rgba(13,122,78,.3);color:var(--green)!important;} #sw-carshare-app .rc-passengers{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--g100);} #sw-carshare-app .rc-pass-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;font-weight:500;margin-bottom:.4rem;} #sw-carshare-app .pass-chip{display:inline-flex;align-items:center;gap:5px;background:var(--off);border:1px solid var(--g100);padding:3px 8px;font-size:.77rem;margin:2px 2px 2px 0;color:var(--black)!important;} #sw-carshare-app .pass-chip .pav{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:.6rem;color:#fff!important;flex-shrink:0;} /* ── EMPTY STATE ── */ #sw-carshare-app .empty{grid-column:1/-1;text-align:center;padding:2.5rem 1rem;background:var(--white);border:1px dashed var(--g200);} #sw-carshare-app .empty-icon{display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;} #sw-carshare-app .empty-icon .sw-ico-empty{width:44px;height:44px;display:block;color:var(--g400);opacity:.55;} #sw-carshare-app .empty-t{font-family:var(--fd);font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--g400)!important;letter-spacing:.05em;} #sw-carshare-app .empty-s{font-size:.78rem;color:var(--g400)!important;margin-top:3px;} /* ── PROMO BANNER ── */ #sw-carshare-app .promo{background:var(--red)!important;padding:2.2rem 2rem;position:relative;overflow:hidden;} #sw-carshare-app .promo::after{content:'CAR SHARE';position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-family:var(--fd);font-size:6.5rem;font-weight:900;color:rgba(0,0,0,.1);pointer-events:none;white-space:nowrap;line-height:1;} #sw-carshare-app .promo-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;position:relative;z-index:1;} #sw-carshare-app .promo h2{font-family:var(--fd)!important;font-size:1.75rem!important;font-weight:900!important;text-transform:uppercase;color:#fff!important;line-height:1.1!important;margin:0!important;} #sw-carshare-app .promo p{color:rgba(255,255,255,.8)!important;font-size:.86rem;font-weight:300;margin-top:3px;} /* ── OFFER FORM ── */ #sw-carshare-app .fsect{background:var(--white)!important;border-top:4px solid var(--red);padding:2.4rem 2rem;} #sw-carshare-app .fin{max-width:620px;margin:0 auto;} #sw-carshare-app .ftitle{font-family:var(--fd);font-size:1.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--black)!important;margin-bottom:3px;} #sw-carshare-app .ftitle span{color:var(--red)!important;} #sw-carshare-app .fnote{color:var(--g400)!important;font-size:.8rem;margin-bottom:1.6rem;} #sw-carshare-app .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;} #sw-carshare-app .fg{display:flex;flex-direction:column;gap:4px;} #sw-carshare-app .fg.full{grid-column:1/-1;} #sw-carshare-app .fgrid label{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;} #sw-carshare-app .fgrid input, #sw-carshare-app .fgrid select, #sw-carshare-app .fgrid textarea{font-family:var(--fb);font-size:.88rem;color:var(--black)!important;background:var(--off)!important;border:1.5px solid var(--g100)!important;padding:9px 11px;outline:none;transition:border-color .2s,background .2s;width:100%;border-radius:0;} #sw-carshare-app .fgrid input:focus, #sw-carshare-app .fgrid select:focus, #sw-carshare-app .fgrid textarea:focus{border-color:var(--red)!important;background:var(--white)!important;} #sw-carshare-app .fgrid textarea{resize:vertical;min-height:68px;} #sw-carshare-app .ffoot{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;flex-wrap:wrap;gap:.8rem;} #sw-carshare-app .flegal{font-size:.7rem;color:var(--g400)!important;} #sw-carshare-app .flegal a{color:var(--red)!important;text-decoration:none;} /* ── HOW IT WORKS ── */ #sw-carshare-app .how{background:var(--black)!important;padding:2.6rem 2rem;} #sw-carshare-app .how-in{max-width:1000px;margin:0 auto;} #sw-carshare-app .how-t{font-family:var(--fd);font-size:1.55rem;font-weight:900;text-transform:uppercase;color:var(--white)!important;margin-bottom:1.8rem;} #sw-carshare-app .how-t span{color:var(--red)!important;} #sw-carshare-app .steps{display:grid;grid-template-columns:repeat(3,1fr);} #sw-carshare-app .step{padding:1.1rem;border-left:1px solid rgba(255,255,255,.05);} #sw-carshare-app .step:first-child{border-left:none;} #sw-carshare-app .sn{font-family:var(--fd);font-size:2.8rem;font-weight:900;color:rgba(200,16,46,.18);line-height:1;margin-bottom:.45rem;} #sw-carshare-app .st2{font-family:var(--fd);font-size:.93rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white)!important;margin-bottom:.3rem;} #sw-carshare-app .sd{color:var(--g600)!important;font-size:.77rem;line-height:1.6;font-weight:300;} /* ── MODALS ── */ #sw-carshare-app .mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;align-items:center;justify-content:center;padding:1rem;} #sw-carshare-app .mo.open{display:flex;} #sw-carshare-app .mbox{background:var(--white)!important;padding:1.8rem;max-width:460px;width:100%;border-top:4px solid var(--red);max-height:90vh;overflow-y:auto;} #sw-carshare-app .mbox.green-top{border-top-color:var(--green);} #sw-carshare-app .mbox h3{font-family:var(--fd)!important;font-size:1.3rem!important;font-weight:900!important;text-transform:uppercase;color:var(--black)!important;margin-bottom:.3rem!important;padding:0!important;border:none!important;} #sw-carshare-app .mbox .msub{font-size:.8rem;color:var(--g600)!important;margin-bottom:1.2rem;line-height:1.5;} #sw-carshare-app .mact{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem;flex-wrap:wrap;} #sw-carshare-app .mfg{display:flex;flex-direction:column;gap:4px;margin-bottom:.85rem;} #sw-carshare-app .mfg label{font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;} #sw-carshare-app .mfg input, #sw-carshare-app .mfg select, #sw-carshare-app .mfg textarea{font-family:var(--fb);font-size:.88rem;color:var(--black)!important;background:var(--off)!important;border:1.5px solid var(--g100)!important;padding:9px 11px;outline:none;transition:border-color .2s;width:100%;border-radius:0;} #sw-carshare-app .mfg input:focus, #sw-carshare-app .mfg select:focus, #sw-carshare-app .mfg textarea:focus{border-color:var(--red)!important;background:var(--white)!important;} #sw-carshare-app .mfg textarea{resize:vertical;min-height:65px;} #sw-carshare-app .email-preview{background:var(--g800);border-radius:2px;padding:1.2rem;margin-top:.8rem;} #sw-carshare-app .ep-subject{font-family:var(--fd);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)!important;margin-bottom:.5rem;} #sw-carshare-app .ep-body{font-size:.8rem;color:#ccc!important;line-height:1.6;white-space:pre-wrap;} /* ── TOAST ── */ #sw-carshare-app .toast{position:fixed;bottom:1.8rem;right:1.8rem;z-index:99999;background:var(--black)!important;border-left:4px solid var(--green);color:var(--white)!important;padding:.9rem 1.2rem;font-size:.84rem;font-weight:500;box-shadow:var(--shmd);transform:translateX(130%);transition:transform .3s ease;max-width:300px;} #sw-carshare-app .toast.show{transform:translateX(0);} #sw-carshare-app .toast strong{color:#5de8a0!important;display:block;font-family:var(--fd);font-size:.93rem;letter-spacing:.05em;margin-bottom:1px;} #sw-carshare-app .toast.err{border-color:var(--red);} #sw-carshare-app .toast.err strong{color:#ff7090!important;} /* ── RESPONSIVE ── */ @media(max-width:760px){ #sw-carshare-app .frow{grid-template-columns:60px 1fr;} #sw-carshare-app .fseats, #sw-carshare-app .frow>.bsm{display:none;} #sw-carshare-app .rgrid{grid-template-columns:1fr;} #sw-carshare-app .steps{grid-template-columns:1fr 1fr;} #sw-carshare-app .fgrid{grid-template-columns:1fr;} #sw-carshare-app .fg.full{grid-column:1;} } @media(max-width:460px){ #sw-carshare-app .steps{grid-template-columns:1fr;} } @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* ── THEME COMPATIBILITY ── Breaks out of narrow theme content containers so the board uses the full available width on common WordPress themes. */ #sw-carshare-app { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* Reset any theme typography that bleeds in */ #sw-carshare-app p, #sw-carshare-app li, #sw-carshare-app td { font-size: inherit; line-height: inherit; color: inherit; } /* Prevent theme link styles overriding button colours */ #sw-carshare-app a.btn-r, #sw-carshare-app a.btn-g, #sw-carshare-app a.bsm { text-decoration: none !important; box-shadow: none !important; } /* ── TAB NAVIGATION ── */ #sw-carshare-app .sw-nav{display:flex;border-bottom:3px solid var(--red);margin-bottom:0;overflow-x:auto;background:var(--white);flex-wrap:nowrap;} #sw-carshare-app .sw-nav-btn{font-family:var(--fd);font-weight:700;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 18px;border:none;background:transparent;color:var(--g400);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-3px;transition:color .2s,border-color .2s;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;} #sw-carshare-app .sw-nav-btn:hover{color:var(--black);} #sw-carshare-app .sw-nav-btn.active{color:var(--red);border-bottom-color:var(--red);} #sw-carshare-app .sw-nav-btn--edit{background:var(--green)!important;color:#fff!important;border-bottom-color:transparent!important;} #sw-carshare-app .sw-nav-btn--edit:hover{color:#fff!important;filter:brightness(1.05);} #sw-carshare-app .sw-nav-btn--edit.active{color:#fff!important;border-bottom-color:var(--green)!important;} #sw-carshare-app .sw-ico{width:1.05em;height:1.05em;flex-shrink:0;display:block;opacity:.92;} #sw-carshare-app .sw-nav-btn .sw-ico{color:currentColor;} #sw-carshare-app .sw-nav-count{background:var(--red);color:#fff;font-size:.65rem;padding:1px 6px;border-radius:9px;font-family:var(--fb);font-weight:700;min-width:18px;text-align:center;} /* ── TAB PANELS ── */ #sw-carshare-app .sw-tab{display:none;} #sw-carshare-app .sw-tab.active{display:block;} #sw-carshare-app .sw-tab-inner{padding:1.4rem 0;} #sw-carshare-app .sw-tab-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;gap:1rem;flex-wrap:wrap;} #sw-carshare-app .sw-tab-desc{font-size:.83rem;color:var(--g400);margin-bottom:1rem;line-height:1.5;} #sw-carshare-app .sw-post-btn{font-family:var(--fd);font-weight:700;font-size:.83rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;background:var(--red);color:#fff!important;border:none;cursor:pointer;clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);transition:background .2s;white-space:nowrap;} #sw-carshare-app .sw-post-btn:hover{background:var(--red-h);} #sw-carshare-app .sw-post-btn--signin{background:transparent;color:var(--g600)!important;border:1px solid #ddd;clip-path:none;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;} #sw-carshare-app .sw-post-btn--signin:hover{background:#f5f5f5;color:var(--black)!important;} /* ── FILTER TABS (inside rides panel) ── */ #sw-carshare-app .sw-filter-tabs{display:flex;gap:0;border-bottom:2px solid var(--g100);margin-bottom:1.1rem;overflow-x:auto;} #sw-carshare-app .ftab{font-family:var(--fd);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;padding:7px 14px;border:none;background:transparent;color:var(--g400);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:5px;} #sw-carshare-app .ftab.active{color:var(--red);border-bottom-color:var(--red);} #sw-carshare-app .ftab:hover:not(.active){color:var(--black);} #sw-carshare-app .ftab-date{font-size:.7rem;color:var(--g400);font-family:var(--fb);font-weight:400;text-transform:none;letter-spacing:0;} #sw-carshare-app .ftab.active .ftab-date{color:rgba(200,16,46,.6);} /* ── NOTICE ── */ #sw-carshare-app .sw-notice{background:#fff8f9;border:1px solid #ffe0e5;border-left:3px solid var(--red);padding:10px 14px;font-size:.82rem;color:var(--g800)!important;margin-bottom:1rem;} #sw-carshare-app .sw-notice strong{color:var(--red)!important;} /* ── SUB TABS (post panel) ── */ #sw-carshare-app .sw-sub-tabs{display:flex;gap:.6rem;margin-bottom:1.3rem;flex-wrap:wrap;} #sw-carshare-app .sw-sub-btn{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:700;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;padding:9px 20px;border:2px solid var(--g200);background:transparent;color:var(--g600)!important;cursor:pointer;transition:all .2s;} #sw-carshare-app .sw-sub-btn .sw-ico{width:1em;height:1em;opacity:.88;} #sw-carshare-app .sw-sub-btn.active{border-color:var(--red);color:var(--red)!important;background:#fff8f9;} #sw-carshare-app .sw-sub-btn:hover:not(.active){border-color:var(--g400);color:var(--black)!important;} #sw-carshare-app .sw-subpanel{display:none;} #sw-carshare-app .sw-subpanel.active{display:block;} /* ── FORM inside tab ── */ #sw-carshare-app .fnote{font-size:.82rem;color:var(--g400);margin-bottom:1.2rem;line-height:1.5;} #sw-carshare-app .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;} #sw-carshare-app .fg{display:flex;flex-direction:column;gap:4px;} #sw-carshare-app .fg.full{grid-column:1/-1;} #sw-carshare-app .fgrid label{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;} #sw-carshare-app .fgrid input, #sw-carshare-app .fgrid select, #sw-carshare-app .fgrid textarea{font-family:var(--fb);font-size:.88rem;color:var(--black)!important;background:var(--off)!important;border:1.5px solid var(--g100)!important;padding:9px 11px;outline:none;transition:border-color .2s;width:100%;border-radius:0;} #sw-carshare-app .fgrid input:focus, #sw-carshare-app .fgrid select:focus, #sw-carshare-app .fgrid textarea:focus{border-color:var(--red)!important;background:var(--white)!important;} #sw-carshare-app .fgrid textarea{resize:vertical;min-height:68px;} #sw-carshare-app .ffoot{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;flex-wrap:wrap;gap:.8rem;} #sw-carshare-app .flegal{font-size:.7rem;color:var(--g400)!important;} /* ── FIXTURE TABLE ── */ #sw-carshare-app .fdiv{background:var(--g800);color:var(--g600)!important;font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 1rem;} #sw-carshare-app .frow{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:.8rem;padding:.85rem 1rem;border-bottom:1px solid var(--g100);background:var(--white)!important;transition:background .15s;} #sw-carshare-app .frow:last-child{border-bottom:none;} #sw-carshare-app .frow:hover{background:#fdf5f7!important;} #sw-carshare-app .fdate{text-align:center;} #sw-carshare-app .fday{font-family:var(--fd);font-size:1.5rem;font-weight:900;line-height:1;color:var(--black)!important;} #sw-carshare-app .fmon{font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)!important;margin-top:1px;} #sw-carshare-app .finfo{} #sw-carshare-app .ftags{display:flex;align-items:center;gap:4px;margin-bottom:3px;flex-wrap:wrap;} #sw-carshare-app .tag{font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;background:var(--g100);color:var(--g600)!important;} #sw-carshare-app .tag.sp{background:rgba(200,16,46,.1);color:var(--red)!important;} #sw-carshare-app .fopp{font-family:var(--fd);font-size:1.08rem;font-weight:800;letter-spacing:.02em;color:var(--black)!important;} #sw-carshare-app .fven{font-size:.7rem;color:var(--g400)!important;display:flex;align-items:center;gap:4px;margin-top:2px;} #sw-carshare-app .fseats{text-align:center;min-width:44px;} #sw-carshare-app .fsn{font-family:var(--fd);font-size:1.4rem;font-weight:900;color:var(--red)!important;line-height:1;} #sw-carshare-app .fsn.z{color:var(--g400)!important;} #sw-carshare-app .fsl{font-size:.59rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g400)!important;margin-top:1px;} #sw-carshare-app .fbtns{display:flex;gap:.4rem;} /* ── EMPTY STATES ── */ #sw-carshare-app .empty{grid-column:1/-1;text-align:center;padding:2.5rem 1rem;background:var(--white)!important;border:1px dashed var(--g200);} #sw-carshare-app .empty-icon{font-size:2rem;margin-bottom:.5rem;} #sw-carshare-app .empty-t{font-family:var(--fd);font-size:1rem;font-weight:700;text-transform:uppercase;color:var(--g400)!important;letter-spacing:.05em;} #sw-carshare-app .sw-empty{padding:2rem;text-align:center;color:var(--g400);font-size:.84rem;} /* ── RIDE CARDS (green variant for requests) ── */ #sw-carshare-app .rcard.isnew-green::before{background:var(--green)!important;} /* ── RESPONSIVE ── */ @media(max-width:640px){ #sw-carshare-app .sw-nav-btn{padding:10px 12px;font-size:.8rem;} #sw-carshare-app .frow{grid-template-columns:52px 1fr;} #sw-carshare-app .fseats{display:none;} #sw-carshare-app .fgrid{grid-template-columns:1fr;} #sw-carshare-app .fg.full{grid-column:1;} #sw-carshare-app .rgrid{grid-template-columns:1fr;} } /* ── COACH / MINIBUS ── */ #sw-carshare-app .coach-card { border-top-width: 4px; } #sw-carshare-app .coach-progress-wrap { margin: .9rem 0 .4rem; } #sw-carshare-app .coach-progress-bar { height: 10px; background: var(--g100); border-radius: 5px; overflow: hidden; margin-bottom: .45rem; } #sw-carshare-app .coach-progress-fill { height: 100%; background: #1a4a8a; border-radius: 5px; transition: width .6s ease; } #sw-carshare-app .coach-progress-fill.hit { background: var(--green); } #sw-carshare-app .coach-progress-label { font-size: .8rem; color: var(--g600); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } #sw-carshare-app .coach-progress-label strong { color: var(--black); } #sw-carshare-app .coach-hit-label { background: var(--green); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; } #sw-carshare-app .coach-badge { display: inline-block; font-family: var(--fd); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; } #sw-carshare-app .coach-badge.confirmed { background: #e8f5ee; color: var(--green); } #sw-carshare-app .coach-badge.notenough { background: var(--g100); color: var(--g600); } /* ── DISCORD DEEP LINK HIGHLIGHT ── */ #sw-carshare-app .rcard.sw-highlight { animation: swHighlight 2s ease !important; } @keyframes swHighlight { 0% { box-shadow: 0 0 0 3px #C8102E, 0 8px 36px rgba(200,16,46,.3); } 60% { box-shadow: 0 0 0 3px #C8102E, 0 8px 36px rgba(200,16,46,.3); } 100% { box-shadow: var(--sh); } }