/* STREAMING_CHUNK: Global imports and overflow settings... /
/ ==========================================
CLIP KINGS BARBER SHOP - MAIN CSS ENTRY
========================================== */

@import "variables.css";
@import "reset.css";
@import "typography.css";
@import "components.css";
@import "animations.css";
@import "pages.css";
@import "chatbot.css";
@import "responsive.css";

/* GLOBAL OVERFLOW FIX */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* HEADER FIX REMOVED - Using native pages.css transitions */

/* STREAMING_CHUNK: Configuring Apple Vision Pro Carousel... /
/ ==========================================
APPLE VISION PRO CAROUSEL
========================================== */
.vision-carousel-container {
width: 100%;
overflow: hidden;
padding: 60px 0;
perspective: 1200px;
}
.vision-carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
align-items: center;
gap: 30px;
padding: 20px 0;
-ms-overflow-style: none;
scrollbar-width: none;
cursor: grab;
}
.vision-carousel-track:active {
cursor: grabbing;
}
.vision-carousel-track::-webkit-scrollbar {
display: none;
}
.vision-carousel-spacer {
flex: 0 0 calc(50vw - 225px);
}
.vision-carousel-item {
flex: 0 0 450px;
scroll-snap-align: center;
background: rgba(5,5,5,0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(212,175,55,0.1);
border-radius: 20px;
padding: 20px;
transform: scale(0.85);
opacity: 0.5;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
will-change: transform, opacity;
}
.vision-carousel-item.active-reel {
transform: scale(1);
opacity: 1;
border-color: rgba(212,175,55,0.8);
box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 30px rgba(212,175,55,0.4);
z-index: 10;
}
.vision-carousel-item iframe {
width: 100% !important;
max-width: 100% !important;
border-radius: 12px !important;
}
.vision-fallback-btn {
display: block;
text-align: center;
margin-top: 20px;
padding: 15px;
border: 1px solid var(--color-gold);
background: transparent;
color: var(--color-gold);
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
}
.vision-fallback-btn:hover {
background: var(--color-gold);
color: #000;
box-shadow: 0 5px 15px rgba(212,175,55,0.4);
}
@media (max-width: 768px) {
.vision-carousel-item {
flex: 0 0 85vw;
}
.vision-carousel-spacer {
flex: 0 0 calc(50vw - 42.5vw);
}
}

/* STREAMING_CHUNK: Setting up premium barber transition effects... /
/ ==========================================
PREMIUM BARBER TRANSITION
========================================== */
.barber-transition-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
z-index: 9999;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.barber-slice {
position: absolute;
top: 0; width: 50%; height: 100vh; height: 100dvh;
background: #050505;
transform: scaleX(0);
}
.slice-left {
left: 0;
transform-origin: left;
border-right: 2px solid var(--color-gold);
}
.slice-right {
right: 0;
transform-origin: right;
border-left: 2px solid var(--color-gold);
}
.barber-logo {
position: absolute;
font-size: 4rem;
opacity: 0;
transform: scale(0.8) rotate(-5deg);
letter-spacing: 5px;
z-index: 10000;
text-shadow: 0 0 20px rgba(212,175,55,0.5);
}

/* STREAMING_CHUNK: Fixing Split Screen Hero Video & Text Alignment... /
/ ==========================================
SPLIT SCREEN HERO
========================================== /
.cinematic-hero-split {
position: relative;
width: 100%;
min-height: 100vh; min-height: 100dvh;
background-color: #020202;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-split-container {
display: flex;
width: 100%;
min-height: 100vh; min-height: 100dvh;
}
.hero-text-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/ FIX: Aligning text items to the left perfectly /
align-items: flex-start;
text-align: left;
padding: 0 5vw;
z-index: 10;
position: relative;
}
.hero-image-col {
flex: 1;
position: relative;
z-index: 5;
/ FIX: Added to center video tags perfectly /
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/ FIX: Included 'video' element for alignment issue alongside image /
.hero-split-img,
.hero-image-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: brightness(0.9) contrast(1.1);
}
.hero-split-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(2,2,2,1) 0%, rgba(2,2,2,0.5) 25%, rgba(2,2,2,0.1) 100%);
pointer-events: none;
}
@media (max-width: 991px) {
.hero-text-col {
padding: 0 4vw;
}
.hero-split-overlay {
background: linear-gradient(90deg, rgba(2,2,2,1) 0%, rgba(2,2,2,0.6) 40%, rgba(2,2,2,0.1) 100%);
}
}
@media (max-width: 768px) {
.hero-split-container {
flex-direction: column-reverse;
/ FIX: Changed to auto so text does not cut off /
height: auto;
}
.hero-image-col {
/* FIX: Use aspect-ratio instead of rigid vh to scale correctly on all devices */
width: 100%;
aspect-ratio: 4/3;
height: auto;
flex: none;
}
.hero-text-col {
/ FIX: Made height auto and added min-height to prevent alignment overlap */
height: auto;
min-height: 50vh;
padding: 50px 5vw;
flex: none;
align-items: center;
text-align: center;
}
.hero-split-overlay {
background: linear-gradient(0deg, rgba(2,2,2,1) 0%, rgba(2,2,2,0.4) 30%, rgba(2,2,2,0) 100%);
}
.btn-group {
justify-content: center;
}
}

/* STREAMING_CHUNK: Applying general global layout fixes... /
/ GLOBAL LAYOUT FIXES (Flexbox Grid) */
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
max-width: 100%;
}
@media (max-width: 768px) {
.row {
margin-right: 0;
margin-left: 0;
}
}
.col-md-5, .col-md-7, .col-md-4, .col-md-6 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
}
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.gap-3 { gap: 1rem !important; }
.text-end { text-align: right !important; }
.w-100 { width: 100% !important; }
.mt-auto { margin-top: auto !important; }

/* STREAMING_CHUNK: Styling luxury glassmorphism cards... /
/ LUXURY GLASSMORPHISM UPGRADES */
.glass-card {
background: rgba(15, 15, 15, 0.4) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(212, 175, 55, 0.15) !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.glass-card:hover, .glass-card.touch-active {
border-color: rgba(212, 175, 55, 0.8) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.15) !important;
transform: translateY(-5px) !important;
background: rgba(20, 20, 20, 0.6) !important;
}
.glass-card .service-price, .glass-card .price-new {
text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* STREAMING_CHUNK: Configuring global booking popup and chatbot... /
/ GLOBAL BOOKING POPUP */
.booking-popup-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.booking-popup-overlay.active {
opacity: 1;
pointer-events: all;
}
.booking-popup-content {
background: linear-gradient(145deg, #151515, #050505);
border: 1px solid rgba(212,175,55,0.4);
padding: 50px;
border-radius: 16px;
max-width: 500px;
width: 90%;
text-align: center;
transform: translateY(30px) scale(0.95);
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(212,175,55,0.15);
}
.booking-popup-overlay.active .booking-popup-content {
transform: translateY(0) scale(1);
}

/* ==========================================
POPUP & CHATBOT RESPONSIVE FIXES FOR MOBILE
========================================== /
.booking-popup-content,
#exit-popup > div {
max-height: 85dvh;
overflow-y: auto;
/ Custom scrollbar for a clean look */
scrollbar-width: thin;
scrollbar-color: var(--color-gold) transparent;
}

@media (max-width: 768px) {
.booking-popup-content,
#exit-popup > div {
padding: 30px 20px !important;
width: 92% !important;
}

/* Ensure close buttons stay inside the screen and are easily clickable */
#exit-close-btn,
.close-btn,
.popup-close {
    top: 15px !important;
    right: 15px !important;
    position: absolute !important;
    z-index: 10005 !important;
}

/* CHATBOT WINDOW FIX */
.chat-window, .chatbot-container, #chat-widget, iframe[id*="chat"] {
    max-height: 80dvh !important;
    /* Width screen se choti rakhi hai (30px total margin) */
    width: calc(100% - 30px) !important;
    max-width: 400px !important;
    bottom: 80px !important; 
    right: 15px !important;
    
    /* IMP: Left ko auto kar diya aur transform hata diya jisse bahar na bhage */
    left: auto !important; 
    transform: none !important;
    margin: 0 !important;
    
    z-index: 9950 !important; 
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* CHAT ICON BUTTON FIX */
.chat-bubble, #chat-button, .chat-icon {
    bottom: 20px !important; 
    right: 15px !important;
    left: auto !important;
    transform: none !important;
    z-index: 9950 !important;
}


}