/* Phase 13C — premium seller/customer account mode selector */
html.bupiz-mode-open,
body.bupiz-mode-open{
    overflow:hidden !important;
}

.bupiz-mode-modal{
    position:fixed;
    inset:0;
    z-index:100250;
    display:none;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
}

.bupiz-mode-modal.is-open{
    display:block;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.bupiz-mode-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.74);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.bupiz-mode-dialog{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    overflow:auto;
}

.bupiz-mode-card{
    position:relative;
    width:min(900px, calc(100vw - 48px));
    background:#fff;
    border:1px solid rgba(255,255,255,.6);
    border-radius:26px;
    padding:34px 42px 32px;
    box-shadow:0 34px 90px rgba(15,23,42,.28);
    overflow:hidden;
}

.bupiz-mode-card::before,
.bupiz-mode-card::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.bupiz-mode-card::before{
    width:260px;
    height:260px;
    right:-135px;
    top:-150px;
    background:rgba(255,132,0,.10);
}

.bupiz-mode-card::after{
    width:210px;
    height:210px;
    left:-120px;
    bottom:-140px;
    background:rgba(232,62,140,.06);
}

.bupiz-mode-card__accent{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px;
    background:linear-gradient(90deg,#ff8400 0%,#ffa41c 52%,#e83e8c 100%);
}

.bupiz-mode-close{
    position:absolute;
    top:20px;
    right:22px;
    z-index:2;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f5f6f8;
    color:#344054;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease;
}

.bupiz-mode-close:hover{
    background:#eef1f5;
    transform:translateY(-1px);
}

.bupiz-mode-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    margin:0 0 15px;
}

.bupiz-mode-brand__bag{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:11px 11px 13px 13px;
    background:linear-gradient(135deg,#ff8400,#ff6b00);
    color:#fff;
    font-size:24px;
    font-weight:900;
    box-shadow:0 9px 20px rgba(255,132,0,.22);
}

.bupiz-mode-brand__text{
    color:#1B263B;
    font-size:17px;
    font-weight:850;
    letter-spacing:-.02em;
}

.bupiz-mode-head{
    position:relative;
    z-index:1;
    text-align:center;
    margin-bottom:28px;
}

.bupiz-mode-head h2{
    margin:0;
    color:#111827;
    font-size:clamp(28px,3vw,42px);
    line-height:1.12;
    letter-spacing:-.035em;
    font-weight:850;
}

.bupiz-mode-head h2 span{
    color:#ff6f00;
}

.bupiz-mode-head p{
    margin:10px 0 0;
    color:#667085;
    font-size:17px;
    line-height:1.45;
}

.bupiz-mode-options{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.bupiz-mode-option{
    appearance:none;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:28px 24px 24px;
    border-radius:21px;
    cursor:pointer;
    font:inherit;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bupiz-mode-option:hover,
.bupiz-mode-option:focus-visible{
    transform:translateY(-3px);
    outline:none;
}

.bupiz-mode-option--customer{
    background:linear-gradient(145deg,#fff 0%,#fff8f2 100%);
    border:1.5px solid #ffc692;
    color:#ff7200;
}

.bupiz-mode-option--customer:hover,
.bupiz-mode-option--customer:focus-visible{
    border-color:#ff8400;
    box-shadow:0 18px 36px rgba(255,132,0,.13);
}

.bupiz-mode-option--seller{
    background:linear-gradient(145deg,#fff 0%,#f4f8ff 100%);
    border:1.5px solid #b9cdf8;
    color:#174ea6;
}

.bupiz-mode-option--seller:hover,
.bupiz-mode-option--seller:focus-visible{
    border-color:#245fd3;
    box-shadow:0 18px 36px rgba(36,95,211,.13);
}

.bupiz-mode-option__icon{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:50%;
    margin-bottom:18px;
}

.bupiz-mode-option--customer .bupiz-mode-option__icon{
    background:#ffead8;
}

.bupiz-mode-option--seller .bupiz-mode-option__icon{
    background:#e5efff;
}

.bupiz-mode-option__icon svg{
    width:46px;
    height:46px;
}

.bupiz-mode-option__title{
    color:#111827;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.025em;
}

.bupiz-mode-option--customer .bupiz-mode-option__title strong{color:#ff7200;}
.bupiz-mode-option--seller .bupiz-mode-option__title strong{color:#245fd3;}

.bupiz-mode-option__subtitle{
    color:#667085;
    font-size:15px;
    margin-top:7px;
}

.bupiz-mode-option__cta{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    margin-top:23px;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    font-weight:800;
    box-shadow:0 10px 22px rgba(15,23,42,.10);
}

.bupiz-mode-option--customer .bupiz-mode-option__cta{
    background:linear-gradient(90deg,#ff8400,#ff6b00);
}

.bupiz-mode-option--seller .bupiz-mode-option__cta{
    background:linear-gradient(90deg,#174ea6,#135ee9);
}

.bupiz-mode-remember{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    margin:27px auto 0;
    color:#475467;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    user-select:none;
}

.bupiz-mode-remember input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.bupiz-mode-checkbox{
    position:relative;
    width:23px;
    height:23px;
    flex:0 0 23px;
    border:1.6px solid #98a2b3;
    border-radius:6px;
    background:#fff;
}

.bupiz-mode-remember input:checked + .bupiz-mode-checkbox{
    border-color:#ff8400;
    background:#ff8400;
}

.bupiz-mode-remember input:checked + .bupiz-mode-checkbox::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:6px;
    height:12px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.bupiz-mode-remember input:focus-visible + .bupiz-mode-checkbox{
    outline:3px solid rgba(255,132,0,.20);
    outline-offset:2px;
}

@media (max-width:720px){
    .bupiz-mode-dialog{
        align-items:flex-end;
        padding:14px 10px max(14px, env(safe-area-inset-bottom));
    }

    .bupiz-mode-card{
        width:100%;
        max-height:calc(100dvh - 20px);
        overflow:auto;
        border-radius:24px 24px 18px 18px;
        padding:25px 18px 21px;
    }

    .bupiz-mode-close{
        width:38px;
        height:38px;
        top:16px;
        right:16px;
        font-size:25px;
    }

    .bupiz-mode-brand{
        margin-bottom:10px;
    }

    .bupiz-mode-brand__bag{
        width:38px;
        height:38px;
        font-size:21px;
    }

    .bupiz-mode-head{
        margin-bottom:19px;
        padding:0 20px;
    }

    .bupiz-mode-head h2{
        font-size:26px;
    }

    .bupiz-mode-head p{
        font-size:14px;
        margin-top:7px;
    }

    .bupiz-mode-options{
        grid-template-columns:1fr;
        gap:12px;
    }

    .bupiz-mode-option{
        display:grid;
        grid-template-columns:56px 1fr;
        grid-template-areas:
            "icon title"
            "icon subtitle"
            "cta cta";
        column-gap:15px;
        align-items:center;
        text-align:left;
        padding:16px;
        border-radius:16px;
    }

    .bupiz-mode-option__icon{
        grid-area:icon;
        width:54px;
        height:54px;
        margin:0;
    }

    .bupiz-mode-option__icon svg{
        width:34px;
        height:34px;
    }

    .bupiz-mode-option__title{
        grid-area:title;
        font-size:19px;
        align-self:end;
    }

    .bupiz-mode-option__subtitle{
        grid-area:subtitle;
        font-size:13px;
        margin:2px 0 0;
        align-self:start;
    }

    .bupiz-mode-option__cta{
        grid-area:cta;
        min-height:44px;
        margin-top:14px;
        font-size:14px;
    }

    .bupiz-mode-remember{
        justify-content:flex-start;
        margin-top:18px;
        font-size:13px;
        padding:0 4px;
    }
}

@media (max-width:380px){
    .bupiz-mode-card{padding-left:14px;padding-right:14px;}
    .bupiz-mode-head h2{font-size:23px;}
    .bupiz-mode-option__title{font-size:17px;}
}