/* Booking Widget */
.book-sec{padding:var(--sec) 0;position:relative;z-index:2;background:var(--bg)}
.book-widget{background:var(--bg2);border:1px solid var(--bd);border-radius:4px;display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;padding:3rem;box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.bw-form{display:flex;flex-direction:column;gap:1.5rem}
.bw-input-group{position:relative}
.bw-input-group i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:var(--ac);font-size:1.25rem}
.bw-input{width:100%;background:var(--bg3);border:1px solid var(--bd);color:var(--t1);padding:1rem 3rem 1rem 3rem;font-family:var(--f-body);font-size:0.875rem;outline:none;transition:border-color 0.3s;border-radius:2px}
.bw-input:focus{border-color:var(--ac)}
.gps-btn{position:absolute;top:50%;right:1rem;transform:translateY(-50%);background:none;border:none;color:var(--t2);font-size:1.25rem;cursor:pointer;transition:color 0.3s, transform 0.3s;display:flex;align-items:center;justify-content:center}
.gps-btn:hover{color:var(--ac);transform:translateY(-50%) scale(1.1)}
.bw-price-box{background:var(--bg4);padding:1.5rem;border-radius:2px;border:1px solid var(--bd);display:none;animation:fadeIn 0.5s}
.bw-price-box.active{display:block}
.bw-dist{font-size:0.875rem;color:var(--t2);margin-bottom:0.5rem}
.bw-price{font-family:var(--f-head);font-size:2rem;color:var(--ac);margin-bottom:1.5rem}
.bw-map{width:100%;height:100%;min-height:350px;background:var(--bg4);border:1px solid var(--bd);border-radius:2px}

/* Chatbot */
.chat-btn{position:fixed;bottom:2rem;right:2rem;width:60px;height:60px;background:var(--ac);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;font-size:1.5rem;cursor:pointer;z-index:9990;box-shadow:0 10px 30px rgba(197, 160, 89, 0.2);transition:transform 0.3s}
.chat-btn:hover{transform:scale(1.1)}
.chat-modal{position:fixed;bottom:6rem;right:2rem;width:380px;height:500px;background:rgba(10,10,10,0.85);backdrop-filter:blur(24px);border:1px solid var(--bd2);border-radius:8px;z-index:9990;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(20px);transition:all 0.4s cubic-bezier(0.19, 1, 0.22, 1)}
.chat-modal.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.chat-head{padding:1.5rem;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.chat-head h4{color:var(--t1);font-family:var(--f-body);font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase}
.chat-close{background:none;border:none;color:var(--t2);cursor:pointer;font-size:1.25rem}
.chat-close:hover{color:var(--ac)}
.chat-body{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.msg{padding:1rem 1.25rem;border-radius:4px;font-size:0.875rem;max-width:85%}
.msg.bot{background:var(--bg3);color:var(--t1);align-self:flex-start}
.msg.user{background:var(--ac);color:#000;align-self:flex-end}
.chat-input-area{padding:1rem;border-top:1px solid var(--bd);display:flex;gap:0.5rem}
.chat-input-area input{flex:1;background:var(--bg3);border:1px solid var(--bd);padding:0.75rem 1rem;color:var(--t1);outline:none;font-family:var(--f-body);border-radius:2px}
.chat-input-area button{background:var(--ac);color:#000;border:none;padding:0 1rem;cursor:pointer;border-radius:2px}


/* Advanced Payment Modal */
.pay-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(16px);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s}
.pay-overlay.active{opacity:1;pointer-events:auto}
.pay-modal{background:var(--bg2);border:1px solid var(--bd2);padding:0;border-radius:8px;width:100%;max-width:550px;position:relative;transform:translateY(30px) scale(0.95);transition:transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.8)}
.pay-overlay.active .pay-modal{transform:translateY(0) scale(1)}
.pay-close{position:absolute;top:1.5rem;right:1.5rem;background:rgba(255,255,255,0.05);border:1px solid var(--bd);color:var(--t2);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;cursor:pointer;transition:all 0.3s;z-index:10}
.pay-close:hover{background:var(--ac);color:#000;border-color:var(--ac);transform:rotate(90deg)}

.pay-header{padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid var(--bd);background:linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%)}
.pay-header h3{font-family:var(--f-head);font-size:1.75rem;margin-bottom:0.5rem;color:var(--t1)}
.pay-header p{color:var(--t3);font-size:0.875rem}

.pay-body{padding:2.5rem}

/* Methods Grid */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.pay-method{background:var(--bg3);border:1px solid var(--bd);padding:1.5rem 1rem;border-radius:6px;cursor:pointer;text-align:center;transition:all 0.3s;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.pay-method:hover{border-color:rgba(197, 160, 89, 0.5);background:var(--bg4)}
.pay-method.selected{border-color:var(--ac);background:rgba(197, 160, 89, 0.05);box-shadow:inset 0 0 0 1px var(--ac)}
.pay-method .iconify{font-size:2rem;color:var(--t1)}
.pay-method.selected .iconify{color:var(--ac)}
.pay-method span{font-family:var(--f-body);font-size:0.875rem;color:var(--t2);font-weight:500}
.pay-method.selected span{color:var(--t1)}

/* Dynamic Sections */
.pay-section{display:none;animation:fadeInUp 0.4s forwards}
.pay-section.active{display:block}

/* Card Form */
.card-form{display:flex;flex-direction:column;gap:1.25rem}
.cf-group{display:flex;flex-direction:column;gap:0.5rem}
.cf-group label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--t3)}
.cf-input{background:var(--bg);border:1px solid var(--bd);padding:1rem 1.25rem;color:var(--t1);font-family:var(--f-body);font-size:1rem;border-radius:4px;outline:none;transition:border-color 0.3s}
.cf-input:focus{border-color:var(--ac)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* QR Code */
.qr-container{text-align:center;padding:1rem 0}
.qr-wrapper{background:#fff;padding:1.5rem;display:inline-block;border-radius:8px;position:relative;margin-bottom:1.5rem}
.qr-wrapper img{width:180px;height:180px;display:block}
.qr-scanner{position:absolute;top:1.5rem;left:1.5rem;right:1.5rem;height:4px;background:var(--ac);box-shadow:0 0 15px var(--ac);animation:scan 2s linear infinite}
.qr-note{font-size:0.875rem;color:var(--t2)}

/* Loader & Success */
.pay-status{text-align:center;padding:3rem 0;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.spinner{width:50px;height:50px;border:3px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:spin 1s linear infinite}
.success-icon{width:70px;height:70px;background:rgba(197, 160, 89, 0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:2.5rem;animation:scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.pay-status h4{font-family:var(--f-head);font-size:1.5rem;color:var(--t1)}
.pay-status p{color:var(--t2);font-size:0.875rem}

.pay-submit{width:100%;margin-top:2.5rem;display:flex;justify-content:center;font-size:1rem;padding:1.25rem}

@keyframes fadeInUp { from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:translateY(0)} }
@keyframes scan { 0%{top:1.5rem} 50%{top:calc(100% - 1.5rem - 4px)} 100%{top:1.5rem} }
@keyframes spin { to {transform:rotate(360deg)} }
@keyframes scaleIn { from {transform:scale(0);opacity:0} to {transform:scale(1);opacity:1} }

@media(max-width:768px) {
  .book-widget{grid-template-columns:1fr;padding:1.5rem}
  .bw-map{min-height:250px}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 2. Film Grain Overlay */
.awwwards-grain{position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;width:200%;height:200%;background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png');background-repeat:repeat;opacity:0.04;pointer-events:none;z-index:99990;animation:grain 1.5s steps(4) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}60%{transform:translate(15%,0%)}70%{transform:translate(0%,15%)}80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}

/* 3. Advanced Text Reveal (Clip-path lines) */
.clip-text{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);padding-top:0.2em;margin-top:-0.2em}
.clip-text .line{display:block;transform:translateY(120%);transition:transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);will-change:transform}
.clip-text.vis .line{transform:translateY(0)}