:root {
    --bg-dark: #110e15; 
    --bg-card: #1c1822;
    --bg-modal: #18151f;
    --accent: #00d2ff; 
    --accent-hover: #00b8e6;
    --accent-red: #e50914;
    --text-main: #ffffff;
    --text-muted: #8e8e93;
    --seat-free: #333335;
    --seat-selected: #00d2ff;
    --seat-occupied: #111115;
}

body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-dark); color: var(--text-main); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

.cinema-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(17, 14, 21, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #222; }
.logo { font-size: 22px; font-weight: 900; letter-spacing: 1px; }
.logo span { color: var(--accent-red); }
.header-actions { display: flex; gap: 15px; align-items: center; }

.support-link { text-decoration: none; color: var(--accent); font-size: 14px; display: flex; align-items: center; font-weight: 500; transition: color 0.2s; }
.support-link:hover { color: white; }

.city-selector-btn, .mobile-login-link { background: transparent; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 0.2s; }
.city-selector-btn:hover, .mobile-login-link:hover { color: white; }
.catalog-section { padding: 20px; max-width: 1400px; margin: 0 auto; }
.section-title { font-size: 24px; margin: 0 0 5px 0; font-weight: 600; }
.subtitle-text { color: var(--text-muted); font-size: 14px; margin-bottom: 25px; }
.promo-section-title { font-size: 18px; color: var(--text-muted); margin: 30px 0 15px 0; text-transform: uppercase; letter-spacing: 1px; }

.movies-ultimate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 25px; }
.movie-card { display: flex; flex-direction: column; background: transparent; cursor: pointer; transition: transform 0.2s ease; }
.movie-card:hover { transform: scale(1.03); }
.movie-card-poster { border-radius: 12px; overflow: hidden; aspect-ratio: 2/3; margin-bottom: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); position: relative; }
.movie-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movie-meta-bottom { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.badge-outline { border: 1px solid #555; padding: 2px 5px; border-radius: 4px; font-size: 11px; font-weight: 500; color: #ccc; }
.badge-coming-soon { position: absolute; top: 10px; right: 10px; background: var(--accent-red); color: white; font-size: 10px; padding: 4px 8px; border-radius: 6px; font-weight: bold; text-transform: uppercase; box-shadow: 0 2px 10px rgba(229, 9, 20, 0.5); }
.movie-genre-text { font-size: 13px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.movie-title-bottom { margin: 0; font-size: 16px; font-weight: 500; color: #fff; line-height: 1.2; }

.promo-banner-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 15px; }
.promo-banner-slider::-webkit-scrollbar { display: none; }
.promo-banner { flex: 0 0 100%; max-width: 700px; height: 300px; scroll-snap-align: center; border-radius: 16px; position: relative; overflow: hidden; display: flex; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: transform 0.2s; }
.promo-banner:hover { transform: scale(1.02); }
.promo-bg { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-size: cover; background-position: center; filter: blur(20px) brightness(0.4); z-index: 1; }
.promo-content { position: relative; z-index: 2; display: flex; width: 100%; padding: 25px; gap: 25px; align-items: center; background: linear-gradient(to right, rgba(0,0,0,0.8), transparent); }
.promo-poster { height: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.8); }
.promo-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.promo-info h2 { margin: 0 0 10px 0; font-size: 28px; line-height: 1.2; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.promo-info p { color: #ddd; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px; }
.promo-btn { background: var(--accent-red); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 14px; width: max-content; }

.hidden { display: none !important; }
.overlay-modal, .booking-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 20px; }
.mini-modal-content { background: var(--bg-card); width: 100%; max-width: 350px; padding: 25px; border-radius: 16px; border: 1px solid #2a2535; }
.mini-modal-content h3 { margin-top: 0; text-align: center; }
.mini-modal-content input { width: 100%; background: #131118; border: 1px solid #444; color: white; padding: 12px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; outline: none; }
.city-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; max-height: 50vh; overflow-y: auto; padding-right: 5px;}
.city-list::-webkit-scrollbar { width: 4px; }
.city-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.city-option { background: #2a2535; border: none; color: white; padding: 12px; border-radius: 8px; cursor: pointer; }
.city-option:hover { background: var(--accent-red); }

.flow-wrapper { background: var(--bg-modal); width: 100%; max-width: 850px; min-height: 600px; max-height: 95vh; border-radius: 16px; overflow-y: auto; position: relative; border: 1px solid #2a2535; box-shadow: 0 20px 50px rgba(0,0,0,0.8); -ms-overflow-style: none; scrollbar-width: none; }
.flow-wrapper::-webkit-scrollbar { display: none; }
.close-modal-btn { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 100; }
.step-container { padding: 40px; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.flow-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2535; padding-bottom: 15px; margin-bottom: 20px; }
.step-title-center { margin: 0; font-size: 20px; text-align: center; flex: 1; }
.mini-cart-total { font-weight: bold; color: var(--accent-red); font-size: 16px; min-width: 60px; text-align: right; }
.context-movie-title { font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 25px; margin-top: -10px; font-weight: 500; }

.movie-details-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.details-poster-col img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.detail-main-title { font-size: 32px; margin: 0 0 15px 0; line-height: 1.2; }
.detail-badges { display: flex; gap: 10px; margin-bottom: 25px; align-items: center; flex-wrap: wrap; }
.detail-genre-text { color: var(--text-muted); font-size: 15px; }
.detail-release-text { color: var(--accent-red); font-weight: bold; font-size: 14px; }
.detail-meta-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; background: #1c1822; padding: 20px; border-radius: 12px; border: 1px solid #2a2535; }
.meta-item { font-size: 14px; color: #ccc; line-height: 1.4; }
.meta-item span:first-child { color: var(--text-muted); width: 90px; display: inline-block; font-weight: 500; }
.detail-description h3 { font-size: 18px; margin: 0 0 10px 0; color: #fff; }
.detail-description p { font-size: 14px; color: #bbb; line-height: 1.6; margin: 0 0 30px 0; }
.detail-action-footer { display: flex; justify-content: space-between; align-items: center; background: #131118; padding: 15px 25px; border-radius: 12px; border: 1px solid #2a2535; }
.detail-price-hint { font-size: 18px; font-weight: bold; color: var(--accent-red); }

.bar-tabs-container { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 15px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.bar-tabs-container::-webkit-scrollbar { display: none; }
.bar-tab { padding: 10px 20px; background: #2a2535; border-radius: 12px; white-space: nowrap; color: var(--text-muted); font-size: 14px; font-weight: bold; cursor: pointer; border: none; scroll-snap-align: start; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-tab.active { background: var(--accent-red); color: white; }
.bar-tab .day-name { font-size: 11px; font-weight: normal; opacity: 0.8; }

.cinemas-vertical-list { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; padding-right: 5px; }
.cinemas-vertical-list::-webkit-scrollbar { width: 4px; }
.cinemas-vertical-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.cinema-select-btn { background: #2a2535; border: 1px solid #444; color: white; padding: 14px 15px; border-radius: 10px; text-align: left; font-size: 14px; cursor: pointer; transition: 0.2s; }
.cinema-select-btn:hover { background: #3a3345; }
.cinema-select-btn.active { border-color: var(--accent-red); background: rgba(229, 9, 20, 0.1); }

.sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; }
.session-btn { background: #2a2535; border: none; color: white; padding: 15px 10px; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: bold; transition: background 0.2s; text-align: center; }
.session-btn:hover { background: var(--accent-red); }

.hall-interaction-area { position: relative; background: #131118; border-radius: 12px; border: 1px solid #2a2535; overflow: hidden; margin-bottom: 25px; }
.hall-zoom-controls { position: absolute; top: 15px; right: 15px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.hall-zoom-controls button { width: 40px; height: 40px; border-radius: 50%; background: #2a2535; border: 1px solid #444; color: white; font-size: 22px; cursor: pointer; transition: 0.2s; }
.hall-zoom-controls button:hover { background: #444; }
.interactive-hall-viewport { width: 100%; height: 350px; overflow: auto; padding: 20px; cursor: grab; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.interactive-hall-viewport::-webkit-scrollbar { display: none; }
.interactive-hall-wrapper { display: inline-flex; flex-direction: column; align-items: center; min-width: max-content; transition: transform 0.2s ease-out; transform-origin: top center; }
.cinema-glowing-screen { background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent); width: 80%; height: 20px; margin-bottom: 40px; border-top-left-radius: 50%; border-top-right-radius: 50%; text-align: center; line-height: 20px; font-size: 10px; letter-spacing: 5px; color: #777; }
.dynamic-hall-grid { display: flex; flex-direction: column; gap: 10px; }
.seat-row { display: flex; gap: 8px; align-items: center; }
.row-number { color: #555; font-size: 13px; width: 20px; text-align: right; margin-right: 10px; font-weight: bold; }
.seat { width: 32px; height: 32px; background: var(--seat-free); border-radius: 6px 6px 4px 4px; display: flex; justify-content: center; align-items: center; font-size: 11px; color: #888; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.4); font-weight: bold; transition: background 0.1s; }
.seat:hover:not(.occupied) { background: #444; color: white; }
.seat.selected { background: var(--seat-selected); color: #000; font-weight: bold; box-shadow: 0 0 10px var(--seat-selected); }

.seat.occupied { 
    background: #222222; 
    color: #555555; 
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2); 
    cursor: not-allowed; 
}

.services-list-container { max-height: 400px; overflow-y: auto; margin-bottom: 20px; padding-right: 5px; }
.services-list-container::-webkit-scrollbar { width: 4px; }
.services-list-container::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.service-item { display: flex; background: #1c1822; padding: 15px; border-radius: 12px; gap: 15px; border: 1px solid #2a2535; margin-bottom: 15px; align-items: center; }
.service-img-box { width: 80px; height: 100px; flex-shrink: 0; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; }
.service-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.service-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.service-info h4 { margin: 0 0 10px 0; font-size: 16px; color: #fff; }
.service-selects { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 220px; }
.service-select { background: #131118; border: 1px solid #444; color: white; padding: 10px; border-radius: 8px; font-size: 14px; outline: none; cursor: pointer; }
.service-controls { display: flex; align-items: center; gap: 12px; background: #131118; padding: 8px; border-radius: 10px; align-self: stretch; }
.control-btn { width: 36px; height: 36px; border-radius: 8px; border: none; background: #2a2535; color: white; font-size: 20px; cursor: pointer; transition: background 0.2s; display:flex; align-items:center; justify-content:center;}
.control-btn:hover { background: #444; }
.service-qty { font-size: 18px; font-weight: bold; width: 24px; text-align: center; }

.step-navigation-buttons { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 20px; }
.nav-btn-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 10px 0; transition: color 0.2s; }
.nav-btn-back:hover { color: white; }
.action-accent-btn { background: var(--accent-red); color: white; border: none; padding: 14px 28px; font-size: 16px; font-weight: bold; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
.action-accent-btn:hover { background: #b80710; }
.full-width-btn { flex: 1; text-align: center; }

.receipt-paper { background: #e0e0e0; color: #111; padding: 25px; border-radius: 8px; font-family: monospace; position: relative; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.receipt-paper::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(45deg, transparent, transparent 5px, #e0e0e0 5px, #e0e0e0 10px); }
.receipt-title { text-align: center; margin: 0 0 15px 0; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.receipt-divider { border-top: 1px dashed #888; margin: 15px 0; }
.receipt-divider-thick { border-top: 2px dashed #444; margin: 20px 0; }
.receipt-row { font-size: 15px; margin-bottom: 8px; }
.receipt-sub-row { font-size: 13px; color: #444; margin-bottom: 10px; padding-left: 10px; line-height: 1.5; }
.receipt-total { font-size: 20px; font-weight: bold; text-align: right; }

.payment-instruction-banner { background: #1c1822; border: 1px solid var(--accent); padding: 25px; border-radius: 12px; margin-top: 20px; animation: fadeIn 0.3s ease; }
.payment-header h3 { margin: 0 0 10px 0; color: #fff; font-size: 20px;}
.payment-header p { color: #aaa; font-size: 14px; margin: 0 0 20px 0; line-height: 1.4; }
.payment-details-box { background: #131118; padding: 20px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #2a2535; }
.payment-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 15px; flex-wrap: wrap; gap: 10px;}
.payment-row:last-child { margin-bottom: 0; }
.payment-row span { color: #8e8e93; }
.payment-sum { font-size: 22px; color: var(--accent); }
.copy-box { display: flex; align-items: center; gap: 10px; }
.copy-btn { background: #2a2535; border: 1px solid #444; color: white; border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: 0.2s; font-size: 14px;}
.copy-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.payment-warning { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #444; font-size: 13px; color: #ffcc00; line-height: 1.5; }

.final-success-banner { text-align: center; padding: 40px 20px; animation: fadeIn 0.4s ease; }
.success-icon { font-size: 60px; margin-bottom: 20px; display: inline-block; animation: bounce 1s ease; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} }
.final-success-banner h2 { color: #28a745; margin-bottom: 15px; font-size: 26px;}
.final-success-banner p { color: #ccc; line-height: 1.6; margin-bottom: 30px; font-size: 15px;}

@media (max-width: 900px) {
    .promo-banner { max-width: 90vw; height: 250px; }
    .promo-poster { display: none; } 
    .promo-info h2 { font-size: 22px; }
}

@media (max-width: 768px) {
    .header-actions { flex-wrap: wrap; justify-content: flex-end; }
    .movies-ultimate-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 15px; padding-bottom: 20px; }
    .movies-ultimate-grid::-webkit-scrollbar { display: none; }
    .movie-card { flex: 0 0 150px; scroll-snap-align: start; }
    .movie-details-layout { grid-template-columns: 1fr; gap: 20px; }
    .details-poster-col { display: flex; justify-content: center; }
    .details-poster-col img { width: 180px; }
    .detail-main-title { font-size: 24px; text-align: center; }
    .detail-badges { justify-content: center; }
    .detail-action-footer { flex-direction: column; gap: 15px; }
    .full-width-btn { width: 100%; }
    .step-container { padding: 20px; }
    .close-modal-btn { top: 10px; right: 10px; background: rgba(0,0,0,0.5); }
    .sessions-grid { grid-template-columns: 1fr 1fr; }
    .service-item { flex-direction: column; align-items: stretch; }
    .service-img-box { width: 100px; height: 120px; align-self: center; }
    .service-selects { max-width: 100%; }
    .service-controls { justify-content: space-between; }
    .payment-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .copy-box { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
    .movie-card { flex: 0 0 140px; }
    .hall-interaction-area { margin: 0 -20px 20px; border-radius: 0; border-left: none; border-right: none; }
    .interactive-hall-viewport { height: 380px; }
}