/* Organic Social Login — Minimal, Subtle, Mobile-First */

:root {
    --osl-r: 50px;
    --osl-f: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --osl-t: all .2s cubic-bezier(.4,0,.2,1);
    --osl-muted: #94a3b8;
    --osl-border: #e2e8f0;
    --osl-bg: #f8fafc;
}

/* ===== Social Buttons (My Account / Checkout) ===== */
.osl-social-login { margin:0 0 20px; font-family:var(--osl-f); }

.osl-divider { display:flex; align-items:center; gap:14px; margin:0 0 14px; color:var(--osl-muted); font-size:12px; letter-spacing:.03em; }
.osl-divider::before,.osl-divider::after { content:''; flex:1; height:1px; background:var(--osl-border); }

.osl-buttons { display:flex; gap:8px; }

.osl-btn {
    display:flex; align-items:center; justify-content:center; gap:8px; flex:1;
    padding:10px 16px; border-radius:var(--osl-r); font-size:13px; font-weight:500;
    font-family:var(--osl-f); text-decoration:none !important; cursor:pointer;
    transition:var(--osl-t); box-sizing:border-box; box-shadow:0 1px 2px rgba(0,0,0,.06);
    white-space:nowrap; -webkit-tap-highlight-color:transparent; line-height:1.2;
}
.osl-btn:hover { box-shadow:0 3px 10px rgba(0,0,0,.1); transform:translateY(-1px); }
.osl-btn:active { transform:translateY(0); }

.osl-icon { display:inline-block; width:16px; height:16px; flex-shrink:0; background-size:contain; background-repeat:no-repeat; background-position:center; }

.osl-btn-google { background:#fff; color:#3c4043; border:1px solid var(--osl-border); }
.osl-btn-google:hover { color:#3c4043; background:#fff; }
.osl-icon-google { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E"); }

.osl-btn-facebook { background:#1877F2; color:#fff; border:1px solid #1877F2; }
.osl-btn-facebook:hover { color:#fff; background:#1564d4; }
.osl-icon-facebook { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"); }

.osl-btn-apple { background:#000; color:#fff; border:1px solid #000; }
.osl-btn-apple:hover { color:#fff; background:#222; }
.osl-icon-apple { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E"); }

/* Checkout card */
.osl-context-checkout { max-width:460px; margin:0 auto 24px; padding:18px 20px; background:var(--osl-bg); border:1px solid var(--osl-border); border-radius:14px; }

/* ===== Tiny Account Icon (top-right, near cart) ===== */
.osl-acct {
    position:fixed; top:12px; right:80px; z-index:99998;
}
.osl-acct-btn {
    width:36px; height:36px; border-radius:50%; border:1px solid var(--osl-border);
    background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#64748b; transition:var(--osl-t); padding:0; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.osl-acct-btn:hover { background:var(--osl-bg); color:#334155; box-shadow:0 2px 8px rgba(0,0,0,.1); }

/* Dropdown */
.osl-acct-drop {
    position:absolute; top:calc(100% + 6px); right:0; width:240px;
    background:#fff; border:1px solid var(--osl-border); border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:99999;
    opacity:0; visibility:hidden; transform:translateY(-4px) scale(.97);
    transition:var(--osl-t); overflow:hidden;
}
.osl-acct-drop.osl-open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.osl-acct-head { padding:14px 16px 10px; border-bottom:1px solid var(--osl-border); }
.osl-acct-title { display:block; font-size:14px; font-weight:600; color:#0f172a; }
.osl-acct-sub { display:block; font-size:11px; color:var(--osl-muted); margin-top:2px; }

.osl-acct-opt {
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    font-size:13px; font-weight:500; color:#374151; text-decoration:none !important;
    transition:var(--osl-t); cursor:pointer; border-bottom:1px solid #f1f5f9;
}
.osl-acct-opt:last-child { border-bottom:none; }
.osl-acct-opt:hover { background:var(--osl-bg); }
.osl-acct-opt-google { color:#3c4043; }
.osl-acct-opt-facebook { color:#1877F2; }
.osl-acct-opt-apple { color:#000; }
.osl-acct-opt-email { color:#64748b; }
.osl-acct-opt-email svg { opacity:.5; }

/* ===== Cart Banner ===== */
.osl-cart-banner {
    display:flex; align-items:center; gap:16px; padding:12px 16px; margin:0 0 20px;
    background:#f0fdf4; border:1px solid #d1fae5; border-radius:12px;
}
.osl-cart-banner-text { flex:1; }
.osl-cart-banner-text h4 { font-size:13px; font-weight:600; color:#065f46; margin:0; }
.osl-cart-banner-text p { font-size:11px; color:#047857; margin:2px 0 0; opacity:.8; }
.osl-cart-banner .osl-buttons { flex-shrink:0; gap:6px; }
.osl-cart-banner .osl-btn { flex:none; padding:7px 10px; font-size:0; border-radius:8px; box-shadow:none; }
.osl-cart-banner .osl-label { display:none; }
.osl-cart-banner .osl-icon { width:18px; height:18px; }

/* ===== Login Modal / Bottom Sheet ===== */
.osl-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px); z-index:999999;
    opacity:0; visibility:hidden; transition:var(--osl-t);
}
.osl-overlay.osl-open { opacity:1; visibility:visible; }

.osl-sheet {
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
    width:340px; max-width:calc(100vw - 32px); background:#fff; border-radius:20px;
    padding:28px 24px; z-index:1000000;
    opacity:0; visibility:hidden; transition:var(--osl-t);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.osl-overlay.osl-open .osl-sheet { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }

.osl-sheet-x {
    position:absolute; top:12px; right:12px; width:28px; height:28px; border:none;
    background:var(--osl-bg); border-radius:50%; cursor:pointer; display:flex;
    align-items:center; justify-content:center; color:#94a3b8; font-size:16px;
    transition:var(--osl-t); padding:0; line-height:1;
}
.osl-sheet-x:hover { background:#e2e8f0; color:#334155; }

.osl-sheet-head { text-align:center; margin-bottom:20px; }
.osl-sheet-head h3 { font-size:17px; font-weight:700; color:#0f172a; margin:0 0 4px; }
.osl-sheet-head p { font-size:13px; color:var(--osl-muted); margin:0; line-height:1.4; }

.osl-sheet-btns { display:flex; flex-direction:column; gap:8px; }
.osl-sheet-btns .osl-btn { flex:none; width:100%; padding:11px 18px; }

.osl-sheet-foot { text-align:center; margin:14px 0 0; font-size:11px; color:#cbd5e1; }

/* ===== Mobile ===== */
@media (max-width:768px) {
    .osl-buttons { flex-direction:column; }
    .osl-btn { border-radius:12px; padding:11px 14px; }

    /* Account icon — smaller, closer to edge */
    .osl-acct { top:10px; right:60px; }
    .osl-acct-btn { width:32px; height:32px; }
    .osl-acct-btn svg { width:16px; height:16px; }

    /* Dropdown → bottom sheet */
    .osl-acct-drop {
        position:fixed; top:auto; right:0; bottom:0; left:0; width:100%;
        border-radius:16px 16px 0 0; transform:translateY(100%);
        padding-bottom:env(safe-area-inset-bottom,12px);
    }
    .osl-acct-drop.osl-open { transform:translateY(0); }
    .osl-acct-drop::before {
        content:''; display:block; width:32px; height:3px; background:#d1d5db;
        border-radius:2px; margin:10px auto 4px;
    }

    /* Cart banner stacks */
    .osl-cart-banner { flex-direction:column; gap:10px; align-items:stretch; }
    .osl-cart-banner .osl-buttons { flex-direction:row; }
    .osl-cart-banner .osl-btn { flex:1; justify-content:center; }

    /* Modal → bottom sheet */
    .osl-sheet {
        left:0; top:auto; bottom:0; right:0; width:100%; max-width:100%;
        border-radius:20px 20px 0 0; transform:translateY(100%) translateX(0);
        padding:24px 20px calc(env(safe-area-inset-bottom,12px) + 16px);
    }
    .osl-overlay.osl-open .osl-sheet { transform:translateY(0) translateX(0); }
    .osl-sheet::before {
        content:''; display:block; width:32px; height:3px; background:#d1d5db;
        border-radius:2px; margin:0 auto 14px;
    }
}

@media (max-width:375px) {
    .osl-btn { padding:10px 12px; font-size:12px; }
    .osl-acct { right:50px; }
}