/* =========================================================
   XXDATE WALLET UI - FIXED HEADER / MOBILE / MODAL
   ========================================================= */

.xx-wallet-wrap{
    display:flex;
    align-items:center;
    flex-shrink:0;
    margin-left:18px;
    margin-right:10px;
    position:relative;
    z-index:10002;
}

.xx-wallet-button{
    appearance:none;
    border:1px solid #3a1025;
    background:#0b080b;
    color:#fff;
    min-width:125px;
    height:52px;
    padding:7px 12px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    position:relative;
    z-index:10003;
    transition:.2s ease;
}

.xx-wallet-button:hover{
    border-color:#ff1975;
    box-shadow:0 0 20px rgba(255,25,117,.18);
}

.xx-wallet-icon{
    width:31px;
    height:31px;
    min-width:31px;
    border-radius:50%;
    background:#ff1975;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:900;
}

.xx-wallet-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    line-height:1;
}

.xx-wallet-info small{
    color:#777;
    font-size:9px;
    margin-bottom:4px;
}

.xx-wallet-info strong{
    color:#fff;
    font-size:15px;
}

.xx-wallet-plus{
    color:#ff1975;
    font-size:22px;
    font-weight:900;
    margin-left:auto;
}

/* =========================================================
   MODAL
   ========================================================= */

.xx-wallet-modal{
    position:fixed;
    inset:0;
    z-index:9000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:90px 20px 30px;
    overflow-y:auto;
}

.xx-wallet-modal.xx-wallet-open{
    display:flex;
}

.xx-wallet-overlay{
    position:fixed;
    inset:0;
    z-index:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(4px);
}

/* KEEP SITE HEADER ABOVE WALLET OVERLAY */

.site-header,
.site-header *,
header.site-header,
header.site-header *{
    position:relative;
    z-index:10001;
}

/* wallet itself */

.xx-wallet-box{
    position:relative;
    z-index:9001;
    width:min(520px,100%);
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    overflow-x:hidden;
    background:#0b080b;
    border:1px solid #ff1975;
    border-radius:22px;
    padding:28px;
    margin:0 auto;
    box-shadow:
        0 25px 80px rgba(0,0,0,.85),
        0 0 45px rgba(255,25,117,.14);
}

.xx-wallet-close{
    position:absolute;
    right:14px;
    top:12px;
    z-index:5;
    width:34px;
    height:34px;
    border:1px solid #321525;
    border-radius:50%;
    background:#140d12;
    color:#fff;
    font-size:22px;
    line-height:30px;
    cursor:pointer;
}

.xx-wallet-close:hover{
    border-color:#ff1975;
    color:#ff1975;
}

.xx-wallet-title{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:20px;
    padding-right:40px;
}

.xx-wallet-title-icon{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:50%;
    background:#ff1975;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:900;
}

.xx-wallet-title h3{
    margin:0;
    color:#fff;
    font-size:24px;
}

.xx-wallet-title p{
    margin:4px 0 0;
    color:#888;
    font-size:13px;
}

.xx-wallet-current{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    background:#120b10;
    border:1px solid #24121c;
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:18px;
}

.xx-wallet-current span{
    color:#999;
    font-size:13px;
}

.xx-wallet-current strong{
    color:#ff1975;
    font-size:15px;
    white-space:nowrap;
}

.xx-wallet-plans{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.xx-wallet-plan{
    position:relative;
    appearance:none;
    border:1px solid #30202a;
    background:#100b0f;
    border-radius:16px;
    padding:18px 12px 14px;
    color:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    transition:.2s ease;
}

.xx-wallet-plan:hover{
    border-color:#ff1975;
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(255,25,117,.12);
}

.xx-wallet-popular{
    border-color:#ff1975;
    background:linear-gradient(180deg,#180b13,#100b0f);
}

.xx-popular-badge{
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    background:#ff1975;
    color:#fff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.7px;
    border-radius:20px;
    padding:4px 8px;
}

.xx-plan-price{
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.xx-wallet-plan strong{
    color:#ff1975;
    font-size:15px;
}

.xx-wallet-plan small{
    color:#777;
    font-size:10px;
}

.xx-plan-buy{
    margin-top:7px;
    background:#ff1975;
    color:#fff;
    border-radius:8px;
    padding:7px 10px;
    font-size:11px;
    font-weight:800;
}

.xx-wallet-message{
    min-height:20px;
    margin-top:16px;
    text-align:center;
    color:#00e890;
    font-size:13px;
    font-weight:700;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .xx-wallet-wrap{
        margin-left:3px;
        margin-right:3px;
        flex-shrink:0;
    }

    .xx-wallet-button{
        min-width:91px;
        width:auto;
        height:44px;
        padding:5px 8px;
        border-radius:12px;
        gap:6px;
    }

    .xx-wallet-icon{
        width:27px;
        min-width:27px;
        height:27px;
        font-size:14px;
    }

    .xx-wallet-info small{
        font-size:8px;
    }

    .xx-wallet-info strong{
        font-size:13px;
    }

    .xx-wallet-plus{
        display:none;
    }

    /* header stays visible */

    .site-header,
    header.site-header{
        position:relative;
        z-index:10001 !important;
    }

    /* modal starts BELOW header */

    .xx-wallet-modal{
        z-index:9000;
        align-items:flex-start;
        padding:
            78px
            12px
            calc(25px + env(safe-area-inset-bottom));
        overflow-y:auto;
    }

    .xx-wallet-box{
        width:100%;
        max-width:430px;
        max-height:calc(100vh - 105px);
        border-radius:18px;
        padding:20px 14px;
        margin:0 auto;
    }

    .xx-wallet-title{
        margin-bottom:16px;
    }

    .xx-wallet-title h3{
        font-size:20px;
    }

    .xx-wallet-title p{
        font-size:12px;
    }

    .xx-wallet-title-icon{
        width:40px;
        min-width:40px;
        height:40px;
        font-size:19px;
    }

    .xx-wallet-current{
        padding:12px;
        margin-bottom:14px;
    }

    .xx-wallet-plans{
        grid-template-columns:1fr;
        gap:9px;
    }

    .xx-wallet-plan{
        min-height:96px;
        padding:14px 10px;
    }

    .xx-plan-price{
        font-size:21px;
    }

    .xx-wallet-plan strong{
        font-size:14px;
    }

    .xx-plan-buy{
        margin-top:3px;
        padding:6px 12px;
    }
}

/* very small phones */

@media(max-width:380px){

    .xx-wallet-button{
        min-width:82px;
        padding:4px 6px;
    }

    .xx-wallet-info strong{
        font-size:12px;
    }

    .xx-wallet-modal{
        padding-left:8px;
        padding-right:8px;
    }

    .xx-wallet-box{
        padding:18px 11px;
    }
}

/* =========================================================
   XXDATE - WALLET NEXT TO LOGO
   ========================================================= */

/* Header becomes positioning container */
header.topbar{
    position:relative !important;
    width:100%;
}

/* Wallet is pinned beside the XXDATE logo */
header.topbar .xx-wallet-wrap{
    position:absolute !important;
    left:170px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    z-index:10020 !important;
}

/* Keep wallet compact */
header.topbar .xx-wallet-button{
    position:relative !important;
    margin:0 !important;
}

/* Desktop */
@media(min-width:701px){

    header.topbar .xx-wallet-wrap{
        left:310px !important;
    }

    header.topbar .xx-wallet-button{
        min-width:125px !important;
        height:48px !important;
    }
}

/* Tablet */
@media(min-width:701px) and (max-width:1100px){

    header.topbar .xx-wallet-wrap{
        left:190px !important;
    }
}

/* Mobile */
@media(max-width:700px){

    header.topbar{
        min-height:64px !important;
        height:64px !important;
        display:block !important;
    }

    header.topbar .xx-wallet-wrap{
        left:112px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

        width:auto !important;
        margin:0 !important;
    }

    header.topbar .xx-wallet-button{
        min-width:88px !important;
        width:88px !important;
        height:42px !important;

        padding:4px 7px !important;
        border-radius:11px !important;

        gap:5px !important;
    }

    header.topbar .xx-wallet-icon{
        width:27px !important;
        min-width:27px !important;
        height:27px !important;
        font-size:14px !important;
    }

    header.topbar .xx-wallet-info{
        display:flex !important;
    }

    header.topbar .xx-wallet-info small{
        font-size:7px !important;
        margin-bottom:3px !important;
    }

    header.topbar .xx-wallet-info strong{
        font-size:12px !important;
    }

    header.topbar .xx-wallet-plus{
        display:none !important;
    }
}

/* Small mobile */
@media(max-width:380px){

    header.topbar .xx-wallet-wrap{
        left:105px !important;
    }

    header.topbar .xx-wallet-button{
        min-width:82px !important;
        width:82px !important;
    }
}

/* Never allow wallet to create a second header row */
header.topbar .xx-wallet-wrap,
header.topbar .xx-wallet-button{
    flex-shrink:0 !important;
    float:none !important;
    clear:none !important;
}

/* =========================================================
   XXDATE WALLET — EXACT HEADER CENTER
   ========================================================= */

header.topbar .xx-wallet-wrap{
    position:absolute !important;

    left:50% !important;
    right:auto !important;
    top:50% !important;

    transform:translate(-50%, -50%) !important;

    margin:0 !important;
    padding:0 !important;

    z-index:10050 !important;
}

/* Desktop */
@media (min-width:701px){
    header.topbar .xx-wallet-wrap{
        left:50% !important;
        top:50% !important;
    }
}

/* Mobile */
@media (max-width:700px){
    header.topbar{
        position:relative !important;
    }

    header.topbar .xx-wallet-wrap{
        left:50% !important;
        top:50% !important;

        transform:translate(-50%, -50%) !important;
    }
}

/* Small mobile */
@media (max-width:380px){
    header.topbar .xx-wallet-wrap{
        left:50% !important;
    }
}