/*
Theme Name: Smajli Bend
Theme URI: https://smajlibend.rs
Author: Stefan Arsenijevic
Description: Custom jednostranična tema za Smajli Bend sa Contact Form 7 formom za rezervacije.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smajli-bend
*/

:root{
  --bg:#140d0f;
  --bg-2:#1b1114;
  --panel:#211619;
  --panel-2:#2a1c20;
  --wine:#442b31;
  --wine-2:#6d414b;
  --cream:#f5efe9;
  --text:#fffaf6;
  --muted:#b9aaae;
  --muted-2:#827377;
  --gold:#d9b27a;
  --gold-2:#f0d3a7;
  --light-accent:#6f4638;
  --light-accent-2:#8a5a46;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --shadow:0 35px 90px rgba(0,0,0,.45);
  --radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{line-height:1.7}
::selection{background:var(--gold);color:#1b1114}

.container{
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.hero-shell{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(217,178,122,.14), transparent 22%),
    linear-gradient(135deg, #120b0d, #211317 58%, #130c0e);
}

.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-photo{
  position:absolute;
  background-size:cover;
  background-position:center;
  filter:saturate(.75) contrast(1.05);
}
.hero-photo-one{
  width:48vw;
  min-width:620px;
  height:70%;
  right:-4%;
  top:8%;
  background-image:url("https://img.youtube.com/vi/0KRd1k4Q-8M/maxresdefault.jpg");
  opacity:.25;
  transform:rotate(4deg) scale(1.04);
  border-radius:42px;
}
.hero-photo-two{
  width:34vw;
  min-width:480px;
  height:48%;
  right:18%;
  bottom:-7%;
  background-image:url("https://img.youtube.com/vi/8-dv_Mj8Xx8/maxresdefault.jpg");
  opacity:.16;
  transform:rotate(-7deg) scale(1.06);
  border-radius:42px;
}
.hero-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#140d0f 0%, rgba(20,13,15,.98) 32%, rgba(20,13,15,.68) 63%, rgba(20,13,15,.90) 100%),
    linear-gradient(0deg,#140d0f 0%, transparent 30%);
}
.hero-grid{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to right,black,transparent 76%);
}

.nav{
  height:92px;
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-icon{width:44px;height:44px;object-fit:contain}
.brand-copy{display:flex;align-items:baseline;gap:7px;letter-spacing:-.03em}
.brand-copy strong{font-size:20px}
.brand-copy small{font-size:9px;letter-spacing:.2em;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links>a{
  color:#d0c4c6;
  font-size:13px;
  font-weight:650;
  transition:.2s ease;
}
.nav-links>a:hover{color:#fff}
.menu-toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative}
.menu-toggle span{
  position:absolute;left:8px;width:24px;height:1px;background:#fff;transition:.25s ease
}
.menu-toggle span:first-child{top:15px}
.menu-toggle span:last-child{top:23px}
.menu-toggle.active span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle.active span:last-child{transform:translateY(-4px) rotate(-45deg)}

.btn{
  border:0;
  min-height:50px;
  border-radius:999px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:800;
  font-size:14px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#1b1114;
  background:linear-gradient(135deg,#fff7ed,#e3bc82);
  box-shadow:0 16px 45px rgba(217,178,122,.16);
}
.btn-primary:hover{box-shadow:0 18px 55px rgba(217,178,122,.28)}
.btn-glass{
  color:#fff;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(12px);
}
.btn-glass:hover{background:rgba(255,255,255,.10)}
.btn-nav{min-height:42px;padding-inline:18px;background:#fff;color:#1b1114;font-size:12px}
.btn-wide{width:100%}

.hero{
  min-height:calc(100vh - 92px);
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:68px;
  padding:70px 0 130px;
}
.hero-copy{max-width:760px}
.hero-badge{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#d8cbcd;
  background:rgba(255,255,255,.035);
  font-size:10px;
  letter-spacing:.15em;
  font-weight:800;
}
.pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(217,178,122,.55);
  animation:pulse 2s infinite;
}
.hero h1{
  margin:0 0 28px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(60px,7vw,112px);
  line-height:.88;
  letter-spacing:-.06em;
  font-weight:500;
}
.section-title .line,
.hero h1 .line{
  display:block;
  white-space:nowrap;
}
.hero h1 .accent{
  margin-top:12px;
  color:var(--gold-2);
  font-style:italic;
}
.hero-lead{
  max-width:680px;
  margin:0;
  color:#c9bbbe;
  font-size:clamp(17px,1.45vw,21px);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.booking-hint{
  max-width:650px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hint-icon{
  flex:0 0 25px;
  width:25px;height:25px;
  display:grid;place-items:center;
  border:1px solid rgba(217,178,122,.55);
  border-radius:50%;
  color:var(--gold);
  font-family:Georgia,serif;
}
.booking-hint p{margin:0;color:#a99a9e;font-size:13px;line-height:1.6}
.booking-hint strong{color:#efe4e4}

.record-scene{
  perspective:1400px;
  display:flex;
  justify-content:flex-end;
}
.record-card{
  width:min(500px,100%);
  aspect-ratio:1;
  position:relative;
  justify-self:end;
  display:grid;
  place-items:center;
  border-radius:42px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.14), transparent 20%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    rgba(47,29,34,.60);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  transform-style:preserve-3d;
  transition:transform .45s ease, box-shadow .45s ease;
}
.record-card:hover{
  transform:rotateX(8deg) rotateY(-10deg) translateY(-6px);
  box-shadow:0 45px 120px rgba(0,0,0,.55);
}
.record-card::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
}
.vinyl-record{
  width:76%;
  aspect-ratio:1;
  position:relative;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%, #2f2a2d 0 17%, #0e0d0f 18% 26%, #1a191b 27% 30%, #09090a 31% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.03),
    inset 0 0 0 8px rgba(255,255,255,.01),
    0 26px 60px rgba(0,0,0,.40);
  animation:spin 12s linear infinite;
}
.vinyl-rings{
  position:absolute; inset:7%;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.045) 0 1px, transparent 1px 12px);
  opacity:.55;
}
.record-gloss{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 42%);
  mix-blend-mode:screen;
}
.record-center{
  width:41%;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 45%, #fdf6ee, #e2c18b);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 8px rgba(255,255,255,.04);
}
.record-center img{
  width:82%;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));
}
.record-orbit{
  position:absolute;
  inset:0;
  animation:spin 18s linear infinite;
}
.record-orbit span{
  position:absolute;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  color:var(--gold-2);
  font-size:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.orbit-one span:nth-child(1){top:48px; left:50%; transform:translateX(-50%)}
.orbit-one span:nth-child(2){top:50%; right:48px; transform:translateY(-50%)}
.orbit-one span:nth-child(3){bottom:48px; left:50%; transform:translateX(-50%)}
.orbit-one span:nth-child(4){top:50%; left:48px; transform:translateY(-50%)}
.orbit-two{
  animation-direction:reverse;
  animation-duration:24s;
}
.orbit-two span:nth-child(1){top:92px; right:98px}
.orbit-two span:nth-child(2){bottom:102px; right:70px}
.orbit-two span:nth-child(3){bottom:86px; left:90px}
.orbit-two span:nth-child(4){top:88px; left:90px}
.record-labels{
  position:absolute;
  left:24px;
  bottom:24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  transform:translateZ(30px);
}
.record-labels span{
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#d9ced0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}

.hero-marquee{
  position:absolute;
  bottom:0; left:0; right:0;
  height:58px;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:rgba(12,7,9,.55);
  backdrop-filter:blur(16px);
}
.marquee-track{
  width:max-content;
  min-width:200%;
  display:flex;
  align-items:center;
  height:100%;
  animation:marquee 24s linear infinite;
}
.marquee-group{
  display:flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  padding-right:28px;
  color:#aa9b9e;
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
}
.marquee-group b{color:var(--gold);font-size:11px}

.section{padding:120px 0}
.section-tag{
  margin-bottom:18px;
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.19em;
}
.light-tag{color:var(--light-accent-2)}
.section h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,5vw,78px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:500;
}
.section h2 .accent{
  color:var(--gold-2);
  font-style:italic;
}
.light-title .accent{color:var(--light-accent)}
.intro-section{background:#efe8e1;color:#201417}
.intro-grid{
  display:grid;
  grid-template-columns:.28fr 1.72fr;
  gap:60px;
}
.intro-copy{
  max-width:780px;
  margin:50px 0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
}
.intro-copy p{margin:0;color:#4f4345;font-size:17px}

.video-section{
  background:
    radial-gradient(circle at 90% 10%, rgba(112,62,75,.24), transparent 24%),
    #171012;
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:50px;
}
.section-heading>div{max-width:850px}
.section-heading>p{
  width:min(390px,100%);
  margin:0;
  color:var(--muted);
  font-size:15px;
}
.text-link{
  flex:0 0 auto;
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.3);
  font-size:13px;
  color:#d9ced0;
}
.text-link span{color:var(--gold);margin-left:6px}

.video-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:18px;
}
.video-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:#211619;
}
.video-thumb{
  position:relative;
  display:block;
  height:330px;
  overflow:hidden;
}
.video-card-large .video-thumb{height:460px}
.video-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.video-card:hover .video-thumb img{transform:scale(1.04)}
.video-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(16,8,11,.72));
}
.play-button{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;padding-left:4px;
  color:#241519;background:#f8efe8;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  transition:.25s ease;
}
.video-card:hover .play-button{transform:translate(-50%,-50%) scale(1.08)}
.video-label{
  position:absolute;left:22px;bottom:20px;
  font-size:10px;font-weight:900;letter-spacing:.18em;color:#fff;
}
.video-info{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  padding:24px 26px 28px;
}
.video-info>span{color:var(--gold);font-size:11px;font-weight:850}
.video-info h3{margin:0 0 7px;font-size:22px}
.video-info p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.social-strip{
  margin-top:18px;
  padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.social-strip-copy{display:flex;flex-direction:column;gap:5px}
.social-strip-copy span{color:var(--muted);font-size:12px}
.social-strip-copy strong{font-size:14px}
.social-buttons{display:flex;gap:10px;flex-wrap:wrap}
.social-btn{
  min-width:225px;
  display:grid;
  grid-template-columns:38px 1fr 20px;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  transition:.2s ease;
}
.social-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.social-symbol{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  font-size:22px;
}
.social-btn>span:nth-child(2){display:flex;flex-direction:column}
.social-btn small{color:var(--muted-2);font-size:9px;text-transform:uppercase;letter-spacing:.11em}
.social-btn strong{font-size:12px;margin-top:2px}
.social-btn b{color:var(--gold);font-weight:500}

.events-section{background:#211519}
.event-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.event-card{
  min-height:430px;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:24px;
  border:1px solid var(--line);
  border-radius:28px;
  background:#291b1f;
  transition:.3s ease;
}
.event-card:hover{transform:translateY(-6px);border-color:rgba(217,178,122,.45)}
.event-card::before{
  content:"";
  position:absolute;inset:0;
  opacity:.75;
  background:
    radial-gradient(circle at 75% 25%, rgba(217,178,122,.16), transparent 27%),
    linear-gradient(160deg, transparent 30%, rgba(0,0,0,.22));
}
.event-index{position:relative;color:#8d7c80;font-size:10px;letter-spacing:.15em}
.event-icon{
  position:relative;
  margin:auto;
  width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--gold-2);
  font-family:Georgia,serif;font-size:34px;
}
.event-content{position:relative}
.event-content h3{margin:0 0 10px;font-family:Georgia,serif;font-size:28px;font-weight:500}
.event-content p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.event-card-party{background:linear-gradient(160deg,#352028,#26191d)}
.event-card-club{background:linear-gradient(160deg,#2c2024,#171012)}
.event-card-corporate{background:linear-gradient(160deg,#3a2a28,#26181c)}

.repertoire-section{background:#eee5dd;color:#201417}
.repertoire-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:start;
}
.repertoire-sticky{position:sticky;top:120px}
.repertoire-sticky p{
  max-width:520px;
  margin:28px 0 30px;
  color:#5d4f52;
  font-size:16px;
}
.genre-list{border-top:1px solid rgba(32,20,23,.18)}
.genre-list article{
  display:grid;
  grid-template-columns:50px 1.2fr 1fr 25px;
  align-items:center;
  gap:16px;
  padding:30px 0;
  border-bottom:1px solid rgba(32,20,23,.18);
}
.genre-list span{font-size:10px;color:#8d5c42;font-weight:850}
.genre-list h3{margin:0;font-size:21px}
.genre-list p{margin:0;color:#63575a;font-size:13px;line-height:1.55}
.genre-list b{font-size:20px;font-weight:400;color:#8d5c42;transition:.2s ease}
.genre-list article:hover b{transform:translateX(5px)}

.booking-section{
  min-height:760px;
  position:relative;
  overflow:hidden;
  background:#160e10;
}
.booking-background{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(22,14,16,.98), rgba(22,14,16,.84) 46%, rgba(22,14,16,.90)),
    url("assets/smajli-poster.png") center right / cover no-repeat;
  opacity:.92;
}
.booking-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.08fr .72fr;
  gap:80px;
  align-items:center;
}
.booking-copy>p{
  max-width:720px;
  margin:28px 0 38px;
  color:#c0b1b4;
  font-size:16px;
}
.booking-points{display:grid;gap:12px;max-width:720px}
.booking-points>div{
  display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line);
}
.booking-points>div>span{
  width:34px;height:34px;border:1px solid rgba(217,178,122,.45);
  border-radius:50%;display:grid;place-items:center;
  color:var(--gold);font-size:9px;font-weight:850;
}
.booking-points p{margin:0;display:flex;flex-direction:column;gap:3px}
.booking-points strong{font-size:14px}
.booking-points small{color:#998a8e;font-size:12px}
.booking-panel{
  padding:34px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  background:rgba(45,27,32,.76);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
}
.booking-panel-top{display:flex;align-items:center;gap:14px;margin-bottom:25px}
.booking-panel-top img{width:52px;height:52px}
.booking-panel-top span{display:flex;flex-direction:column}
.booking-panel-top small{color:var(--gold);font-size:9px;letter-spacing:.18em;font-weight:850}
.booking-panel-top strong{margin-top:3px;font-size:21px}
.booking-panel>p{color:#c3b5b7;font-size:14px;margin:0 0 24px}
.booking-panel>p strong{color:#fff}
.booking-panel-social{
  display:flex;justify-content:center;gap:20px;margin-top:18px;
  font-size:11px;color:#a9979c;
}
.booking-panel-social a:hover{color:#fff}

footer{background:#0e090a;border-top:1px solid var(--line)}
.footer-main{
  min-height:300px;
  padding:54px 0 46px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
}
.footer-logo img{width:270px}
.footer-main>div:first-child>p{color:#726469;font-size:13px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.footer-links>div{display:flex;flex-direction:column;gap:12px}
.footer-links span{color:#6d6063;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.footer-links a{font-size:13px;color:#b6a8ab}
.footer-links a:hover{color:#fff}
.footer-bottom{
  min-height:72px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);
  color:#706266;font-size:11px;
}
.footer-book{
  border:0;background:none;color:#c9b9bc;font-size:11px;font-weight:800;
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  place-items:center;
  padding:18px;
}
.modal.active{display:grid}
.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(5,3,4,.82);
  backdrop-filter:blur(14px);
}
.modal-panel{
  width:min(760px,100%);
  max-height:94vh;
  overflow:auto;
  position:relative;
  z-index:2;
  padding:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:32px;
  background:#201417;
  box-shadow:0 45px 120px rgba(0,0,0,.62);
  animation:modalIn .28s ease-out;
}
.modal-close{
  position:absolute;right:18px;top:18px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);
  color:#fff;background:rgba(255,255,255,.04);
  font-size:25px;line-height:1;
}
.modal-head{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  align-items:center;
  padding-right:50px;
}
.modal-logo{
  width:70px;height:70px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:22px;background:rgba(255,255,255,.035);
}
.modal-logo img{width:58px}
.modal-head .section-tag{margin-bottom:5px}
.modal-head h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:43px;
  letter-spacing:-.035em;
  font-weight:500;
}
.modal-head p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.deal-notice{
  display:grid;grid-template-columns:34px 1fr;gap:12px;
  margin:26px 0;
  padding:14px;
  border:1px solid rgba(217,178,122,.22);
  border-radius:16px;
  background:rgba(217,178,122,.07);
}
.deal-notice>span{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  color:#261719;background:var(--gold);font-weight:900;
}
.deal-notice p{margin:1px 0 0;color:#cabbbe;font-size:12px;line-height:1.55}
.deal-notice strong{color:#f4e9e5}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
.form-grid label{display:grid;gap:8px}
.form-grid label>span{
  color:#ddd0d2;font-size:11px;font-weight:750;
}
.form-grid label>span small{color:#76676b;font-weight:500}
.form-grid .full{grid-column:1/-1}
input, textarea, .select-trigger{
  width:100%;
  min-height:50px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  outline:none;
  background:#130c0e;
  color:#fff;
  padding:0 15px;
  transition:.2s ease;
}
textarea{padding:14px 15px;resize:vertical;line-height:1.55}
input::placeholder, textarea::placeholder{color:#6f6064}
input:focus, textarea:focus, .custom-select.open .select-trigger{
  border-color:rgba(217,178,122,.8);
  box-shadow:0 0 0 3px rgba(217,178,122,.09);
}
input[type="date"]{color-scheme:dark}
.submit-btn{margin-top:18px}
.form-footnote{text-align:center;color:#67595d;font-size:10px;margin:11px 0 0}

.custom-select{position:relative}
.select-trigger{
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;
  text-align:left;cursor:pointer;
}
.select-trigger span{color:#7c6c70;font-size:13px}
.custom-select.has-value .select-trigger span{color:#fff}
.select-trigger b{font-size:16px;color:var(--gold);transition:.2s ease}
.custom-select.open .select-trigger b{transform:rotate(180deg)}
.select-menu{
  display:none;
  position:absolute;
  left:0; right:0; top:calc(100% + 7px);
  z-index:30;
  padding:7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:#160e10;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.custom-select.open .select-menu{display:grid;animation:dropdownIn .16s ease-out}
.select-menu button{
  width:100%;
  border:0;
  border-radius:10px;
  padding:11px 12px;
  text-align:left;
  color:#e7dadd;
  background:transparent;
  font-size:13px;
}
.select-menu button:hover,
.select-menu button.selected{
  color:#201417;
  background:linear-gradient(135deg,#fff4e9,#dab47e);
}

.reservation-result{text-align:center;padding-top:18px}
.result-check{
  width:70px;height:70px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(217,178,122,.12);
  border:1px solid rgba(217,178,122,.28);
  color:var(--gold);font-size:30px;
}
.reservation-result h3{
  margin:0 0 8px;
  font-family:Georgia,serif;font-size:38px;font-weight:500;
}
.reservation-result>p{max-width:560px;margin:0 auto 20px;color:var(--muted);font-size:13px}
.result-summary{
  white-space:pre-line;
  text-align:left;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#130c0e;
  color:#cdbfc2;
  font-size:12px;
  line-height:1.7;
  margin-top:4px;
}
.result-actions{display:flex;gap:10px;margin-top:16px}
.result-actions>*{flex:1}
.reset-form{
  margin-top:16px;border:0;background:none;color:#8b7b7f;
  font-size:11px;text-decoration:underline;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(217,178,122,.45)}
  70%{box-shadow:0 0 0 8px rgba(217,178,122,0)}
  100%{box-shadow:0 0 0 0 rgba(217,178,122,0)}
}
@keyframes eq{from{transform:scaleY(.6);opacity:.5}to{transform:scaleY(1.05);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(max-width:1120px){
  .section-title .line,
  .hero h1 .line{white-space:normal}
}

@media(max-width:1050px){
  .nav-links{
    display:none;
    position:absolute;
    top:76px;right:0;
    width:min(360px,calc(100vw - 40px));
    padding:20px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#160e10;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
  }
  .nav-links.open{display:flex}
  .nav-links>a{padding:8px}
  .menu-toggle{display:block}
  .hero{grid-template-columns:1fr .75fr;gap:36px}
  .record-card{border-radius:36px}
  .event-grid{grid-template-columns:1fr 1fr}
  .repertoire-grid{gap:50px}
}

@media(max-width:800px){
  .container{width:min(100% - 30px,1240px)}
  .nav{height:78px}
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    padding:72px 0 120px;
  }
  .record-scene{justify-content:flex-start}
  .record-card{
    width:100%;
    max-width:560px;
    aspect-ratio:1.05;
    transform:none;
  }
  .record-card:hover{transform:translateY(-4px)}
  .hero-photo-one{width:100%;min-width:0;right:-28%;top:6%;opacity:.19}
  .hero-photo-two{display:none}
  .intro-grid,.repertoire-grid,.booking-layout{grid-template-columns:1fr;gap:45px}
  .intro-copy{margin-top:36px}
  .video-grid{grid-template-columns:1fr}
  .video-card-large .video-thumb,.video-thumb{height:360px}
  .social-strip{align-items:stretch;flex-direction:column}
  .social-buttons{width:100%}
  .social-btn{flex:1}
  .repertoire-sticky{position:static}
  .footer-main{grid-template-columns:1fr;gap:45px}
  .booking-background{
    background:
      linear-gradient(180deg, rgba(22,14,16,.98), rgba(22,14,16,.84), rgba(22,14,16,.96)),
      url("assets/smajli-poster.png") center/cover no-repeat;
  }
}

@media(max-width:580px){
  .section{padding:82px 0}
  .hero h1{font-size:53px}
  .hero-lead{font-size:16px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .record-card{aspect-ratio:1.05}
  .vinyl-record{width:82%}
  .record-orbit span{width:30px;height:30px;font-size:16px}
  .record-labels{left:16px;right:16px;bottom:18px}
  .record-labels span{font-size:9px}
  .intro-copy{grid-template-columns:1fr;gap:12px}
  .section-heading{align-items:start;flex-direction:column;margin-bottom:35px}
  .video-card-large .video-thumb,.video-thumb{height:245px}
  .play-button{width:60px;height:60px}
  .social-buttons{display:grid;grid-template-columns:1fr}
  .social-btn{min-width:0}
  .event-grid{grid-template-columns:1fr}
  .event-card{min-height:300px}
  .genre-list article{grid-template-columns:38px 1fr 20px;gap:8px}
  .genre-list article p{grid-column:2/3}
  .booking-panel{padding:25px 20px}
  .footer-links{grid-template-columns:1fr}
  .modal{padding:8px}
  .modal-panel{padding:25px 17px;border-radius:24px}
  .modal-head{grid-template-columns:50px 1fr;gap:12px;padding-right:34px}
  .modal-logo{width:50px;height:50px;border-radius:15px}
  .modal-logo img{width:42px}
  .modal-head h2{font-size:33px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .result-actions{flex-direction:column}
}