:root{--gold: #c9a227;--gold-light: #e8d48b;--charcoal: #1a1a1a;--cream: #f5f0e8;--burgundy: #722f37;--forest: #2d4a3e}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#0a0908,#1a1614,#0d0b0a)}body{font-family:Outfit,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}.ui-container{position:fixed;inset:0;pointer-events:none;z-index:100}.desktop-only{display:block}.mobile-only{display:none}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}.header{position:absolute;top:0;left:0;right:0;padding:20px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(10,9,8,.9) 0%,transparent 100%);pointer-events:auto;z-index:10}@media(max-width:768px){.header{padding:15px 20px}}.logo{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:300;letter-spacing:3px;color:var(--gold);text-transform:uppercase}@media(max-width:768px){.logo{font-size:18px;letter-spacing:2px}}.logo span{font-weight:600}.nav-links{display:flex;gap:40px}.nav-links a{color:var(--cream);text-decoration:none;font-size:13px;font-weight:400;letter-spacing:2px;text-transform:uppercase;opacity:.7;transition:all .3s ease}.nav-links a:hover{opacity:1;color:var(--gold)}.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:#c9a22733;border:1px solid rgba(201,162,39,.3);border-radius:8px;color:var(--gold);cursor:pointer;transition:all .3s ease}.mobile-menu-btn svg{width:24px;height:24px}.mobile-menu-btn:hover{background:#c9a2274d}.mobile-reserve-badge{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}.zone-selector{position:absolute;top:100px;left:50%;transform:translate(-50%);pointer-events:auto;text-align:center;z-index:5}.zone-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#f5f0e880;margin-bottom:12px}.zone-tabs{display:flex;gap:8px;background:#0a0908cc;padding:6px;border-radius:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(245,240,232,.1)}.zone-tab{padding:10px 20px;background:transparent;border:none;border-radius:24px;color:#f5f0e899;font-size:13px;font-weight:500;letter-spacing:1px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.zone-tab:hover{color:var(--cream);background:#f5f0e81a}.zone-tab.active{background:var(--gold);color:var(--charcoal)}@media(max-width:768px){.zone-selector{position:relative;top:0;left:0;transform:none;margin-bottom:20px}.zone-tabs{flex-wrap:wrap;justify-content:center}.zone-tab{padding:8px 16px;font-size:12px}}.reservation-panel{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:380px;max-height:85vh;overflow-y:auto;background:linear-gradient(145deg,#141210f2,#0a0908fa);border:1px solid rgba(201,162,39,.2);border-radius:4px;padding:40px;pointer-events:auto;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 25px 80px #00000080}.reservation-panel.mobile{position:relative;right:auto;top:auto;transform:none;width:100%;max-height:none;border:none;border-radius:0;padding:20px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}@media(max-width:900px){.reservation-panel:not(.mobile){width:340px;right:20px;padding:30px}}.panel-title{font-family:Cormorant Garamond,serif;font-size:28px;font-weight:300;color:var(--cream);margin-bottom:8px}.panel-subtitle{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:30px;opacity:.8}.form-group{margin-bottom:20px}.form-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#f5f0e880;margin-bottom:10px}.form-input{width:100%;padding:14px 16px;background:#f5f0e80d;border:1px solid rgba(245,240,232,.1);border-radius:3px;color:var(--cream);font-family:Outfit,sans-serif;font-size:15px;transition:all .3s ease}.form-input:focus{outline:none;border-color:var(--gold);background:#f5f0e814}.form-input::placeholder{color:#f5f0e84d}.form-textarea{resize:vertical;min-height:100px}.time-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.time-slot{padding:12px 8px;background:#f5f0e808;border:1px solid rgba(245,240,232,.1);border-radius:3px;color:#f5f0e899;font-size:14px;cursor:pointer;transition:all .3s ease;text-align:center}.time-slot:hover{border-color:var(--gold);color:var(--cream)}.time-slot.selected{background:var(--gold);border-color:var(--gold);color:var(--charcoal);font-weight:500}.selected-table{padding:20px;background:#c9a2271a;border:1px solid rgba(201,162,39,.3);border-radius:3px;margin-bottom:24px}.selected-table-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}.selected-table-name{font-family:Cormorant Garamond,serif;font-size:24px;color:var(--cream)}.selected-table-details{font-size:13px;color:#f5f0e899;margin-top:4px}.reserve-btn{width:100%;padding:18px;background:linear-gradient(135deg,var(--gold) 0%,#a88620 100%);border:none;border-radius:3px;color:var(--charcoal);font-family:Outfit,sans-serif;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .4s ease;position:relative;overflow:hidden}.reserve-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.reserve-btn:hover:before{left:100%}.reserve-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #c9a2274d}.reserve-btn:disabled{opacity:.5;cursor:not-allowed}.reserve-btn:disabled:hover{transform:none;box-shadow:none}.mobile-panel-overlay{position:fixed;inset:0;background:#000c;z-index:200;pointer-events:auto;animation:fadeIn .3s ease}.mobile-panel{position:absolute;right:0;top:0;bottom:0;width:100%;max-width:400px;background:linear-gradient(145deg,#141210fa,#0a0908fc);padding:60px 20px 20px;overflow-y:auto;animation:slideInRight .3s ease}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.mobile-panel-close{position:absolute;top:15px;right:15px;width:40px;height:40px;background:#f5f0e81a;border:none;border-radius:8px;color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center}.mobile-panel-close svg{width:24px;height:24px}.view-controls{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:8px;pointer-events:auto;z-index:5}@media(max-width:768px){.view-controls{bottom:20px}}.view-btn{padding:12px 24px;background:#141210cc;border:1px solid rgba(245,240,232,.15);border-radius:30px;color:#f5f0e8b3;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media(max-width:768px){.view-btn{padding:10px 18px;font-size:11px;letter-spacing:1px}}.view-btn:hover{border-color:var(--gold);color:var(--gold)}.view-btn.active{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}.legend{position:absolute;bottom:30px;left:30px;display:flex;flex-direction:column;gap:12px;pointer-events:auto;padding:20px;background:#0a0908cc;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media(max-width:768px){.legend{bottom:80px;left:15px;padding:12px;gap:8px}}.legend-item{display:flex;align-items:center;gap:12px;font-size:12px;color:#f5f0e8b3}@media(max-width:768px){.legend-item{font-size:11px;gap:8px}}.legend-dot{width:12px;height:12px;border-radius:50%}.legend-dot.available{background:#4ade80;box-shadow:0 0 10px #4ade8080}.legend-dot.reserved{background:#f87171;box-shadow:0 0 10px #f8717180}.legend-dot.selected{background:var(--gold);box-shadow:0 0 10px #c9a22780}.loading-overlay{position:fixed;inset:0;background:#0a0908;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;pointer-events:auto;animation:fadeOut .8s ease 1.5s forwards}.loading-logo{font-family:Cormorant Garamond,serif;font-size:36px;font-weight:300;letter-spacing:6px;color:var(--gold);text-transform:uppercase;margin-bottom:40px;opacity:0;animation:fadeIn 1s ease .3s forwards;text-align:center;padding:0 20px}@media(max-width:768px){.loading-logo{font-size:24px;letter-spacing:4px}}.loading-bar{width:200px;height:2px;background:#f5f0e81a;border-radius:1px;overflow:hidden;opacity:0;animation:fadeIn .5s ease .8s forwards}.loading-bar-fill{height:100%;background:var(--gold);animation:loadingProgress 1s ease .8s forwards;width:0%}@keyframes fadeIn{to{opacity:1}}@keyframes fadeOut{to{opacity:0;pointer-events:none}}@keyframes loadingProgress{to{width:100%}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:modalFadeIn .3s ease;pointer-events:auto;padding:20px}.modal{background:linear-gradient(145deg,#1e1c1afa,#0f0e0dfa);border:1px solid rgba(201,162,39,.3);border-radius:8px;padding:40px;max-width:450px;width:100%;text-align:center;animation:modalSlideIn .4s ease;max-height:90vh;overflow-y:auto}@media(max-width:768px){.modal{padding:30px 20px;max-width:100%}}.modal-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--gold) 0%,#a88620 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 30px}.modal-icon svg{width:40px;height:40px;color:var(--charcoal)}.modal-icon.payment{background:linear-gradient(135deg,#4ade80,#22c55e)}.modal-icon.rating{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.modal-title{font-family:Cormorant Garamond,serif;font-size:32px;font-weight:300;color:var(--cream);margin-bottom:10px}@media(max-width:768px){.modal-title{font-size:26px}}.modal-subtitle{font-size:14px;color:#f5f0e899;margin-bottom:30px;line-height:1.6}.modal-details{background:#c9a2271a;border:1px solid rgba(201,162,39,.2);border-radius:4px;padding:20px;margin-bottom:30px;text-align:left}.modal-detail-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:14px}.modal-detail-row:last-child{margin-bottom:0}.modal-detail-label{color:#f5f0e880}.modal-detail-value{color:var(--cream);font-weight:500}.modal-detail-value.highlight{color:var(--gold);font-weight:600}.modal-btn{padding:16px 40px;background:transparent;border:1px solid var(--gold);border-radius:3px;color:var(--gold);font-family:Outfit,sans-serif;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s ease}.modal-btn:hover,.modal-btn.primary{background:var(--gold);color:var(--charcoal)}.modal-btn.primary:hover{background:var(--gold-light)}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.confirmation-buttons,.rating-buttons{display:flex;gap:12px;flex-direction:column}.payment-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.payment-btn{padding:16px 40px;border-radius:3px;font-family:Outfit,sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s ease}.payment-btn.primary{background:linear-gradient(135deg,#4ade80,#22c55e);border:none;color:#0a0908}.payment-btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #4ade804d}.payment-btn.secondary{background:transparent;border:1px solid rgba(245,240,232,.3);color:#f5f0e8b3}.payment-btn.secondary:hover{border-color:var(--cream);color:var(--cream)}.modal-close-btn{background:none;border:none;color:#f5f0e880;font-size:13px;cursor:pointer;text-decoration:underline;transition:color .3s ease}.modal-close-btn:hover{color:var(--cream)}.rating-stars{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.star-btn{width:48px;height:48px;background:transparent;border:none;cursor:pointer;color:#f5f0e833;transition:all .2s ease}.star-btn svg{width:100%;height:100%}.star-btn:hover,.star-btn.active{color:#fbbf24;transform:scale(1.1)}.rating-label{font-size:14px;color:var(--gold);margin-bottom:24px;min-height:20px}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.instructions{position:absolute;top:50%;left:30px;transform:translateY(-50%);max-width:280px;pointer-events:none;opacity:0;animation:fadeIn 1s ease 2s forwards}@media(max-width:768px){.instructions{display:none}}.instructions h3{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:400;color:var(--cream);margin-bottom:16px}.instructions p{font-size:14px;color:#f5f0e880;line-height:1.7}.instructions .hint{display:flex;align-items:center;gap:10px;margin-top:20px;padding:12px 16px;background:#c9a2271a;border-left:2px solid var(--gold);font-size:13px;color:var(--gold)}.error-toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:#dc2626e6;color:#fff;padding:16px 24px;border-radius:8px;display:flex;align-items:center;gap:16px;z-index:300;pointer-events:auto;animation:slideUp .3s ease;max-width:90%}.error-toast button{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.error-toast button svg{width:20px;height:20px}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(pointer:coarse){.time-slot,.zone-tab,.view-btn{min-height:44px;display:flex;align-items:center;justify-content:center}.form-input{font-size:16px}}@supports (padding: max(0px)){.header{padding-top:max(20px,env(safe-area-inset-top));padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}@media(max-width:768px){.header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}.view-controls{bottom:max(30px,env(safe-area-inset-bottom))}@media(max-width:768px){.view-controls{bottom:max(20px,env(safe-area-inset-bottom))}.legend{bottom:calc(80px + env(safe-area-inset-bottom))}}.mobile-panel{padding-bottom:max(20px,env(safe-area-inset-bottom))}}