.routes-page{min-height:100vh;opacity:0;animation:fadeIn .6s ease-in-out forwards}@keyframes fadeIn{to{opacity:1}}.routes-hero{padding:120px 24px 80px;text-align:center;background:linear-gradient(135deg,rgba(0,0,0,.8),rgba(0,0,0,.6));position:relative}.hero-content{max-width:800px;margin:0 auto}.hero-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;margin-bottom:24px;background:linear-gradient(135deg,#ffffff,#F7D44C 50%,#ffffff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0}50%{background-position:100%}}.hero-subtitle{font-size:clamp(1.125rem,2vw,1.5rem);color:rgba(255,255,255,.9);line-height:1.6;max-width:700px;margin:0 auto}.routes-section{padding:80px 24px;background:#000}.section-container{max-width:1400px;margin:0 auto}.empty-state,.error-state,.loading-state{text-align:center;padding:80px 24px;color:rgba(255,255,255,.7)}.loading-spinner{width:50px;height:50px;border:4px solid rgba(247,212,76,.2);border-top-color:#f7d44c;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}@keyframes spin{to{transform:rotate(1turn)}}.error-state{color:#ff6b6b}.routes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));grid-gap:32px;gap:32px;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.route-card{background:linear-gradient(135deg,rgba(20,20,20,.8),rgba(30,30,30,.6));border-radius:16px;overflow:hidden;transition:all .3s ease;border:1px solid rgba(247,212,76,.1);cursor:pointer}.route-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(247,212,76,.15);border-color:rgba(247,212,76,.3)}.route-image-container{position:relative;width:100%;height:280px;overflow:hidden;background:#1a1a1a}.route-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.route-card:hover .route-image{transform:scale(1.05)}.route-thumbnail-overlay{position:absolute;top:16px;left:16px;width:80px;height:80px;border-radius:8px;overflow:hidden;border:3px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.route-thumbnail{width:100%;height:100%;object-fit:cover}.route-badges{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.route-type-badge{padding:6px 12px;border-radius:20px;font-size:.875rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-transform:capitalize;display:inline-block}.route-type-badge.countryside{background:rgba(46,204,113,.9);color:#fff}.route-type-badge.highway{background:rgba(52,152,219,.9);color:#fff}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:white;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.carousel-button:hover{background:rgba(0,0,0,.8);transform:translateY(-50%) scale(1.1)}.carousel-prev{left:12px}.carousel-next{right:12px}.carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,.3)}.carousel-dot:hover{background:rgba(255,255,255,.7);transform:scale(1.2)}.carousel-dot.active{background:#F7D44C;border-color:#F7D44C;width:24px;border-radius:4px}.route-content{padding:20px}.route-creator{display:flex;align-items:center;gap:10px;margin-bottom:16px}.creator-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0}.creator-avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.creator-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F7D44C,#ffa500);color:#000;font-weight:700;font-size:1rem;text-transform:uppercase}.creator-info{display:flex;flex-direction:column;gap:2px;min-width:0}.creator-name{color:#fff;font-size:.85rem;font-weight:600}.creator-name,.creator-username{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator-username{color:rgba(255,255,255,.5);font-size:.75rem}.route-title{font-size:1.375rem;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.3}.route-description,.route-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.route-description{color:rgba(255,255,255,.65);font-size:.9rem;line-height:1.6;margin-bottom:16px;min-height:3rem}.route-stats{display:flex;gap:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.route-stat{display:flex;align-items:center;gap:6px}.stat-icon{font-size:1.1rem;opacity:.8}.stat-value{color:#F7D44C;font-weight:600;font-size:.9rem}.routes-cta-section{padding:80px 24px;background:linear-gradient(135deg,rgba(247,212,76,.1),rgba(0,0,0,.8));text-align:center}.cta-content{max-width:800px;margin:0 auto}.cta-title{font-size:clamp(2rem,5vw,3rem);font-weight:800;color:#fff;margin-bottom:24px;line-height:1.2}.cta-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:40px;max-width:700px;margin-left:auto;margin-right:auto}.cta-button-wrapper{display:flex;justify-content:center;gap:16px}@media (max-width:1024px){.routes-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}}@media (max-width:768px){.routes-hero{padding:100px 16px 50px}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.125rem}.routes-section{padding:60px 16px}.routes-grid{grid-template-columns:1fr;gap:24px}.route-image-container{height:240px}.route-content{padding:18px}.creator-avatar{width:32px;height:32px}.creator-name{font-size:.8rem}.creator-username{font-size:.7rem}.route-title{font-size:1.2rem}.route-description{font-size:.85rem;min-height:2.8rem;margin-bottom:14px}.route-stats{gap:16px;padding-top:14px}.stat-icon{font-size:1rem}.stat-value{font-size:.85rem}.routes-cta-section{padding:60px 16px}.cta-title{font-size:2rem}.cta-subtitle{font-size:1rem;margin-bottom:32px}}@media (max-width:480px){.routes-hero{padding:90px 12px 40px}.hero-title{font-size:1.875rem}.hero-subtitle{font-size:1rem}.routes-section{padding:40px 12px}.route-image-container{height:200px}.route-content{padding:16px}.route-thumbnail-overlay{width:60px;height:60px;top:12px;left:12px;border-width:2px}.route-badges{top:12px;right:12px}.route-type-badge{padding:4px 10px;font-size:.75rem}.carousel-button{width:32px;height:32px;font-size:20px}.carousel-prev{left:8px}.carousel-next{right:8px}.carousel-dots{bottom:8px;gap:6px}.carousel-dot{width:6px;height:6px}.carousel-dot.active{width:18px}.creator-avatar{width:30px;height:30px}.creator-avatar-placeholder{font-size:.9rem}.creator-name{font-size:.75rem}.creator-username{font-size:.65rem}.route-title{font-size:1.1rem}.route-description{font-size:.8rem;min-height:2.5rem;margin-bottom:12px}.route-stats{flex-direction:column;gap:10px;padding-top:12px}.stat-value{font-size:.8rem}.routes-cta-section{padding:50px 12px}.cta-title{font-size:1.75rem}.cta-subtitle{font-size:.95rem;margin-bottom:28px}.cta-button-wrapper{flex-direction:column;align-items:center}}