:root{--highlight-color:#ffcc00;--glass-bg:rgba(0,0,0,0.45);--glass-border:rgba(255,255,255,0.08);--glass-border-light:rgba(255,255,255,0.15);--glass-shadow:0 16px 40px rgba(0,0,0,0.3);--time-green:#00ff9c;--time-passed:rgba(255,255,255,0.4);--text-main:#fff;--bg-grad-1:#1e3c72;--bg-grad-2:#2a5298;--bg-grad-3:#009ffd;--bg-grad-4:#2af598}
html,body{margin:0;padding:0;min-height:100vh;background-color:#1e3c72; -webkit-text-size-adjust: none;}
*{-webkit-user-select:none;user-select:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background:linear-gradient(-45deg,var(--bg-grad-1),var(--bg-grad-2),var(--bg-grad-3),var(--bg-grad-4),var(--bg-grad-3));background-size:300% 300%;animation:gradientMove 30s ease-in-out infinite alternate; transition: color 0.3s ease;}
@keyframes gradientMove{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.wrapper{width:100%;max-width:900px;padding:15px;padding-bottom:90px}.container{display:flex;flex-direction:column;gap:15px}
.liquid-glass{background:var(--glass-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-border);border-top:1px solid var(--glass-border-light);border-left:1px solid var(--glass-border-light);box-shadow:var(--glass-shadow);border-radius:28px}
.alert-main-widget{padding:0;border-radius:28px;position:relative;z-index:100}
.main-list-widget, .shopping-drawer{position:absolute;top:100%;left:0;width:100%;max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:max-height 0.6s ease,opacity 0.3s ease,padding 0.3s ease,margin-top 0.3s ease;background:linear-gradient(135deg,#0b1d3a,#061124);border:1px solid rgba(255,255,255,0.15);box-shadow:0 25px 50px rgba(0,0,0,0.7);border-radius:24px;z-index:200;margin-top:0;box-sizing:border-box}
.alert-drawer{position:absolute;top:100%;left:0;width:100%;max-height:0;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:visible;pointer-events:none;transition:max-height 0.5s ease,opacity 0.3s ease,padding 0.3s ease,margin-top 0.3s ease;background:linear-gradient(135deg,#0b1d3a,#061124);border:1px solid rgba(255,255,255,0.15);box-shadow:0 25px 50px rgba(0,0,0,0.7);border-radius:24px;z-index:200;margin-top:0;box-sizing:border-box}
.alert-drawer.open{max-height:65vh;opacity:1;padding:15px;margin-top:10px;pointer-events:auto}
.alert-drawer::-webkit-scrollbar { width: 6px; } .alert-drawer::-webkit-scrollbar-track { background: transparent; } .alert-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 6px; }
.main-list-widget.open{max-height:6000px;opacity:1;visibility:visible;pointer-events:auto;padding:20px 10px;margin-top:10px}
.shopping-drawer.open{max-height:10000px;opacity:1;visibility:visible;pointer-events:auto;padding:20px 15px;margin-top:10px}
.tab-alert{padding:14px 8px;border-radius:12px;font-weight:700;font-size:clamp(10px,3.2vw,14px);text-align:center;cursor:pointer;background:linear-gradient(145deg,rgba(20,30,50,0.9),rgba(10,15,30,0.95));border:1px solid rgba(255,255,255,0.05);transition:transform 0.2s,box-shadow 0.2s,background 0.3s;text-transform:uppercase;letter-spacing:0.5px;color:#fff;position:relative;display:flex;justify-content:center;align-items:center;line-height:1.2}
.tab-alert.communal{color:#FFD700;border-bottom:3px solid #FFD700;background:linear-gradient(145deg,rgba(255,215,0,0.15),rgba(10,15,30,0.95))} .tab-alert.communal.active{background:rgba(255,215,0,0.3);box-shadow:0 0 15px rgba(255,215,0,0.6);color:#fff}
.tab-alert.news{color:#00FF9D;border-bottom:3px solid #00FF9D;background:linear-gradient(145deg,rgba(0,255,157,0.15),rgba(10,15,30,0.95))} .tab-alert.news.active{background:rgba(0,255,157,0.3);box-shadow:0 0 15px rgba(0,255,157,0.6);color:#fff}
.tab-alert.events{color:#FF3366;border-bottom:3px solid #FF3366;background:linear-gradient(145deg,rgba(255,51,102,0.15),rgba(10,15,30,0.95));text-shadow:0 0 5px rgba(255,51,102,0.6);animation:neonPulse 2s infinite alternate} .tab-alert.events.active{background:rgba(255,51,102,0.3);box-shadow:0 0 15px rgba(255,51,102,0.8);color:#fff}
.tab-alert.gallery{color:#a18cd1;border-bottom:3px solid #a18cd1;background:linear-gradient(145deg,rgba(161,140,209,0.15),rgba(10,15,30,0.95))} .tab-alert.gallery.active{background:rgba(161,140,209,0.3);box-shadow:0 0 15px rgba(161,140,209,0.6);color:#fff}
.tab-alert.volunteers{color:#38bdf8;border-bottom:3px solid #38bdf8;background:linear-gradient(145deg,rgba(56,189,248,0.15),rgba(10,15,30,0.95))} .tab-alert.volunteers.active{background:rgba(56,189,248,0.3);box-shadow:0 0 15px rgba(56,189,248,0.6);color:#fff}
.tab-alert.promos{color:#ff9f43;border-bottom:3px solid #ff9f43;background:linear-gradient(145deg,rgba(255,159,67,0.15),rgba(10,15,30,0.95))} .tab-alert.promos.active{background:rgba(255,159,67,0.3);box-shadow:0 0 15px rgba(255,159,67,0.6);color:#fff}
@keyframes neonPulse{0%{box-shadow:0 0 5px rgba(255,51,102,0.1)}100%{box-shadow:0 0 12px rgba(255,51,102,0.5)}}
@keyframes pulseAlert { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9); } 70% { box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } }
.notification-dot, .train-alert-dot { position: absolute; top: -2px; right: -2px; background: #ff0000; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); animation: pulseAlert 1.5s infinite; z-index: 10; }
.notification-dot { width: 10px; height: 10px; display: none; } .train-alert-dot { width: 8px; height: 8px; z-index: 5; }
.carousel-wrapper{width:100%;position:relative}.carousel-container{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:15px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;padding-bottom:5px;align-items:center}.carousel-container::-webkit-scrollbar{display:none}
.alert-item{background:rgba(41,128,185,0.3);border:1px solid rgba(116,185,255,0.2);border-radius:12px;padding:15px;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;box-sizing:border-box;max-height:55vh;overflow-y:auto;}
.alert-item::-webkit-scrollbar { width: 4px; } .alert-item::-webkit-scrollbar-track { background: transparent; } .alert-item::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.alert-card-title{font-size:15px;font-weight:700;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:8px} .alert-card-text{font-size:14px;font-weight:500;line-height:1.5;text-align:left;color:rgba(255,255,255,0.9);}
.alert-empty{text-align:center;font-size:13px;color:rgba(255,255,255,0.5);padding:15px;font-weight:600}
.carousel-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px} .carousel-dot{width:8px;height:8px;border-radius:50%;transition:background 0.3s,transform 0.3s} .carousel-dot.active{transform:scale(1.3)}
.top-row{display:flex;flex-direction:row;justify-content:space-between;gap:12px;width:100%}
.widget{padding:15px 10px;flex:1;min-height:125px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;position:relative} .widget::before{content:'';position:absolute;top:0;left:0;right:0;height:35%;background:linear-gradient(to bottom,rgba(255,255,255,0.08),transparent);border-radius:28px 28px 0 0;pointer-events:none}
.datetime{text-align:center;width:100%} #date{font-size:clamp(18px,4.8vw,24px);font-weight:700;white-space:nowrap;letter-spacing:0.5px;color:#fff;} #time{font-size:clamp(16px,4.2vw,20px);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff;}
.weekdays{display:flex;justify-content:center;gap:3px;font-size:clamp(9px,2.3vw,12px);font-weight:700;margin:6px 0;text-transform:uppercase;width:100%;padding:0 5px} .day{color:rgba(255,255,255,0.4);transition:0.3s ease} .day.active{background-color:#ff4d4d !important;color:#fff !important;border-radius:6px;padding:2px 5px;box-shadow:0 0 10px rgba(255,77,77,0.4);}
.weather-box { position:relative; width:100%; display:flex; align-items:center; justify-content:center; flex: 1; }
.weather-content { position:absolute; width:100%; transition:all 0.8s cubic-bezier(0.25,1,0.5,1); opacity:0; transform:translateY(10px) scale(0.95); text-align:center; pointer-events:none; display:flex; flex-direction:column; justify-content:center; align-items:center; } .weather-content.active { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.weather-city { font-weight:700; font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:4px; text-transform:uppercase; letter-spacing:1.5px; } .weather-temp-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0; } .weather-icon { font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .weather-temp { font-size:clamp(28px,7vw,36px); font-weight:800; white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,0.4); line-height:1; color:#fff;} .weather-wind { font-size:12px; color:rgba(255,255,255,0.7); margin-top:2px; font-weight:500; display: flex; align-items: center; justify-content: center; gap: 4px; }
.schedule-group,.market-group{display:flex;flex-direction:column;gap:8px;position:relative;z-index:90;width:100%} .market-group{z-index:80}
.tabs-wrapper{position:relative;width:100%;border-radius:20px;display:flex;overflow:hidden}
.tabs-nav{display:flex;flex-wrap:nowrap;width:100%;padding:6px;gap:8px;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:20px;position:relative;z-index:2;box-shadow:inset 0 2px 10px rgba(0,0,0,0.4),0 4px 15px rgba(0,0,0,0.2);border:1px solid var(--glass-border);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs-nav::-webkit-scrollbar{display:none}
.scroll-hint{position:absolute;right:0;top:0;bottom:0;width:45px;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.9));border-radius:0 20px 20px 0;pointer-events:none;opacity:1;transition:opacity 0.4s ease;z-index:5} .scroll-hint.hidden{opacity:0} .scroll-hint span{color:var(--highlight-color);font-size:16px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,0.8);animation:blinkArrow 1.5s infinite} @keyframes blinkArrow{0%,100%{transform:translateX(0);opacity:0.3}50%{transform:translateX(4px);opacity:1}}
.tab-btn{flex:0 0 auto;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(145deg,rgba(255,255,255,0.1),rgba(0,0,0,0.25));box-shadow:2px 4px 8px rgba(0,0,0,0.2),inset 1px 1px 2px rgba(255,255,255,0.15);color:#fff;font-weight:600;cursor:pointer;border-radius:12px;transition:all 0.3s ease;font-size:clamp(11px,3.2vw,13px);white-space:nowrap;position:relative; color:rgba(255,255,255,0.9);}
.tab-btn.active{background:linear-gradient(145deg,rgba(255,255,255,0.3),rgba(255,255,255,0.1));color:#fff;border:1px solid rgba(255,255,255,0.3);text-shadow:0 1px 4px rgba(0,0,0,0.8);box-shadow:0 4px 12px rgba(0,0,0,0.4),inset 1px 1px 3px rgba(255,255,255,0.4);transform:translateY(-1px)}
.content-section{display:none} .content-section.active{display:block;animation:tabFadeIn 0.3s ease-out forwards} @keyframes tabFadeIn{from{opacity:0}to{opacity:1}}
.table-head{display:grid;grid-template-columns:15% 1fr 18%;align-items:center;justify-items:center;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.15);padding:0 10px 10px 10px;margin-bottom:12px;font-size:10px;text-transform:uppercase;color:#74b9ff;letter-spacing:0.5px}
.train{display:grid;grid-template-columns:15% 1fr 18%;align-items:center;justify-items:center;padding:14px 10px;margin-bottom:10px;cursor:pointer;transition:all 0.3s ease;border-radius:16px;min-height:60px;background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(0,0,0,0.2));box-shadow:0 4px 12px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.05)} .train:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.3)}
.train-num-box{position:relative;font-weight:700;display:inline-block;font-size:clamp(10px,2.8vw,12px);background:rgba(255,255,255,0.1);color:#fff;padding:4px 6px;border-radius:8px}
.route-text{font-weight:600;color:#fff;text-align:center;font-size:clamp(9px,2.7vw,14px);width:100%;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time-val{font-weight:700;font-size:clamp(12px,3.2vw,15px);font-variant-numeric:tabular-nums} .time-val.soon{color:var(--highlight-color)} .time-val.future{color:var(--time-green)} .time-val.passed{color:var(--time-passed)}
.details{max-height:0;overflow:hidden;transition:max-height 0.4s ease,opacity 0.3s ease,padding 0.3s ease;background:rgba(0,0,0,0.25);border-radius:16px; opacity:0;} .details.open{max-height:5000px;opacity:1;padding:15px;margin-top:2px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.05)}
.schedule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .bus-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width:600px){.schedule-grid,.bus-grid{grid-template-columns:1fr}} @media (max-width:550px){.top-row{flex-wrap:wrap}.widget{min-width:45%}}
.schedule-column{background:rgba(41,128,185,0.3);border:1px solid rgba(116,185,255,0.2);border-radius:12px;padding:10px 8px}
.schedule-row{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.05);font-size:13px;align-items:center;gap:10px;text-align:left} .schedule-row:last-child{border-bottom:none}
.schedule-left{flex:1;display:flex;align-items:flex-start;text-align:left;line-height:1.2;font-weight:500} .station-number{color:rgba(255,255,255,0.4);font-weight:600;margin-right:6px;font-size:10px;min-width:18px;text-align:right;padding-top:2px} .station-name-text{flex:1;word-wrap:break-word;color:#fff;}
.row-highlight{background:rgba(255,255,255,0.1) !important;color:var(--highlight-color) !important;font-weight:700;border-radius:6px;} .row-highlight .station-name-text, .row-highlight .time-green, .row-highlight .time-passed, .row-highlight .time-normal { color: var(--highlight-color) !important; }
.time-green{color:var(--time-green);font-weight:600;font-family:monospace;font-size:14px;text-align:right;white-space:nowrap} .time-passed{color:var(--time-passed);font-weight:500;font-family:monospace;font-size:14px;text-align:right;white-space:nowrap} .time-normal{color:#fff;font-weight:600;font-family:monospace;font-size:14px;text-align:right;white-space:nowrap}
.details-note{text-align:center;font-weight:600;color:#ff6b6b;margin-bottom:10px;font-size:12px;line-height:1.5;background:rgba(255,107,107,0.1);padding:10px;border-radius:10px} .details-divider{width:50%;height:1px;background:rgba(255,255,255,0.1);margin:20px auto 15px}
.shops-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0, 1fr));gap:12px;align-items:stretch;grid-auto-flow:dense;transition:padding-bottom 0.3s ease} @media (min-width:650px){.shops-tile-grid{grid-template-columns:repeat(3,minmax(0, 1fr))}}
.shop-tile{display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(0,0,0,0.2));box-shadow:0 4px 12px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:10px;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative;z-index:1;min-width:0;box-sizing:border-box;} .shop-tile:hover{background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(0,0,0,0.3));transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.15)} .shop-tile.tile-active{background:linear-gradient(145deg,rgba(255,255,255,0.1),rgba(0,0,0,0.3));box-shadow:0 8px 24px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.2);z-index:50 !important}
.shop-tile.vip-tile, .vip-job-card { grid-column: 1 / -1; width: 85%; max-width: 480px; margin: 0 auto; background: linear-gradient(135deg, rgba(255, 170, 0, 0.25), rgba(50, 15, 0, 0.9)) !important; border: 1px solid rgba(255, 204, 0, 0.4) !important; box-shadow: 0 10px 30px rgba(255, 170, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important; min-width: 0; box-sizing: border-box; } .shop-tile.vip-tile:hover, .vip-job-card:hover { background: linear-gradient(135deg, rgba(255, 180, 0, 0.35), rgba(60, 20, 0, 0.95)) !important; box-shadow: 0 12px 35px rgba(255, 180, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important; } .shop-tile.vip-tile .shop-inner-list { background: linear-gradient(145deg, rgba(35, 25, 5, 0.98), rgba(15, 10, 0, 0.98)) !important; border: 1px solid rgba(255, 204, 0, 0.3) !important; }
.vip-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,#ffcc00,#ff8800);color:#000;font-size:10px;font-weight:800;padding:4px 8px;border-radius:12px;box-shadow:0 4px 10px rgba(255,204,0,0.4);z-index:10;text-transform:uppercase;letter-spacing:1px;}
.promo-tile { border-color: rgba(255, 51, 102, 0.4) !important; } .promo-badge { background: linear-gradient(135deg, #ff3366, #ff9f43) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(255,51,102,0.4) !important; }
.shop-tile-photo{width:100%;height:160px;border-radius:10px;background:rgba(0,0,0,0.3);display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:8px;border:1px solid rgba(255,255,255,0.05)} .shop-tile.vip-tile .shop-tile-photo, .promo-tile .shop-tile-photo {height:190px;} .shop-tile-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-tile-cat{font-size:10px;color:var(--highlight-color);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px;word-break:break-word;overflow-wrap:anywhere;} .shop-tile-name{font-weight:600;font-size:11px;color:#fff;line-height:1.3;word-wrap:break-word;} .shop-tile-chevron{font-size:11px;color:var(--time-green);font-weight:700;margin-top:auto;text-align:center;background:rgba(0,255,156,0.1);padding:4px;border-radius:8px}
.shop-details-dropdown{position:absolute;top:calc(100% + 5px);left:0;width:100%;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height 0.4s ease,opacity 0.3s ease,padding 0.3s ease;pointer-events:none;box-sizing:border-box;z-index:50; opacity:0;} .shop-details-dropdown.open{max-height:3000px;opacity:1;pointer-events:auto}
.shop-inner-list{display:flex;flex-direction:column;gap:8px;font-size:11px;text-align:left;color:rgba(255,255,255,0.85);background:rgba(11,29,58,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);box-shadow:0 15px 35px rgba(0,0,0,0.8)} .shop-inner-item{display:flex;gap:6px;align-items:flex-start;line-height:1.3} .detail-icon{flex-shrink:0;font-size:12px} .shop-phone-link{color:#2af598;text-decoration:none;font-weight:700;letter-spacing:0.5px}
.blabla-actions{display:flex;gap:10px;margin-bottom:15px;padding:0 5px} .blabla-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 5px;border-radius:14px;text-decoration:none;font-weight:700;font-size:14px;font-family:inherit;color:#0b1d3a;cursor:pointer;border:none;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 15px rgba(0,0,0,0.3)} .blabla-btn:active{transform:translateY(1px)}
.btn-driver{background:linear-gradient(135deg,#00ff9c,#00b8ff)} .btn-passenger{background:linear-gradient(135deg,#ffcc00,#ff8800)} .blabla-subtext{font-size:10px;color:rgba(0,0,0,0.8);font-weight:600;margin-top:3px;text-transform:uppercase}
.blabla-toggle-container{display:flex;background:rgba(0,0,0,0.3);border-radius:12px;padding:4px;margin-bottom:15px;border:1px solid rgba(255,255,255,0.05)} .blabla-tab-btn{flex:1;padding:8px;border:none;background:transparent;color:rgba(255,255,255,0.5);font-weight:600;font-size:12px;border-radius:8px;cursor:pointer;transition:0.3s;} .blabla-tab-btn.active{background:rgba(255,255,255,0.15);color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start;} @media (min-width:650px){.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:4px; width:100%; } .card-price { color:var(--time-green); font-size:12px; font-weight:700; flex-shrink:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; margin:0;} .card-info { font-size:10px; color:rgba(255,255,255,0.6); font-weight:500; text-align:right; flex-shrink:0; white-space:nowrap; }
.gallery-preview { text-align:center; background:rgba(255,255,255,0.05); border-radius:8px; margin-bottom:10px; padding:5px; cursor:pointer; } .gallery-preview img { width:100%; max-height:250px; object-fit:contain; border-radius:6px; } .gallery-text { font-size:10px; color:rgba(255,255,255,0.5); margin-top:4px; font-weight:600; }
.empty-msg { text-align:center; padding:20px; color:rgba(255,255,255,0.5); font-weight:500; font-size:13px;} .card-desc { font-size:11px; color:rgba(255,255,255,0.8); line-height:1.4; word-break:break-word; overflow-wrap:anywhere; }
.job-scroll-desc::-webkit-scrollbar { width: 4px; } .job-scroll-desc::-webkit-scrollbar-track { background: transparent; } .job-scroll-desc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.scroll-indicator { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.95)); display: none; justify-content: center; align-items: flex-end; padding-bottom: 8px; pointer-events: none; opacity: 1; transition: opacity 0.3s; z-index: 10; border-radius: 0 0 16px 16px; box-sizing: border-box; }
.scroll-indicator span { color: var(--highlight-color); font-size: 16px; font-weight: 800; text-shadow: 0 2px 4px rgba(0,0,0,0.8); display: inline-block; animation: blinkArrowDown 1.5s infinite; transform: rotate(90deg); }
@keyframes blinkArrowDown { 0%, 100% { transform: translateY(0) rotate(90deg); opacity: 0.3; } 50% { transform: translateY(4px) rotate(90deg); opacity: 1; } }
.blabla-card{background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(0,0,0,0.2));border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:10px;box-shadow:0 4px 10px rgba(0,0,0,0.2);display:flex;flex-direction:column;gap:6px;font-size:11px;min-width:0;box-sizing:border-box;} .blabla-route{font-size:12px;font-weight:700;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2;word-break:break-word;overflow-wrap:anywhere;} .blabla-date{font-size:10px;color:var(--highlight-color);font-weight:600;line-height:1.2;word-break:break-word;overflow-wrap:anywhere;} .blabla-info-row{display:flex;flex-direction:column;font-size:10px;color:rgba(255,255,255,0.8);background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:8px;align-items:flex-start;gap:4px;word-break:break-word;overflow-wrap:anywhere;} .blabla-phone{font-size:12px;font-weight:700;color:var(--time-green);text-decoration:none}
.custom-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:99999;display:flex;justify-content:center;align-items:center;overflow-y:auto;padding:20px;pointer-events:none;transition:opacity 0.3s ease; opacity:0;} .custom-modal-overlay.active{opacity:1;pointer-events:auto}
.custom-modal-box{width:100%;max-width:400px;margin:auto;background:linear-gradient(145deg,rgba(20,30,50,0.9),rgba(10,15,30,0.95));border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:25px 20px;box-shadow:0 20px 50px rgba(0,0,0,0.5);transform:translateY(20px) scale(0.95);transition:transform 0.3s ease;position:relative} .custom-modal-overlay.active .custom-modal-box{transform:translateY(0) scale(1)}
.close-modal-btn{position:absolute;top:15px;right:15px;width:32px;height:32px;border-radius:50%;background:rgba(255,77,77,0.15);border:1px solid rgba(255,77,77,0.3);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:0;padding-bottom:3px;font-weight:bold;cursor:pointer;color:#ff4d4d;transition:all 0.2s ease;} .close-modal-btn:active{transform:scale(0.9); background:rgba(255,77,77,0.3);}
.form-title{margin:0 0 20px 0;font-size:16px;font-weight:700;text-align:center;text-transform:uppercase;color:var(--highlight-color)} .form-group{display:flex;flex-direction:column;margin-bottom:12px} .form-row{display:flex;gap:10px} .form-row .form-group{flex:1} .form-label{font-size:11px;font-weight:600;margin-bottom:5px;color:rgba(255,255,255,0.7);text-transform:uppercase}
.form-input{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color 0.2s;width:100%;max-width:100%;box-sizing:border-box;margin:0} input[type="date"].form-input, input[type="time"].form-input{ -webkit-appearance:none; appearance:none; display:block; width:100%; } .form-input:focus{border-color:var(--time-green);background:rgba(0,0,0,0.5)} .form-input::placeholder{color:rgba(255,255,255,0.4)} textarea.form-input{resize:none} select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:20px;padding-right:30px} select.form-input option{background:#0b1d3a;color:#fff} input[type="file"].form-input{padding:8px;font-size:12px}
.captcha-group { background: rgba(0,0,0,0.2); padding: 12px; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.1); margin-top: 5px; } .captcha-label { text-transform: none; color: #fff; } .captcha-expr { color: var(--time-green); font-size: 14px; } .captcha-input { text-align: center; font-weight: bold; font-size: 15px; }
.form-submit-btn{width:100%;padding:14px;margin-top:10px;border:none;border-radius:14px;font-size:15px;font-weight:700;color:#0b1d3a;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:transform 0.2s} .form-submit-btn.driver{background:linear-gradient(135deg,#00ff9c,#00b8ff)} .form-submit-btn.passenger{background:linear-gradient(135deg,#ffcc00,#ff8800)} .form-submit-btn.flea,.form-submit-btn.lost,.form-submit-btn.estate{background:linear-gradient(135deg,#00ff9c,#00b8ff)} .form-submit-btn.promo{background:linear-gradient(135deg,#ff3366,#ff9f43); color: #fff;} .form-submit-btn:active{transform:translateY(2px)}
.image-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.98);z-index:100000;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;transition:opacity 0.3s ease; opacity:0;} .image-modal.active{opacity:1;pointer-events:auto;touch-action:none} .image-modal-slider{width:100%;height:100%;overflow:hidden;position:relative} .image-modal-track{display:flex;width:100%;height:100%;transition:transform 0.3s cubic-bezier(0.25,1,0.5,1);will-change:transform} .image-modal-slide{flex:0 0 100%;width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative} .image-modal-slide img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 0.3s ease;} .image-modal-close{position:absolute;top:20px;right:20px;color:#ff4d4d;font-size:36px;font-weight:400;cursor:pointer;background:rgba(0,0,0,0.6);border:1px solid rgba(255,77,77,0.3);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:100001;transition:0.2s;line-height:0;padding-bottom:4px;} .image-modal-close:active{transform:scale(0.9); background:rgba(255,77,77,0.2);} #modal-image-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-weight:700;font-size:14px;background:rgba(0,0,0,0.5);padding:6px 14px;border-radius:14px;z-index:100001;display:none}
.flea-categories-wrapper { display: flex; overflow-x: auto; gap: 8px; padding: 5px 15px 15px 15px; scrollbar-width: none; -ms-overflow-style: none; align-items: center; } .flea-categories-wrapper::-webkit-scrollbar { display: none; } .flea-category-tag { padding: 6px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; cursor: pointer; transition: all 0.3s ease; } .flea-category-tag.active { background: linear-gradient(135deg, #00ff9c, #00b8ff); color: #0b1d3a; border-color: transparent; box-shadow: 0 4px 15px rgba(0, 255, 156, 0.3); } #estate-categories .flea-category-tag.active { background: linear-gradient(135deg, #ff9f43, #ff6b6b); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3); }
.beta-drawer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; cursor: default; } .beta-drawer.open { max-height: 500px; opacity: 1; padding-top: 15px; }
.equalizer { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-left: auto; transition: opacity 0.3s; margin-right: 5px; opacity:0.2;} .equalizer.playing { opacity: 1; } .eq-bar { width: 4px; height: 4px; background: linear-gradient(to top, #00ff9c 0%, #00ff9c 75%, #ff3b3b 75%, #ff3b3b 100%); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5); transition: height 0.15s ease; } .equalizer.playing .eq-bar:nth-child(1) { animation: eq-1 1.2s infinite ease-in-out; } .equalizer.playing .eq-bar:nth-child(2) { animation: eq-2 1.4s infinite ease-in-out; } .equalizer.playing .eq-bar:nth-child(3) { animation: eq-3 1.1s infinite ease-in-out; } .equalizer.playing .eq-bar:nth-child(4) { animation: eq-4 1.3s infinite ease-in-out; } .equalizer.playing .eq-bar:nth-child(5) { animation: eq-5 1.5s infinite ease-in-out; }
@keyframes eq-1 { 0%, 100% { height: 4px; } 25% { height: 100%; } 50% { height: 30%; } 75% { height: 80%; } } @keyframes eq-2 { 0%, 100% { height: 4px; } 20% { height: 60%; } 40% { height: 100%; } 80% { height: 20%; } } @keyframes eq-3 { 0%, 100% { height: 4px; } 30% { height: 80%; } 60% { height: 40%; } 90% { height: 100%; } } @keyframes eq-4 { 0%, 100% { height: 4px; } 15% { height: 50%; } 45% { height: 100%; } 75% { height: 60%; } } @keyframes eq-5 { 0%, 100% { height: 4px; } 35% { height: 100%; } 65% { height: 30%; } 85% { height: 70%; } }
.workua-drawer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; } .workua-drawer.open { max-height: 5000px; opacity: 1; margin-top: 10px; } .section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); margin: 15px 0; } 
.jobs-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px 10px 15px 10px; scrollbar-width: none; -ms-overflow-style: none; } 
.jobs-carousel::-webkit-scrollbar { display: none; } 
.jobs-carousel-card { flex: 0 0 90%; max-width: 350px; scroll-snap-align: center; } @media (min-width: 650px) { .jobs-carousel-card { flex: 0 0 45%; } } .jobs-carousel .vip-job-card { width: 100% !important; margin: 0 !important; max-width: 100% !important; }
.modal-mini-guide { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px 12px; font-size: 11px; opacity: 0.9; margin-bottom: 15px; text-align: left; line-height: 1.4; } .load-more-btn { width:100%; padding:14px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:12px; color:#fff; font-weight:700; margin-top:15px; cursor:pointer; transition:0.2s; } .load-more-btn:active { background:rgba(255,255,255,0.2); }
.pb-search-container { position: sticky; top: -15px; z-index: 10; padding: 10px 0; margin-bottom: 5px; background: linear-gradient(to bottom, rgba(11,29,58,1) 80%, rgba(11,29,58,0)); } .pb-category-section { margin-bottom: 24px; } .pb-category-header { font-size: 14px; font-weight: 600; color: #e2e8f0; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; padding-left: 4px; } .pb-category-header span { font-size: 18px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); } .pb-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; align-items: stretch; } @media (min-width: 650px) { .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pb-tile { background: rgba(10, 20, 40, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s; min-width: 0; box-sizing: border-box; } .pb-tile:active { transform: scale(0.98); } .pb-tile-title { font-size: 13px; font-weight: 600; color: #f8fafc; line-height: 1.4; word-break: break-word; flex: 1; min-width: 0; } .pb-tile-phones { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: flex-end; } .pb-phone-btn { background: transparent; color: #00ff9c; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 12px; border: 1px solid rgba(0, 255, 156, 0.5); transition: background 0.2s, border-color 0.2s; text-align: center; white-space: nowrap; letter-spacing: 0.5px; } .pb-phone-btn:hover { border-color: #00ff9c; background: rgba(0, 255, 156, 0.05); } .pb-phone-btn:active { background: rgba(0, 255, 156, 0.15); }

/* Бігуча стрічка (Ticker) */
.ticker-wrap { width: 100%; overflow: hidden; background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(10, 15, 30, 0.7)); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 10px 0; margin-bottom: 8px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); -webkit-text-size-adjust: none; text-size-adjust: none; }
.ticker-move { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ticker 15s linear infinite; -webkit-text-size-adjust: none; text-size-adjust: none; }
.ticker-move:hover { animation-play-state: paused; cursor: default; }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
.ticker-item { display: inline-block; vertical-align: middle; font-size: 13px !important; font-weight: 700 !important; color: #ffffff; padding: 0 15px; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.9); line-height: 1.2; -webkit-text-size-adjust: none; text-size-adjust: none; }
.ticker-divider { display: inline-block; vertical-align: middle; color: var(--time-green); font-size: 10px !important; }