/*==================================================
 VenYa 5.0
 style.css
 Producción
==================================================*/

@import url("variables.css");

/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

font-size:16px;
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;

}

body{

font-family:var(--font-family);

background:var(--background);

color:var(--text);

min-height:100vh;

overflow-x:hidden;

line-height:1.5;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

padding-top:env(safe-area-inset-top);

padding-bottom:env(safe-area-inset-bottom);

}

/*==================================================
IMAGES
==================================================*/

img{

display:block;

max-width:100%;

height:auto;

}

/*==================================================
LINKS
==================================================*/

a{

color:inherit;

text-decoration:none;

}

/*==================================================
LIST
==================================================*/

ul,
ol{

list-style:none;

}

/*==================================================
BUTTONS
==================================================*/

button{

font-family:inherit;

cursor:pointer;

border:none;

outline:none;

background:none;

}

/*==================================================
INPUTS
==================================================*/

input,
textarea,
select{

font-family:inherit;

outline:none;

border:none;

background:none;

}

/*==================================================
MAIN APP
==================================================*/

#app{

position:relative;

width:100%;

max-width:var(--max-width);

margin:auto;

min-height:100vh;

background:var(--gradient-home);

overflow:hidden;

}

/*==================================================
GLOBAL CONTAINER
==================================================*/

.container{

width:100%;

max-width:1400px;

margin:auto;

padding-left:20px;

padding-right:20px;

}

/*==================================================
SECTION
==================================================*/

.section{

width:100%;

padding-top:25px;

padding-bottom:40px;

}

/*==================================================
TITLE
==================================================*/

.sectionTitle{

font-size:var(--font-2xl);

font-weight:700;

color:var(--text);

margin-bottom:8px;

}

.sectionSubtitle{

font-size:var(--font-md);

color:var(--text-secondary);

margin-bottom:30px;

}

/*==================================================
CARD
==================================================*/

.card{

background:var(--surface);

border-radius:var(--card-radius);

padding:22px;

box-shadow:var(--shadow-sm);

border:1px solid rgba(255,255,255,.55);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-lg);

}

/*==================================================
PRIMARY BUTTON
==================================================*/

.btnPrimary{

width:100%;

height:var(--button-height);

border-radius:var(--button-radius);

background:var(--gradient-button);

color:#fff;

font-size:16px;

font-weight:600;

transition:var(--transition);

box-shadow:var(--shadow-neon);

}

.btnPrimary:hover{

transform:translateY(-2px);

}

.btnPrimary:active{

transform:scale(.98);

}

/*==================================================
SECONDARY BUTTON
==================================================*/

.btnSecondary{

width:100%;

height:52px;

border-radius:18px;

background:#fff;

border:1px solid var(--border);

font-weight:600;

transition:var(--transition);

}

.btnSecondary:hover{

background:var(--background-soft);

}

/*==================================================
INPUT
==================================================*/

.input{

width:100%;

height:var(--input-height);

padding:0 18px;

border-radius:var(--input-radius);

background:#fff;

border:1px solid var(--border);

transition:var(--transition);

font-size:15px;

}

.input:focus{

border-color:var(--primary);

box-shadow:0 0 15px rgba(0,184,255,.20);

}

/*==================================================
GLASS
==================================================*/

.glass{

background:rgba(255,255,255,.68);

backdrop-filter:var(--glass-blur);

-webkit-backdrop-filter:var(--glass-blur);

border:var(--glass-border);

}

/*==================================================
BACKGROUND BUBBLES
==================================================*/

.backgroundBubbles{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.backgroundBubbles span{

position:absolute;

border-radius:50%;

background:rgba(0,184,255,.10);

filter:blur(40px);

animation:floatBubble 16s linear infinite;

}

.backgroundBubbles span:nth-child(1){

width:260px;
height:260px;

top:-60px;
left:-40px;

}

.backgroundBubbles span:nth-child(2){

width:320px;
height:320px;

right:-120px;
top:30%;

}

.backgroundBubbles span:nth-child(3){

width:220px;
height:220px;

bottom:-80px;
left:40%;

}

/*==================================================
HEADER
==================================================*/

.header{

position:sticky;

top:0;

left:0;

width:100%;

height:var(--header-height);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 22px;

background:rgba(255,255,255,.72);

backdrop-filter:blur(24px);

-webkit-backdrop-filter:blur(24px);

border-bottom:1px solid rgba(255,255,255,.45);

z-index:var(--z-header);

}

.headerTitle{

font-size:22px;

font-weight:700;

color:var(--text);

}

.headerActions{

display:flex;

align-items:center;

gap:12px;

}

/*==================================================
BOTTOM NAVBAR
==================================================*/

.bottomNav{

position:fixed;

left:50%;

bottom:18px;

transform:translateX(-50%);

width:min(94%,520px);

height:74px;

background:rgba(255,255,255,.82);

backdrop-filter:blur(26px);

-webkit-backdrop-filter:blur(26px);

border-radius:30px;

display:flex;

align-items:center;

justify-content:space-around;

box-shadow:0 15px 45px rgba(15,23,42,.12);

border:1px solid rgba(255,255,255,.55);

z-index:var(--z-navbar);

padding-bottom:env(safe-area-inset-bottom);

}

.bottomNav a{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:4px;

color:var(--text-secondary);

font-size:11px;

font-weight:600;

transition:var(--transition);

}

.bottomNav a.active{

color:var(--primary);

}

.bottomNav a i{

font-size:22px;

}

/*==================================================
GRID
==================================================*/

.grid{

display:grid;

gap:20px;

}

.grid2{

grid-template-columns:repeat(2,1fr);

}

.grid3{

grid-template-columns:repeat(3,1fr);

}

.grid4{

grid-template-columns:repeat(4,1fr);

}

/*==================================================
HORIZONTAL SCROLL
==================================================*/

.horizontalScroll{

display:flex;

gap:18px;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding-bottom:10px;

scrollbar-width:none;

}

.horizontalScroll::-webkit-scrollbar{

display:none;

}

.horizontalCard{

flex:0 0 300px;

scroll-snap-align:start;

}

/*==================================================
SEARCH
==================================================*/

.searchBox{

display:flex;

align-items:center;

gap:12px;

height:56px;

padding:0 20px;

background:#fff;

border-radius:22px;

box-shadow:var(--shadow-sm);

margin:20px 0;

}

.searchBox input{

flex:1;

font-size:15px;

}

/*==================================================
CHIPS
==================================================*/

.chips{

display:flex;

gap:10px;

overflow-x:auto;

padding-bottom:8px;

scrollbar-width:none;

}

.chips::-webkit-scrollbar{

display:none;

}

.chip{

padding:10px 18px;

border-radius:999px;

background:#fff;

border:1px solid var(--border);

font-size:14px;

white-space:nowrap;

transition:var(--transition);

}

.chip.active{

background:var(--gradient-button);

color:#fff;

border:none;

}

/*==================================================
LOADER
==================================================*/

.loader{

width:54px;

height:54px;

border-radius:50%;

border:4px solid rgba(0,184,255,.15);

border-top-color:var(--primary);

animation:spin .8s linear infinite;

margin:auto;

}

/*==================================================
SKELETON
==================================================*/

.skeleton{

background:linear-gradient(
90deg,
#edf2f7,
#ffffff,
#edf2f7
);

background-size:300%;

animation:skeleton 1.4s infinite;

border-radius:20px;

}

/*==================================================
TOAST
==================================================*/

.toast{

position:fixed;

left:50%;

bottom:110px;

transform:translateX(-50%);

padding:15px 22px;

background:#0F172A;

color:#fff;

border-radius:18px;

font-size:14px;

box-shadow:var(--shadow-lg);

z-index:var(--z-toast);

}

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

.modal{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(15,23,42,.45);

padding:20px;

z-index:var(--z-modal);

}

.modalContent{

width:100%;

max-width:460px;

background:#fff;

border-radius:28px;

padding:28px;

box-shadow:var(--shadow-lg);

}

/*==================================================
BADGE
==================================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 14px;

border-radius:999px;

font-size:12px;

font-weight:600;

background:rgba(0,184,255,.10);

color:var(--primary);

}

/*==================================================
DIVIDER
==================================================*/

.divider{

width:100%;

height:1px;

background:var(--border);

margin:20px 0;

}

/*==================================================
KEYFRAMES
==================================================*/

@keyframes spin{

to{

transform:rotate(360deg);

}

}

@keyframes skeleton{

0%{

background-position:300% 0;

}

100%{

background-position:-300% 0;

}

}

@keyframes floatBubble{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
SPLASH
==================================================*/

.splash{

position:fixed;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:var(--gradient-home);

z-index:99999;

overflow:hidden;

}

.splashLogo{

width:140px;

height:140px;

border-radius:35px;

box-shadow:var(--shadow-lg);

animation:fadeUp .8s ease;

}

.splashTitle{

margin-top:28px;

font-size:34px;

font-weight:700;

color:var(--text);

letter-spacing:.5px;

}

.splashSubtitle{

margin-top:10px;

font-size:16px;

color:var(--text-secondary);

}

.splashLoader{

margin-top:50px;

}

/*==================================================
AUTH
==================================================*/

.authPage{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:35px 20px;

}

.authCard{

width:100%;

max-width:430px;

padding:35px;

border-radius:30px;

background:#fff;

box-shadow:var(--shadow-md);

animation:fadeUp .5s;

}

.authLogo{

width:90px;

margin:auto;

margin-bottom:24px;

}

.authTitle{

font-size:30px;

font-weight:700;

text-align:center;

margin-bottom:10px;

}

.authSubtitle{

text-align:center;

color:var(--text-secondary);

margin-bottom:28px;

}

.authForm{

display:flex;

flex-direction:column;

gap:18px;

}

.authFooter{

margin-top:28px;

text-align:center;

font-size:14px;

}

/*==================================================
HOME
==================================================*/

.homeHeader{

margin-bottom:28px;

}

.welcomeText{

font-size:15px;

color:var(--text-secondary);

}

.userName{

font-size:32px;

font-weight:700;

margin-top:4px;

}

.quickActions{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:28px;

}

.actionCard{

height:150px;

border-radius:24px;

background:#fff;

box-shadow:var(--shadow-sm);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:var(--transition);

}

.actionCard:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

}

/*==================================================
 HOME 5.0
==================================================*/

.appSection{

    width:100%;

    min-height:100vh;

    padding-bottom:120px;

    animation:fadeUp .35s ease;

}


.homeMain{

    padding-top:10px;

}


.homeHeader{

    padding-top:24px;

}


.homeHeaderTop{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.homeGreeting{

    min-width:0;

}


.welcomeText{

    margin-bottom:3px;

}


.userName{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/*==================================================
 HOME ICON BUTTON
==================================================*/

.iconButton{

    position:relative;

    width:50px;

    height:50px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.iconButton:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}


.notificationIcon{

    font-size:22px;

    color:var(--primary);

}


.notificationBadge{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:20px;

    height:20px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:var(--danger);

    color:#fff;

    font-size:10px;

    font-weight:700;

    border:2px solid #fff;

}


/*==================================================
 LOCATION
==================================================*/

.locationBar{

    width:100%;

    min-height:62px;

    margin-top:20px;

    padding:10px 15px;

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;

    border-radius:20px;

    background:rgba(255,255,255,.82);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}


.locationIcon{

    width:38px;

    height:38px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

}


.locationContent{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

}


.locationContent small{

    font-size:11px;

    color:var(--text-secondary);

}


.locationContent strong{

    margin-top:2px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:14px;

}


.locationArrow{

    color:var(--text-light);

    font-size:24px;

}


/*==================================================
 HOME BLOCK
==================================================*/

.homeBlock{

    margin-top:38px;

}


.sectionHeading{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;

}


.sectionEyebrow{

    margin-bottom:3px;

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}


/*==================================================
 ACTION CARDS
==================================================*/

.actionCard{

    min-width:0;

    padding:20px;

    align-items:flex-start;

    justify-content:flex-end;

    text-align:left;

}


.actionCard strong{

    margin-top:14px;

    font-size:17px;

}


.actionCard span:last-child{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:12px;

}


.actionIcon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    font-size:23px;

}


.actionIconMap{

    background:rgba(0,184,255,.10);

    color:var(--primary);

}


.actionIconMarket{

    background:rgba(0,229,255,.12);

    color:var(--primary-dark);

}


.actionIconWork{

    background:rgba(34,197,94,.10);

    color:var(--success);

}


.actionIconDelivery{

    background:rgba(245,158,11,.10);

    color:var(--warning);

}


/*==================================================
 FEATURE CARDS
==================================================*/

.featureCard{

    min-height:250px;

    padding:24px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7fcff
        );

}


.featureNumber{

    color:var(--primary-light);

    font-size:12px;

    font-weight:700;

}


.featureIcon{

    width:50px;

    height:50px;

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

    font-size:24px;

}


.featureCard h3{

    margin-top:18px;

    font-size:20px;

}


.featureCard p{

    margin-top:7px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.6;

}


/*==================================================
 MARKETPLACE BANNER
==================================================*/

.marketplaceHomeBanner{

    position:relative;

    min-height:300px;

    padding:30px;

    overflow:hidden;

    display:flex;

    align-items:center;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #eefaff
        );

    border:1px solid rgba(0,184,255,.12);

    box-shadow:var(--shadow-md);

}


.marketplaceHomeContent{

    position:relative;

    z-index:2;

    width:min(100%,600px);

}


.marketplaceHomeContent h2{

    margin-top:14px;

    font-size:clamp(26px,5vw,42px);

    line-height:1.1;

}


.marketplaceHomeContent p{

    max-width:550px;

    margin:15px 0 24px;

    color:var(--text-secondary);

}


.marketplaceHomeContent .btnPrimary{

    width:auto;

    min-width:220px;

    padding:0 24px;

}


.marketplaceGlow{

    position:absolute;

    width:300px;

    height:300px;

    right:-100px;

    top:-80px;

    border-radius:50%;

    background:rgba(0,184,255,.18);

    filter:blur(45px);

}


/*==================================================
 NEARBY
==================================================*/

.nearbyPlaceholder{

    min-height:210px;

    padding:16px;

}


.nearbySkeleton{

    width:100%;

    height:120px;

    border-radius:18px;

}


.nearbySkeletonText{

    width:75%;

    height:16px;

    margin-top:15px;

}


.nearbySkeletonSmall{

    width:45%;

    height:12px;

    margin-top:9px;

}


/*==================================================
 ADVERTISING
==================================================*/

.advertisingCard{

    position:relative;

    padding:30px;

    overflow:hidden;

    border-radius:28px;

    background:#0F172A;

    color:#fff;

    box-shadow:var(--shadow-lg);

}


.advertisingBadge{

    display:inline-flex;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(0,229,255,.15);

    color:var(--primary-neon);

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

}


.advertisingCard h2{

    max-width:600px;

    margin-top:16px;

    font-size:clamp(24px,5vw,38px);

    line-height:1.15;

}


.advertisingCard p{

    max-width:600px;

    margin:14px 0;

    color:#CBD5E1;

}


.advertisingPrice{

    display:flex;

    align-items:baseline;

    gap:6px;

    margin:20px 0;

}


.advertisingPrice strong{

    font-size:38px;

    color:var(--primary-neon);

}


.advertisingPrice span{

    color:#CBD5E1;

}


.advertisingCard .btnPrimary{

    width:auto;

    min-width:230px;

    padding:0 25px;

}


.advertisingCard small{

    display:block;

    margin-top:14px;

    color:#94A3B8;

    font-size:11px;

}


/*==================================================
 SUPPORT
==================================================*/

.supportCard{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:26px;

    border-radius:26px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}


.supportCard h2{

    margin-top:4px;

    font-size:23px;

}


.supportCard p:not(.sectionEyebrow){

    margin-top:5px;

    color:var(--text-secondary);

}


.supportActions{

    display:flex;

    gap:10px;

    flex-shrink:0;

}


.supportActions .btnSecondary{

    width:auto;

    padding:0 20px;

}


/*==================================================
 LEGAL
==================================================*/

.legalSection{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    padding:30px 10px 10px;

    color:var(--text-light);

    font-size:11px;

}


.legalLink{

    color:var(--text-secondary);

    font-size:11px;

}


.legalLink:hover{

    color:var(--primary);

}


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

@media (max-width:600px){

    .homeHeader{

        padding-top:20px;

    }


    .homeBlock{

        margin-top:30px;

    }


    .quickActions{

        gap:12px;

    }


    .actionCard{

        min-height:150px;

        padding:16px;

    }


    .actionCard strong{

        font-size:15px;

    }


    .featureCard{

        min-height:235px;

    }


    .marketplaceHomeBanner{

        min-height:330px;

        padding:25px;

    }


    .marketplaceHomeContent .btnPrimary{

        width:100%;

    }


    .advertisingCard{

        padding:25px;

    }


    .advertisingCard .btnPrimary{

        width:100%;

    }


    .supportCard{

        flex-direction:column;

        align-items:stretch;

    }


    .supportActions{

        display:grid;

        grid-template-columns:1fr 1fr;

    }


    .supportActions .btnSecondary{

        width:100%;

    }

}


@media (min-width:768px){

    .homeHeader,
    .homeMain{

        padding-left:30px;

        padding-right:30px;

    }


    .quickActions{

        grid-template-columns:

            repeat(4,1fr);

    }

}


@media (min-width:1200px){

    .homeHeader,
    .homeMain{

        padding-left:50px;

        padding-right:50px;

    }

}


/*==================================================
  SPLASH CONTENT
==================================================*/

.splashContent{

    position:relative;

    z-index:2;

    width:min(90%,420px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin:auto;

}


/*==================================================
  SPLASH LOGO
==================================================*/

.splashLogoWrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    width:150px;

    height:150px;

}


/*==================================================
  SPLASH LOADING TEXT
==================================================*/

.splashLoadingText{

    margin-top:16px;

    font-size:13px;

    color:var(--text-secondary);

    opacity:.8;

}

/*==================================================
MAP
==================================================*/

.mapContainer{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

}

#map{

width:100%;

height:100%;

}

.mapControls{

position:absolute;

top:20px;

left:20px;

right:20px;

display:flex;

flex-direction:column;

gap:14px;

z-index:50;

}

.floatingButton{

width:58px;

height:58px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow-md);

}

/*==================================================
 MAP VENYA 5.0
==================================================*/

.mapSection{

    position:relative;

    width:100%;

    height:100vh;

    min-height:600px;

    padding:0;

    overflow:hidden;

}


.mapContainer{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#EAF8FC;

}


.mapCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}


/*==================================================
 TOP CONTROLS
==================================================*/

.mapTopControls{

    position:absolute;

    top:18px;

    left:18px;

    right:18px;

    z-index:20;

    display:flex;

    align-items:center;

    gap:10px;

}


.mapSearchWrapper{

    position:relative;

    flex:1;

    max-width:700px;

    height:54px;

    display:flex;

    align-items:center;

    background:rgba(255,255,255,.94);

    border:1px solid rgba(255,255,255,.8);

    border-radius:18px;

    box-shadow:var(--shadow-md);

    backdrop-filter:blur(16px);

}


.mapSearchIcon{

    margin-left:16px;

    color:var(--text-secondary);

    font-size:24px;

}


.mapSearch{

    width:100%;

    height:100%;

    padding:0 42px 0 12px;

    border:0;

    outline:0;

    background:transparent;

    color:var(--text);

    font-family:inherit;

    font-size:14px;

}


.mapSearch::placeholder{

    color:var(--text-light);

}


.mapSearchClear{

    position:absolute;

    right:8px;

    width:38px;

    height:38px;

    border-radius:12px;

    color:var(--text-secondary);

    font-size:22px;

}


/*==================================================
 FLOATING BUTTONS
==================================================*/

.mapFloatingButton{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    background:rgba(255,255,255,.94);

    border:1px solid rgba(255,255,255,.8);

    box-shadow:var(--shadow-md);

    color:var(--primary);

    font-size:22px;

    backdrop-filter:blur(16px);

    transition:var(--transition);

}


.mapFloatingButton:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-lg);

}


.mapLocationControl{

    position:absolute;

    right:18px;

    bottom:150px;

    z-index:20;

}


.mapStyleControl{

    position:absolute;

    right:18px;

    bottom:215px;

    z-index:21;

}


.mapStyleMenu{

    position:absolute;

    right:0;

    bottom:62px;

    width:150px;

    padding:7px;

    border-radius:17px;

    background:rgba(255,255,255,.96);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(15px);

}


.mapStyleOption{

    width:100%;

    padding:11px;

    border-radius:11px;

    text-align:left;

    font-size:13px;

    color:var(--text-secondary);

}


.mapStyleOption.active,
.mapStyleOption:hover{

    background:rgba(0,184,255,.09);

    color:var(--primary);

}


/*==================================================
 FILTER PANEL
==================================================*/

.mapFilterPanel{

    position:absolute;

    top:84px;

    right:18px;

    z-index:30;

    width:min(92vw,350px);

    max-height:calc(100vh - 120px);

    overflow:auto;

    padding:22px;

    border-radius:25px;

    background:rgba(255,255,255,.97);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(20px);

}


.mapFilterHeader{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:25px;

}


.mapFilterHeader h2{

    margin-top:3px;

    font-size:22px;

}


.closeButton{

    width:36px;

    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:21px;

}


.filterGroup{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:22px;

}


.filterTitle{

    margin-bottom:3px;

    font-size:13px;

    font-weight:700;

}


.filterOption{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:12px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:13px;

}


.filterOption input{

    width:17px;

    height:17px;

    accent-color:var(--primary);

}


.filterSelect{

    width:100%;

    height:48px;

    padding:0 12px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    color:var(--text);

    font-family:inherit;

}


/*==================================================
 MAP LEGEND
==================================================*/

.mapLegend{

    position:absolute;

    left:18px;

    bottom:150px;

    z-index:15;

    display:flex;

    flex-direction:column;

    gap:7px;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,.90);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(12px);

}


.legendItem{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:10px;

    color:var(--text-secondary);

}


.legendDot{

    width:9px;

    height:9px;

    border-radius:50%;

}


.marketplaceDot{

    background:#00B8FF;

}


.businessDot{

    background:#7C3AED;

}


.collaboratorDot{

    background:#22C55E;

}


/*==================================================
 LOCATION PERMISSION
==================================================*/

.mapPermissionCard{

    position:absolute;

    left:50%;

    bottom:105px;

    z-index:40;

    width:min(90%,430px);

    transform:translateX(-50%);

    padding:22px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    border-radius:25px;

    background:rgba(255,255,255,.97);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(18px);

}


.permissionIcon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

    font-size:27px;

}


.permissionContent h2{

    margin-top:14px;

    font-size:21px;

}


.permissionContent p{

    margin-top:7px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.5;

}


.mapPermissionCard .btnPrimary{

    margin-top:18px;

}


/*==================================================
 MARKETPLACE REQUEST BUTTON
==================================================*/

.mapRequestButton{

    position:absolute;

    left:50%;

    bottom:88px;

    z-index:20;

    transform:translateX(-50%);

    min-height:52px;

    padding:0 20px;

    display:flex;

    align-items:center;

    gap:9px;

    border-radius:999px;

    background:#0F172A;

    color:#fff;

    box-shadow:var(--shadow-lg);

    font-size:13px;

    font-weight:600;

    transition:var(--transition);

}


.mapRequestButton:hover{

    transform:translateX(-50%) translateY(-2px);

}


.mapRequestIcon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary-neon);

    color:#0F172A;

    font-size:20px;

}


/*==================================================
 STATUS
==================================================*/

.mapUserStatus{

    position:absolute;

    left:18px;

    top:84px;

    z-index:15;

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 11px;

    border-radius:999px;

    background:rgba(255,255,255,.85);

    box-shadow:var(--shadow-sm);

    backdrop-filter:blur(12px);

    color:var(--text-secondary);

    font-size:10px;

}


.statusIndicator{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#22C55E;

}


/*==================================================
 PLACE CARD
==================================================*/

.mapPlaceCard{

    position:absolute;

    left:18px;

    right:18px;

    bottom:88px;

    z-index:35;

    max-width:500px;

    margin:auto;

    overflow:hidden;

    border-radius:25px;

    background:rgba(255,255,255,.97);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(18px);

}


.mapPlaceCard > .closeButton{

    position:absolute;

    right:10px;

    top:10px;

    z-index:2;

}


.mapPlaceImage{

    width:100%;

    height:130px;

    background:

        linear-gradient(

            135deg,

            #EAFBFF,

            #DDF5FA

        );

}


.mapPlaceBody{

    padding:18px;

}


.mapPlaceBody h2{

    margin-top:10px;

    font-size:21px;

}


.mapPlaceBody p{

    margin-top:5px;

    color:var(--text-secondary);

    font-size:13px;

}


.mapPlaceMeta{

    display:flex;

    gap:18px;

    margin-top:12px;

    color:var(--text-secondary);

    font-size:12px;

}


.mapPlaceActions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:18px;

}


.mapPlaceActions button{

    width:100%;

}


/*==================================================
 MAP BOTTOM NAVIGATION
==================================================*/

.mapBottomNavigation{

    position:absolute;

    left:12px;

    right:12px;

    bottom:12px;

    z-index:50;

    height:70px;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    align-items:center;

    padding:6px;

    border-radius:24px;

    background:rgba(255,255,255,.94);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(20px);

}


.mapBottomNavigation button{

    height:58px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    border-radius:18px;

    color:var(--text-light);

    font-size:19px;

    transition:var(--transition);

}


.mapBottomNavigation button small{

    font-size:9px;

}


.mapBottomNavigation button.active{

    background:rgba(0,184,255,.10);

    color:var(--primary);

}


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

@media (max-width:600px){

    .mapTopControls{

        top:12px;

        left:12px;

        right:12px;

    }


    .mapSearchWrapper{

        height:50px;

    }


    .mapFloatingButton{

        width:48px;

        height:48px;

    }


    .mapLocationControl{

        right:12px;

        bottom:112px;

    }


    .mapStyleControl{

        right:12px;

        bottom:172px;

    }


    .mapLegend{

        left:12px;

        bottom:112px;

    }


    .mapRequestButton{

        bottom:88px;

        max-width:70%;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }


    .mapUserStatus{

        top:72px;

        left:12px;

    }


    .mapFilterPanel{

        top:72px;

        right:12px;

    }


    .mapBottomNavigation{

        left:8px;

        right:8px;

        bottom:8px;

    }


    .mapBottomNavigation button{

        height:56px;

    }


    .mapBottomNavigation button small{

        font-size:8px;

    }

}

.venya-map {
    width: 100%;
    min-height: 500px;
}

/*==================================================
WORK
==================================================*/

.workOptions{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:22px;

margin-top:25px;

}

.workCard{

padding:28px;

border-radius:26px;

background:#fff;

box-shadow:var(--shadow-sm);

transition:var(--transition);

min-height:220px;

}

.workCard:hover{

transform:translateY(-3px);

}

/*==================================================
 WORK VENYA 5.0
==================================================*/

.workSection{

    min-height:100vh;

    padding-bottom:110px;

}


.workHeader{

    padding-top:35px;

}


.workHeaderContent{

    max-width:760px;

}


.workHeader h1{

    margin-top:5px;

    font-size:clamp(32px,6vw,52px);

    line-height:1.08;

}


.workIntro{

    max-width:650px;

    margin-top:14px;

    color:var(--text-secondary);

    line-height:1.7;

}


/*==================================================
 WORK STATUS
==================================================*/

.workStatusCard{

    margin-top:32px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:16px;

    border-radius:25px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}


.workStatusIcon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

    font-size:25px;

}


.workStatusContent{

    flex:1;

    min-width:0;

}


.statusLabel{

    color:var(--text-light);

    font-size:11px;

}


.workStatusContent h2{

    margin-top:2px;

    font-size:18px;

}


.workStatusContent p{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:12px;

}


.statusPill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:30px;

    padding:0 12px;

    border-radius:999px;

    font-size:10px;

    font-weight:700;

}


.statusPillUser{

    background:rgba(0,184,255,.10);

    color:var(--primary);

}


.statusPillPending{

    background:rgba(245,158,11,.12);

    color:#B45309;

}


/*==================================================
 WORK OPTIONS
==================================================*/

.workOptions{

    margin-top:45px;

}


.workOptionGrid{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:20px;

}


.workRoleCard{

    position:relative;

    padding:28px;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.workRoleCard:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


.workRoleTop{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.workRoleIcon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:rgba(0,184,255,.10);

    font-size:28px;

}


.workRoleBadge{

    padding:7px 10px;

    border-radius:999px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:9px;

    font-weight:700;

    letter-spacing:.5px;

}


.workRoleCard h3{

    margin-top:25px;

    font-size:25px;

}


.workRoleCard > p{

    margin-top:8px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.6;

}


.workFeatureList{

    margin-top:24px;

    display:flex;

    flex-direction:column;

    gap:12px;

}


.workFeatureList li{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-secondary);

    font-size:13px;

}


.workFeatureList li span{

    color:var(--success);

    font-weight:700;

}


.workRoleButton{

    margin-top:28px;

}


/*==================================================
 DUAL ROLE
==================================================*/

.workDualRoleCard{

    margin-top:20px;

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

    border-radius:25px;

    background:

        linear-gradient(

            135deg,

            #f8fdff,

            #eefaff

        );

    border:1px solid rgba(0,184,255,.13);

}


.dualRoleIcon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#fff;

    color:var(--primary);

    box-shadow:var(--shadow-sm);

    font-size:24px;

}


.dualRoleContent h2{

    margin-top:3px;

    font-size:20px;

}


.dualRoleContent p:not(.sectionEyebrow){

    margin-top:5px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.6;

}


/*==================================================
 REQUIREMENTS
==================================================*/

.workRequirements{

    margin-top:50px;

}


.requirementsTimeline{

    position:relative;

    display:grid;

    grid-template-columns:

        repeat(4,minmax(0,1fr));

    gap:14px;

}


.requirementStep{

    position:relative;

    min-height:170px;

    padding:22px;

    border-radius:22px;

    background:#fff;

    border:1px solid var(--border);

}


.requirementNumber{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

    font-size:11px;

    font-weight:800;

}


.requirementStep h3{

    margin-top:18px;

    font-size:16px;

}


.requirementStep p{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.6;

}


/*==================================================
 APPLICATION STATUS
==================================================*/

.workApplicationStatus{

    margin-top:30px;

    padding:25px;

    border-radius:26px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}


.applicationStatusHeader{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

}


.applicationStatusHeader h2{

    margin-top:3px;

    font-size:22px;

}


.applicationProgress{

    margin-top:30px;

    display:flex;

    align-items:flex-start;

}


.progressStep{

    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:7px;

}


.progressStep span{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF2F7;

    color:var(--text-light);

    font-size:12px;

    font-weight:700;

}


.progressStep.active span{

    background:var(--primary);

    color:#fff;

}


.progressStep small{

    color:var(--text-light);

    font-size:10px;

}


.progressStep.active small{

    color:var(--primary);

    font-weight:700;

}


.progressLine{

    flex:1;

    height:2px;

    margin:18px 10px 0;

    background:#E5E7EB;

}


.applicationStatusMessage{

    margin-top:25px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.6;

}


/*==================================================
 HELP
==================================================*/

.workHelpCard{

    margin-top:35px;

    padding:27px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    border-radius:27px;

    background:#0F172A;

    color:#fff;

}


.workHelpCard h2{

    margin-top:4px;

    font-size:22px;

}


.workHelpCard p:not(.sectionEyebrow){

    margin-top:7px;

    max-width:650px;

    color:#CBD5E1;

    font-size:13px;

    line-height:1.6;

}


.workHelpCard .btnSecondary{

    width:auto;

    flex-shrink:0;

    padding:0 22px;

    background:#fff;

    color:#0F172A;

}


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

.modalOverlay{

    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(8px);

}


.modalCard{

    position:relative;

    width:min(100%,520px);

    max-height:90vh;

    overflow:auto;

    padding:30px;

    border-radius:30px;

    background:#fff;

    box-shadow:0 25px 70px rgba(15,23,42,.25);

}


.workApplicationModal > .closeButton{

    position:absolute;

    top:15px;

    right:15px;

}


.modalIcon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:19px;

    background:rgba(0,184,255,.10);

    font-size:28px;

}


.workApplicationModal h2{

    margin-top:15px;

    font-size:25px;

}


.modalDescription{

    margin-top:7px;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.6;

}


.workForm{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:17px;

}


.formField{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.formField label{

    font-size:12px;

    font-weight:700;

}


.formField input,
.formField select,
.formField textarea{

    width:100%;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    color:var(--text);

    font-family:inherit;

    font-size:14px;

}


.formField input,
.formField select{

    height:48px;

    padding:0 13px;

}


.formField textarea{

    padding:13px;

    resize:vertical;

    min-height:100px;

}


.formCheckbox{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:var(--text-secondary);

    font-size:11px;

    line-height:1.5;

}


.formCheckbox input{

    width:17px;

    height:17px;

    flex-shrink:0;

    margin-top:1px;

    accent-color:var(--primary);

}


/*==================================================
 RESPONSIVE WORK
==================================================*/

@media (max-width:850px){

    .workOptionGrid{

        grid-template-columns:1fr;

    }


    .requirementsTimeline{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }

}


@media (max-width:600px){

    .workHeader{

        padding-top:25px;

    }


    .workStatusCard{

        align-items:flex-start;

    }


    .workStatusContent p{

        line-height:1.5;

    }


    .workStatusCard .statusPill{

        display:none;

    }


    .workRoleCard{

        padding:23px;

    }


    .requirementsTimeline{

        grid-template-columns:1fr;

    }


    .requirementStep{

        min-height:auto;

    }


    .workDualRoleCard{

        align-items:flex-start;

    }


    .workHelpCard{

        flex-direction:column;

        align-items:stretch;

    }


    .workHelpCard .btnSecondary{

        width:100%;

    }


    .modalCard{

        padding:24px;

        border-radius:24px;

    }

}

/*==================================================
MARKETPLACE
==================================================*/

.marketGrid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

gap:22px;

}

.marketCard{

overflow:hidden;

border-radius:26px;

background:#fff;

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.marketCard:hover{

transform:translateY(-3px);

}

.marketImage{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

}

.marketBody{

padding:18px;

}

/*==================================================
 MARKETPLACE VENYA 5.0
==================================================*/

.marketplaceSection{

    min-height:100vh;

    padding-bottom:110px;

}


.marketplaceHeader{

    padding-top:35px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

}


.marketplaceHeaderContent{

    max-width:760px;

}


.marketplaceHeader h1{

    margin-top:5px;

    font-size:clamp(32px,6vw,52px);

    line-height:1.08;

}


.marketplaceIntro{

    margin-top:13px;

    color:var(--text-secondary);

    line-height:1.7;

}


.marketplaceHeader > .btnPrimary{

    width:auto;

    min-width:190px;

}


/*==================================================
 SEARCH
==================================================*/

.marketplaceSearchSection{

    margin-top:28px;

}


.marketplaceSearchBox{

    position:relative;

    height:58px;

    display:flex;

    align-items:center;

    border:1px solid var(--border);

    border-radius:19px;

    background:#fff;

    box-shadow:var(--shadow-sm);

}


.marketplaceSearchIcon{

    margin-left:18px;

    color:var(--text-secondary);

    font-size:23px;

}


.marketplaceSearchBox input{

    width:100%;

    height:100%;

    padding:0 48px 0 13px;

    border:0;

    outline:0;

    background:transparent;

    color:var(--text);

    font-family:inherit;

}


.marketplaceSearchClear{

    position:absolute;

    right:9px;

    width:38px;

    height:38px;

    border-radius:11px;

    font-size:21px;

}


/*==================================================
 CATEGORIES
==================================================*/

.marketplaceCategories{

    margin-top:38px;

}


.marketplaceSectionHeading{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

}


.textButton{

    color:var(--primary);

    font-size:12px;

    font-weight:700;

}


.marketplaceCategoryGrid{

    display:grid;

    grid-template-columns:

        repeat(9,minmax(90px,1fr));

    gap:10px;

    margin-top:17px;

}


.marketCategoryCard{

    min-height:105px;

    padding:12px 8px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:9px;

    border:1px solid var(--border);

    border-radius:19px;

    background:#fff;

    color:var(--text-secondary);

    font-size:11px;

    transition:var(--transition);

}


.marketCategoryCard:hover{

    transform:translateY(-2px);

    border-color:rgba(0,184,255,.25);

}


.marketCategoryCard.active{

    background:rgba(0,184,255,.08);

    border-color:rgba(0,184,255,.25);

    color:var(--primary);

}


.marketCategoryIcon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:var(--background-soft);

    font-size:20px;

}


/*==================================================
 FILTERS
==================================================*/

.marketplaceFilters{

    margin-top:20px;

}


.marketFilterScroll{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding-bottom:4px;

    scrollbar-width:none;

}


.marketFilterScroll::-webkit-scrollbar{

    display:none;

}


.marketFilter{

    flex-shrink:0;

    min-height:38px;

    padding:0 14px;

    border:1px solid var(--border);

    border-radius:999px;

    background:#fff;

    color:var(--text-secondary);

    font-size:11px;

}


.marketFilter.active{

    background:#0F172A;

    border-color:#0F172A;

    color:#fff;

}


/*==================================================
 MARKET SUMMARY
==================================================*/

.marketplaceMain{

    margin-top:35px;

}


.marketplaceSummary{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

}


.marketplaceSummary h2{

    margin-top:4px;

    font-size:24px;

}


.marketplaceViewControls{

    display:flex;

    gap:6px;

}


.marketViewButton{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--text-light);

}


.marketViewButton.active{

    background:rgba(0,184,255,.09);

    border-color:rgba(0,184,255,.2);

    color:var(--primary);

}


/*==================================================
 REQUEST GRID
==================================================*/

.marketplaceRequests{

    margin-top:20px;

    display:grid;

    grid-template-columns:

        repeat(3,minmax(0,1fr));

    gap:18px;

}


.marketRequestCard{

    overflow:hidden;

    border:1px solid var(--border);

    border-radius:25px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.marketRequestCard:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


.marketRequestImage{

    position:relative;

    height:180px;

    background:#EDF9FC;

}


.marketRequestImagePlaceholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:58px;

}


.marketRequestDistance{

    position:absolute;

    top:12px;

    right:12px;

    padding:6px 9px;

    border-radius:999px;

    background:rgba(255,255,255,.92);

    color:var(--text-secondary);

    font-size:10px;

    box-shadow:var(--shadow-sm);

}


.marketRequestBody{

    padding:19px;

}


.marketRequestTop{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}


.marketRequestCategory{

    color:var(--primary);

    font-size:10px;

    font-weight:700;

}


.marketRequestStatus{

    padding:5px 8px;

    border-radius:999px;

    background:rgba(34,197,94,.09);

    color:#15803D;

    font-size:9px;

    font-weight:700;

}


.marketRequestBody h3{

    margin-top:10px;

    font-size:18px;

    line-height:1.3;

}


.marketRequestDescription{

    margin-top:7px;

    min-height:40px;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.6;

}


.marketRequestDetails{

    margin-top:17px;

    padding:11px;

    display:flex;

    justify-content:space-between;

    gap:10px;

    border-radius:13px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:10px;

}


.marketRequestDetails strong{

    color:var(--text);

}


.marketRequestFooter{

    margin-top:17px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}


.marketRequestUser{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

}


.marketAvatar{

    width:32px;

    height:32px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    background:rgba(0,184,255,.10);

    color:var(--primary);

    font-size:11px;

    font-weight:700;

}


.marketRequestUser strong,
.marketRequestUser small{

    display:block;

}


.marketRequestUser strong{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:10px;

}


.marketRequestUser small{

    margin-top:2px;

    color:var(--text-light);

    font-size:9px;

}


.btnSmall{

    min-height:37px;

    padding:0 13px;

    border-radius:11px;

    font-size:10px;

    font-weight:700;

}


/*==================================================
 EMPTY STATE
==================================================*/

.marketplaceEmptyState{

    margin-top:25px;

    padding:50px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    border:1px dashed var(--border);

    border-radius:25px;

}


.emptyStateIcon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:var(--background-soft);

    color:var(--primary);

    font-size:28px;

}


.marketplaceEmptyState h2{

    margin-top:15px;

    font-size:20px;

}


.marketplaceEmptyState p{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:12px;

}


.marketplaceEmptyState .btnPrimary{

    margin-top:18px;

    width:auto;

    padding:0 20px;

}


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

.marketplaceModal{

    max-width:560px;

}


.formRow{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


.marketLocationNotice{

    display:flex;

    gap:10px;

    padding:13px;

    border-radius:15px;

    background:rgba(0,184,255,.07);

    border:1px solid rgba(0,184,255,.13);

}


.marketLocationNotice > span{

    font-size:18px;

}


.marketLocationNotice strong{

    display:block;

    font-size:11px;

}


.marketLocationNotice p{

    margin-top:3px;

    color:var(--text-secondary);

    font-size:10px;

    line-height:1.5;

}


/*==================================================
 RESPONSIVE
==================================================*/

@media (max-width:1050px){

    .marketplaceCategoryGrid{

        grid-template-columns:

            repeat(5,minmax(90px,1fr));

        overflow-x:auto;

    }


    .marketCategoryCard{

        min-width:105px;

    }


    .marketplaceRequests{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }

}


@media (max-width:700px){

    .marketplaceHeader{

        flex-direction:column;

        align-items:stretch;

        padding-top:25px;

        gap:20px;

    }


    .marketplaceHeader > .btnPrimary{

        width:100%;

    }


    .marketplaceCategoryGrid{

        display:flex;

        overflow-x:auto;

        scrollbar-width:none;

    }


    .marketplaceCategoryGrid::-webkit-scrollbar{

        display:none;

    }


    .marketCategoryCard{

        min-width:94px;

    }


    .marketplaceRequests{

        grid-template-columns:1fr;

    }


    .marketplaceSummary h2{

        font-size:20px;

    }


    .marketRequestImage{

        height:160px;

    }

}


@media (max-width:500px){

    .formRow{

        grid-template-columns:1fr;

    }


    .marketplaceMain{

        margin-top:28px;

    }


    .marketplaceSummary{

        align-items:center;

    }

}

/*==================================================
PROFILE
==================================================*/

.profileHeader{

display:flex;

flex-direction:column;

align-items:center;

padding:30px 20px;

}

.profilePhoto{

width:130px;

height:130px;

border-radius:50%;

object-fit:cover;

border:5px solid #fff;

box-shadow:var(--shadow-md);

}

.profileName{

margin-top:18px;

font-size:28px;

font-weight:700;

}

.profileEmail{

margin-top:6px;

color:var(--text-secondary);

}

.profileMenu{

margin-top:35px;

display:flex;

flex-direction:column;

gap:16px;

}

.profileItem{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 20px;

border-radius:20px;

background:#fff;

box-shadow:var(--shadow-sm);

}

/*==================================================
 PROFILE VENYA 5.0
==================================================*/

.profileSection{

    min-height:100vh;

    padding-bottom:110px;

}


.profileHeader{

    padding-top:35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}


.profileIdentity{

    display:flex;

    align-items:center;

    gap:17px;

    min-width:0;

}


.profileAvatar{

    width:76px;

    height:76px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:25px;

    background:
        linear-gradient(
            145deg,
            rgba(0,210,255,.18),
            rgba(0,150,255,.05)
        );

    border:1px solid rgba(0,184,255,.2);

    color:var(--primary);

    font-size:27px;

    font-weight:800;

    box-shadow:var(--shadow-sm);

}


.profileIdentityInfo h1{

    margin-top:3px;

    font-size:clamp(25px,5vw,38px);

}


.profileIdentityInfo > p:not(.sectionEyebrow){

    margin-top:4px;

    color:var(--text-secondary);

    font-size:12px;

}


.profileVerification{

    margin-top:8px;

}


.verificationBadge{

    display:inline-flex;

    align-items:center;

    padding:5px 9px;

    border-radius:999px;

    background:rgba(34,197,94,.09);

    color:#15803D;

    font-size:9px;

    font-weight:700;

}


/*==================================================
 MAIN
==================================================*/

.profileMain{

    margin-top:30px;

    display:grid;

    gap:20px;

}


/*==================================================
 WALLET
==================================================*/

.profileWalletCard{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:27px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F0FBFF 100%
        );

    border:1px solid rgba(0,184,255,.18);

    box-shadow:var(--shadow-md);

}


.profileWalletCard::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-65px;

    bottom:-75px;

    border-radius:50%;

    background:rgba(0,184,255,.07);

}


.walletHeader{

    position:relative;

    z-index:1;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.walletHeader h2{

    margin-top:4px;

    font-size:22px;

}


.walletIcon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(0,184,255,.1);

    color:var(--primary);

    font-size:20px;

    font-weight:800;

}


.walletBalance{

    position:relative;

    z-index:1;

    margin-top:25px;

}


.walletBalance span{

    display:block;

    color:var(--text-secondary);

    font-size:11px;

}


.walletBalance strong{

    display:block;

    margin-top:3px;

    font-size:38px;

    letter-spacing:-1px;

}


.walletActions{

    position:relative;

    z-index:1;

    margin-top:24px;

    display:flex;

    gap:10px;

}


.walletAction{

    flex:1;

    min-height:65px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:1px solid var(--border);

    border-radius:15px;

    background:rgba(255,255,255,.8);

}


.walletAction span{

    color:var(--primary);

    font-size:18px;

}


.walletAction small{

    color:var(--text-secondary);

    font-size:9px;

}


/*==================================================
 PANELS
==================================================*/

.profilePanel{

    padding:22px;

    border:1px solid var(--border);

    border-radius:25px;

    background:#fff;

    box-shadow:var(--shadow-sm);

}


.profilePanelHeader{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:15px;

}


.profilePanelHeader h2{

    margin-top:4px;

    font-size:21px;

}


.profilePanelDescription{

    margin-top:10px;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.6;

}


/*==================================================
 DATA
==================================================*/

.profileDataGrid{

    margin-top:18px;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;

}


.profileDataItem{

    padding:14px;

    border-radius:15px;

    background:var(--background-soft);

}


.profileDataItem span{

    display:block;

    color:var(--text-light);

    font-size:9px;

}


.profileDataItem strong{

    display:block;

    margin-top:5px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:12px;

}


/*==================================================
 ROLES
==================================================*/

.profileRolesGrid{

    margin-top:18px;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

}


.profileRoleCard{

    min-width:0;

    padding:15px;

    display:grid;

    grid-template-columns:auto 1fr;

    gap:10px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

}


.profileRoleCard.active{

    border-color:rgba(0,184,255,.2);

    background:rgba(0,184,255,.035);

}


.profileRoleIcon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:var(--background-soft);

    color:var(--primary);

    font-weight:800;

}


.profileRoleCard h3{

    font-size:13px;

}


.profileRoleCard p{

    margin-top:3px;

    color:var(--text-secondary);

    font-size:9px;

    line-height:1.5;

}


.roleStatus{

    grid-column:1 / -1;

    width:max-content;

    padding:5px 8px;

    border-radius:999px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:8px;

    font-weight:700;

}


.roleStatus.active{

    background:rgba(34,197,94,.09);

    color:#15803D;

}


.profileWorkButton{

    width:auto;

    margin-top:18px;

}


/*==================================================
 HISTORY
==================================================*/

.profileHistoryList{

    margin-top:15px;

}


.profileHistoryEmpty,
.profileNotificationEmpty{

    padding:25px 15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:17px;

    background:var(--background-soft);

}


.profileHistoryEmpty span,
.profileNotificationEmpty span{

    color:var(--primary);

    font-size:24px;

}


.profileHistoryEmpty p,
.profileNotificationEmpty p{

    margin-top:7px;

    color:var(--text-secondary);

    font-size:11px;

}


/*==================================================
 NOTIFICATIONS
==================================================*/

.notificationCount{

    min-width:25px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:rgba(239,68,68,.09);

    color:#DC2626;

    font-size:9px;

    font-weight:800;

}


.profileNotificationsList{

    margin-top:15px;

}


.fullWidthButton{

    width:100%;

    margin-top:12px;

}


/*==================================================
 SETTINGS
==================================================*/

.securityStatus{

    padding:6px 9px;

    border-radius:999px;

    background:rgba(34,197,94,.09);

    color:#15803D;

    font-size:9px;

    font-weight:700;

}


.profileSettingsList{

    margin-top:13px;

    display:grid;

}


.profileSettingItem{

    width:100%;

    padding:14px 2px;

    display:flex;

    align-items:center;

    gap:11px;

    text-align:left;

    border-bottom:1px solid var(--border);

}


.profileSettingItem:last-child{

    border-bottom:0;

}


.settingIcon{

    width:38px;

    height:38px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--background-soft);

}


.settingContent{

    flex:1;

    min-width:0;

}


.settingContent strong{

    display:block;

    font-size:11px;

}


.settingContent small{

    display:block;

    margin-top:3px;

    color:var(--text-secondary);

    font-size:9px;

}


.settingArrow{

    color:var(--text-light);

    font-size:21px;

}


/*==================================================
 SUPPORT
==================================================*/

.profileSupportGrid{

    margin-top:16px;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

}


.profileSupportCard{

    min-height:125px;

    padding:15px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    text-align:left;

    border:1px solid var(--border);

    border-radius:17px;

    background:#fff;

}


.profileSupportCard > span{

    font-size:21px;

}


.profileSupportCard strong{

    margin-top:10px;

    font-size:11px;

}


.profileSupportCard small{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:9px;

    line-height:1.4;

}


/*==================================================
 LEGAL
==================================================*/

.profileLegal{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}


.profileLegal button{

    color:var(--text-secondary);

    font-size:10px;

}


.profileLegal button:hover{

    color:var(--primary);

}


.profileLegal span{

    color:var(--text-light);

}


/*==================================================
 ACCOUNT ACTIONS
==================================================*/

.profileAccountActions{

    padding:5px 0 25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}


.logoutButton{

    width:100%;

    min-height:46px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    color:var(--text);

    font-size:11px;

    font-weight:700;

}


.deleteAccountButton{

    color:#DC2626;

    font-size:10px;

    font-weight:700;

}


.deleteAccountButton:hover{

    text-decoration:underline;

}


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

.dangerModal{

    max-width:450px;

}


.dangerIcon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(239,68,68,.09);

    color:#DC2626;

    font-size:25px;

    font-weight:800;

}


.dangerNotice{

    margin-top:18px;

    padding:13px;

    border-radius:14px;

    background:rgba(239,68,68,.06);

    border:1px solid rgba(239,68,68,.12);

}


.dangerNotice strong{

    font-size:10px;

    color:#B91C1C;

}


.dangerNotice p{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:10px;

    line-height:1.5;

}


.dangerActions{

    margin-top:20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.dangerConfirm{

    min-height:44px;

}


/*==================================================
 RESPONSIVE
==================================================*/

@media(max-width:800px){

    .profileHeader{

        align-items:flex-start;

    }


    .profileRolesGrid{

        grid-template-columns:1fr;

    }


    .profileSupportGrid{

        grid-template-columns:1fr;

    }

}


@media(max-width:600px){

    .profileHeader{

        flex-direction:column;

    }


    .profileHeader > button{

        width:100%;

    }


    .profileIdentity{

        width:100%;

    }


    .profileAvatar{

        width:64px;

        height:64px;

        border-radius:21px;

    }


    .profileDataGrid{

        grid-template-columns:1fr;

    }


    .walletActions{

        gap:7px;

    }


    .walletAction{

        min-height:60px;

    }


    .profilePanel{

        padding:18px;

    }

}


@media(max-width:400px){

    .profileIdentity{

        align-items:flex-start;

    }


    .profileIdentityInfo h1{

        font-size:24px;

    }


    .profileWalletCard{

        padding:19px;

    }


    .walletBalance strong{

        font-size:32px;

    }


    .dangerActions{

        grid-template-columns:1fr;

    }

}

/*==================================================
FOOTER
==================================================*/

.footer{

margin-top:70px;

padding:50px 20px;

text-align:center;

color:var(--text-secondary);

font-size:14px;

}

/*==================================================
HELPERS
==================================================*/

.hidden{

display:none !important;

}

.center{

display:flex;

justify-content:center;

align-items:center;

}

.textCenter{

text-align:center;

}

.w100{

width:100%;

}

.mt20{

margin-top:20px;

}

.mt30{

margin-top:30px;

}

.mb20{

margin-bottom:20px;

}

.mb30{

margin-bottom:30px;

}

/*==================================================
 AUTH EXTENSIONS
==================================================*/

.authBrand{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.authHeader{

    text-align:center;

}

.authMode{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6px;

    padding:5px;

    margin:25px 0;

    background:var(--background-soft);

    border-radius:16px;

}

.authModeButton{

    min-height:44px;

    border-radius:12px;

    color:var(--text-secondary);

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.authModeButton.active{

    background:#fff;

    color:var(--primary);

    box-shadow:var(--shadow-xs);

}

.formGroup{

    display:flex;

    flex-direction:column;

    gap:7px;

}

.formLabel{

    font-size:14px;

    font-weight:600;

    color:var(--text);

}

.formHint{

    font-size:12px;

    color:var(--text-secondary);

}

.formError{

    min-height:16px;

    color:var(--danger);

    font-size:12px;

}

.passwordField{

    position:relative;

    width:100%;

}

.passwordField .input{

    padding-right:55px;

}

.passwordToggle{

    position:absolute;

    top:50%;

    right:8px;

    transform:translateY(-50%);

    width:40px;

    height:40px;

    border-radius:12px;

    color:var(--text-secondary);

}

.authUtilityRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    font-size:12px;

}

.rememberOption{

    display:flex;

    align-items:center;

    gap:7px;

    color:var(--text-secondary);

}

.rememberOption input,
.termsOption input{

    width:17px;

    height:17px;

    accent-color:var(--primary);

}

.textButton{

    color:var(--primary);

    font-size:12px;

    font-weight:600;

}

.phoneField{

    display:grid;

    grid-template-columns:auto 1fr;

    gap:8px;

}

.countryCode{

    min-width:105px;

    height:var(--input-height);

    padding:0 10px;

    border-radius:var(--input-radius);

    background:#fff;

    border:1px solid var(--border);

    color:var(--text);

    font-family:inherit;

}

.termsOption{

    display:flex;

    align-items:flex-start;

    gap:10px;

    font-size:12px;

    line-height:1.5;

    color:var(--text-secondary);

}

.inlineButton{

    display:inline;

    color:var(--primary);

    font-weight:600;

}

.authDivider{

    display:flex;

    align-items:center;

    gap:12px;

    margin:25px 0;

}

.authDivider span{

    flex:1;

    height:1px;

    background:var(--border);

}

.authDivider p{

    flex-shrink:0;

    color:var(--text-light);

    font-size:12px;

}

.socialAuth{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.socialButton{

    min-height:50px;

    border-radius:16px;

    background:#fff;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.socialButton:hover{

    border-color:var(--primary);

    transform:translateY(-1px);

}

.appleButton{

    background:#0F172A;

    color:#fff;

    border-color:#0F172A;

}

.socialIcon{

    font-size:18px;

}

.authMessage{

    margin-top:18px;

    padding:13px 15px;

    border-radius:14px;

    background:rgba(239,68,68,.08);

    color:var(--danger);

    font-size:13px;

    text-align:center;

}

/*==================================================
 VENYA 5.0
 LEGAL COMPONENTS
==================================================*/


/*==================================================
 LEGAL CENTER
==================================================*/

.legalCenter{

    position:fixed;

    inset:0;

    z-index:5000;

    overflow-y:auto;

    padding:30px 18px 80px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0,210,255,.09),
            transparent 40%
        ),
        #F8FCFE;

}


.legalCenterHeader{

    max-width:850px;

    margin:0 auto 25px;

    padding:25px;

    text-align:center;

    border-radius:28px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}


.legalCenterIcon{

    width:58px;

    height:58px;

    margin:0 auto 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:19px;

    background:rgba(0,184,255,.1);

    color:var(--primary);

    font-size:25px;

}


.legalCenterHeader h2{

    margin-top:5px;

    font-size:27px;

}


.legalCenterHeader p:not(.sectionEyebrow){

    max-width:570px;

    margin:8px auto 0;

    color:var(--text-secondary);

    font-size:11px;

    line-height:1.6;

}


/*==================================================
 LEGAL DOCUMENT GRID
==================================================*/

.legalDocumentsGrid{

    max-width:850px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

}


.legalDocumentCard{

    min-width:0;

    padding:17px;

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;

    border:1px solid var(--border);

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.legalDocumentCard:hover{

    transform:translateY(-2px);

    border-color:rgba(0,184,255,.3);

    box-shadow:var(--shadow-md);

}


.legalDocumentIcon{

    width:43px;

    height:43px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(0,184,255,.08);

    font-size:18px;

}


.legalDocumentContent{

    flex:1;

    min-width:0;

}


.legalDocumentContent strong{

    display:block;

    font-size:11px;

}


.legalDocumentContent small{

    display:block;

    margin-top:4px;

    color:var(--text-secondary);

    font-size:9px;

    line-height:1.45;

}


.legalArrow{

    color:var(--text-light);

    font-size:20px;

}


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

.legalDocumentModalCard{

    max-width:760px;

    max-height:88vh;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}


.legalDocumentModalHeader{

    display:flex;

    align-items:center;

    gap:13px;

    padding-right:30px;

}


.legalDocumentModalIcon{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(0,184,255,.09);

    color:var(--primary);

    font-size:20px;

}


.legalDocumentModalHeader h2{

    margin-top:3px;

    font-size:21px;

}


.legalVersion{

    margin-top:16px;

    padding:9px 11px;

    display:flex;

    align-items:center;

    gap:7px;

    flex-wrap:wrap;

    border-radius:11px;

    background:var(--background-soft);

    color:var(--text-secondary);

    font-size:8px;

}


.legalVersion strong{

    color:var(--text);

}


.legalDocumentContentBody{

    flex:1;

    overflow-y:auto;

    margin-top:17px;

    padding:5px 3px 20px;

}


.legalPlaceholder{

    min-height:250px;

    padding:35px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:19px;

    background:var(--background-soft);

}


.legalPlaceholder span{

    font-size:30px;

}


.legalPlaceholder h3{

    margin-top:10px;

    font-size:15px;

}


.legalPlaceholder p{

    max-width:450px;

    margin-top:6px;

    color:var(--text-secondary);

    font-size:10px;

    line-height:1.6;

}


.legalDocumentFooter{

    padding-top:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    border-top:1px solid var(--border);

}


.legalDocumentFooter p{

    color:var(--text-light);

    font-size:8px;

}


.legalDocumentFooter strong{

    color:var(--text-secondary);

}


/*==================================================
 REGISTRATION CONSENT
==================================================*/

.registrationLegalConsent{

    margin-top:14px;

    display:grid;

    gap:8px;

}


.legalCheckbox{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:9px;

    cursor:pointer;

}


.legalCheckbox input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


.customCheckbox{

    width:17px;

    height:17px;

    flex-shrink:0;

    margin-top:1px;

    border:1px solid #B8C7CE;

    border-radius:5px;

    background:#fff;

    transition:.2s ease;

}


.legalCheckbox input:checked + .customCheckbox{

    border-color:var(--primary);

    background:var(--primary);

    box-shadow:
        0 0 0 3px rgba(0,184,255,.09);

}


.legalCheckbox input:checked + .customCheckbox::after{

    content:"✓";

    display:block;

    color:#fff;

    font-size:11px;

    line-height:15px;

    text-align:center;

    font-weight:800;

}


.legalCheckboxText{

    color:var(--text-secondary);

    font-size:9px;

    line-height:1.5;

}


.legalCheckboxText button{

    color:var(--primary);

    font-weight:700;

}


.legalConsentNotice{

    margin-top:2px;

    color:var(--text-light);

    font-size:8px;

    line-height:1.5;

}


/*==================================================
 LOCATION
==================================================*/

.locationPermissionCard{

    max-width:450px;

}


.locationPermissionIcon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(0,184,255,.1);

    font-size:26px;

}


.locationPermissionCard h2{

    margin-top:7px;

    font-size:23px;

}


.modalDescription{

    margin-top:9px;

    color:var(--text-secondary);

    font-size:11px;

    line-height:1.6;

}


.locationPermissionInfo{

    margin-top:18px;

    display:grid;

    gap:8px;

}


.locationPermissionInfo > div{

    padding:12px;

    display:grid;

    gap:3px;

    border-radius:14px;

    background:var(--background-soft);

}


.locationPermissionInfo strong{

    font-size:10px;

}


.locationPermissionInfo span{

    color:var(--text-secondary);

    font-size:9px;

}


.locationPermissionLegal{

    margin-top:15px;

    color:var(--text-light);

    font-size:8px;

    line-height:1.5;

}


.modalActions{

    margin-top:20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:9px;

}


/*==================================================
 MARKETPLACE LEGAL
==================================================*/

.marketplaceLegalNotice{

    margin-top:12px;

    padding:12px;

    border-radius:14px;

    background:rgba(0,184,255,.04);

    border:1px solid rgba(0,184,255,.12);

}


/*==================================================
 REPORT
==================================================*/

.reportModal{

    max-width:470px;

}


.reportIcon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(245,158,11,.1);

    color:#D97706;

    font-size:23px;

}


.reportModal h2{

    margin-top:7px;

    font-size:23px;

}


.reportProblemForm{

    margin-top:18px;

    display:grid;

    gap:14px;

}


.reportProblemForm select,
.reportProblemForm textarea{

    width:100%;

    padding:12px 13px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    color:var(--text);

    font:inherit;

    font-size:11px;

}


.reportProblemForm textarea{

    min-height:120px;

    resize:vertical;

}


.reportProblemForm small{

    display:block;

    margin-top:4px;

    color:var(--text-light);

    font-size:8px;

}


/*==================================================
 TECHNOLOGY NOTICE
==================================================*/

.technologyNotice{

    position:fixed;

    left:15px;

    right:15px;

    bottom:15px;

    z-index:6000;

    max-width:650px;

    margin:auto;

    padding:15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border:1px solid var(--border);

    border-radius:18px;

    background:rgba(255,255,255,.96);

    box-shadow:var(--shadow-lg);

    backdrop-filter:blur(18px);

}


.technologyNotice strong{

    display:block;

    font-size:10px;

}


.technologyNotice p{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:8px;

    line-height:1.5;

}


/*==================================================
 RESPONSIVE
==================================================*/

@media(max-width:700px){

    .legalDocumentsGrid{

        grid-template-columns:1fr;

    }


    .legalDocumentModalCard{

        max-height:92vh;

    }

}


@media(max-width:500px){

    .legalCenter{

        padding:
            15px
            12px
            80px;

    }


    .legalCenterHeader{

        padding:20px;

    }


    .legalCenterHeader h2{

        font-size:23px;

    }


    .modalActions{

        grid-template-columns:1fr;

    }


    .technologyNotice{

        flex-direction:column;

        align-items:stretch;

    }


    .technologyNotice button{

        width:100%;

    }


    .legalDocumentFooter{

        align-items:stretch;

        flex-direction:column;

    }


    .legalDocumentFooter button{

        width:100%;

    }

}