* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    position: relative;
    z-index: 1;
}

body {
      background-color: #110b19;

    background-image: url('../imgs/barberguy.png');
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #fff;
}
.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#110b19e8;
    pointer-events: none;
    z-index: -1;
}




.barber-booking {
    padding: 120px 1rem 6rem;
    min-height: 120vh;
    text-align: center;

    /* THIS is the fix */
    background: rgba(0, 0, 0, 0.6);

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


/* Now lift the title above the dark overlay */
.book-text {
    position: relative;
    z-index: 2;                   /* ← This puts the title on top */
    margin-bottom: 4rem;
    max-width: 800px;
}

/* Optional: Also lift the barber list and back button if they look too dim */
.barber-list,
.back-button {
    position: relative;
    z-index: 2;
}


/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 100px 5% 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.book-text {
    margin-bottom: 4rem;
    max-width: 800px;
}

.book-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.2;
            z-index: 2;

    color: #fff;
}

.book-text h1 span {
            z-index: 2;

    color: #ffffff;
}

.book-text .tagline {
            z-index: 2;

    font-size: 1.4rem;
    color: #fff;
    font-weight: 400;
}

/* Barber Cards Grid */
.barber-list {
    display: grid;
        z-index: 2;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
}

.barber-card {
    border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
            text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}


.barber-card img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.barber-card h2 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0.8rem;
}

.barber-card .price-range {
    font-size: 1.1rem;
    color: #eeeeee;
    margin: 0.8rem 0;
    font-weight: 500;
}

.barber-card .rating {
    font-size: 1.2rem;
    color: #ffcc00;
    margin: 0.8rem 0;
    font-weight: bold;
}

.barber-card .rating i {
    margin-right: 5px;
}

.barber-card .btn {
    margin-top: 1.5rem;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;
border: none;
    padding: 1rem 2rem;
    height: auto;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    width: 100%;
    max-width: 260px;
    transition: all 0.3s ease;
}

.barber-card .btn:hover {
opacity: 0.8;
        transform: scale(1.05);
}

/* Back Button */
.back-button {
    margin-top: 5rem;
    padding: 1rem 2.5rem;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;
border: none;    color: #fff;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.back-button:hover {
opacity: 0.8;
        transform: scale(1.05);}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .barber-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }

    .barber-card img {
        width: 160px;
        height: 160px;
    }
}


@media (max-width: 480px) {
    .book-text h1 {
        font-size: 2.4rem;
    }

    .book-text .tagline {
        font-size: 1.1rem;
    }

    .barber-card img {
        width: 120px;
        height: 120px;
    }

    .barber-card h2 {
        font-size: 1.4rem;
    }

    .back-button {
        width: 90%;
        max-width: 300px;
    }
}

.booking-flow{
  padding:120px 1rem 4rem;
  min-height:100vh;
  background:rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.flow-head{
  max-width:1200px;
  width:100%;
  margin:0 auto 24px;
  position:relative;
  z-index:2;
}
.flow-head h1{
  font-size:3.1rem;
  margin-bottom:6px;
}
.flow-head h1 span{color:#ffffff}
.flow-head .tagline{color:#fff;font-weight:400}

.banner{
  margin-top:14px;
  background:rgba(125, 23, 209, 0.18);
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
}

.auth-hint{
  margin-top:12px;
background: rgba(125, 23, 209, 0.18);
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  color:#ddd;
}
.auth-hint a{color:#8717d1;text-decoration:none;font-weight:bold}

.flow-grid{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  position:relative;
  z-index:2;
}

.panel{
    border-radius: 18px;
    padding: 1.25rem 1.4rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(rgba(25, 15, 39, 0.959), rgb(25, 15, 39)), url(../imgs/blendycity.png);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease;
}
.panel h2{
  font-size:1.25rem;
  margin-bottom:12px;
}

.barber-pick{
  display:grid;
  gap:12px;
    width: 100%;

}
.barber-btn{
  display:flex;
  gap:12px;
  width: 100%;
  align-items:center;
background: rgba(32, 32, 32, 0.45);
  border-radius:16px;
  padding: 10px;
  cursor:pointer;
  transition:.2s transform,.2s border-color;
}
.barber-btn:hover{transform:translateY(-2px);border-color:rgba(209,30,23,.4)}
.barber-btn.active{border-color:#d11e17}
.barber-btn img{
  width:54px;height:54px;border-radius:50%;
  object-fit:cover;border:3px solid rgba(209,30,23,.65);
}
.bmeta{display:flex;flex-direction:column;width:100%;gap:2px;font-weight:800}
.bmeta .sub{color:#ccc;font-weight:600;font-size:.95rem}
.status{display:inline-flex;color:#c5c5c5;gap:4px;align-items:center;font-size:.9rem;font-weight:900}
.dot{width:8px;height:8px;border-radius:50%}

.barber-meta{
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:16px;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));}

.services{display:flex;flex-direction:column;gap:10px}
.service{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
  border-radius:16px;
  padding:10px 12px;
}
.service .left{display:flex;flex-direction:column;gap:4px}
.service .desc{color:#ffffff;font-weight:700;font-size:.92rem}
.qty{display:flex;align-items:center;gap:8px}
.qty button{
  width:38px;height:38px;border-radius:14px;
  border:none;
  background:rgba(29, 29, 29, 0.35);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.qty span{min-width:22px;text-align:center;font-weight:900}

.date-row{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.date-row input{
  flex:1;
  height:48px;
  border-radius:14px;
  background:rgba(32, 32, 32, 0.45);
  color:#fff;
  border: none;
  font-family: Poppins;
  padding:0 12px;
  font-weight:900;
}
.date-row input:focus{
  outline: none;
}
.mini{
  height:48px;
  border-radius:14px;
  border:0;
    background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));  color:#fff;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}
.slots{display:flex;flex-wrap:wrap;gap:10px}
.slot{
  padding:10px 12px;
  border-radius:14px;
  border:none;
  background:#7d17d146;
  cursor:pointer;
  font-weight:900;
}

.field{display:flex;gap:8px;margin-bottom:12px}
.field label{color:#ddd;font-weight:900}
.field input{
  height:52px;border-radius:14px;
    background: rgba(32, 32, 32, 0.45);
      border: none;
  color:#fff;padding:0 12px;
  font-weight:900;
}
.field input:focus{
      outline: none;

}


.summary{
  margin:14px 0;
  padding:12px 14px;
  border-radius:16px;
  border:none;
background: rgb(10, 10, 10);
      min-height:56px;
  color:#ddd;
  font-weight:800;
}
.summary .tip-input {
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(125,23,209,.22), rgba(125,23,209,.08));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  padding: 0 16px;
  transition: border .2s, box-shadow .2s;
}

.summary .tip-input:focus {
  outline: none;
  border-color: #b56dff;
  box-shadow: 0 0 0 3px rgba(181,109,255,.25);
}

.summary .tip-input::placeholder {
  color: #aaa;
}

.btn.big{
  width:100%;
  height:56px;
  border-radius:16px;
  border:0;
    background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:.2s transform,.2s opacity;
}
.btn.big:disabled{opacity:.5;cursor:not-allowed}
.btn.big:hover{transform:translateY(-2px)}
.err{margin-top:10px;color:#ffb4b4;font-weight:900;min-height:20px}

@media (max-width: 900px){
  .flow-grid{grid-template-columns:1fr}
  .flow-head h1{font-size:2.1rem}
}




.booking-flow{
  padding:120px 1rem 4rem;
  min-height:100vh;
  background:rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.flow-head{
  width:100%;
  max-width:720px;
  margin:0 auto 28px;
  position:relative;
  z-index:2;
  text-align:left;
}

.flow-head h1{
  font-size:3rem;
  margin-bottom:6px;
}
.flow-head .tagline{
  color:#ddd;
  font-weight:500;
  font-size:1.05rem;
}

.banner,
.auth-hint{
  margin-top:14px;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
}


.flow-grid{
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  gap:20px;
  position:relative;
  z-index:2;
}

.panel{
  width:100%;
  border-radius:18px;
  padding:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.panel h2{
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  color:#fff;
}

/* BARBER PICK */
.barber-pick{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.barber-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:16px;
  background:#181818;
  cursor:pointer;
  transition:.2s transform,.2s background;
}
.barber-btn:hover{transform:translateY(-2px);background:#1f1f1f}
.barber-btn.active{outline:2px solid #d11e17}

.barber-btn img{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(209,30,23,.7);
}

.bmeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-weight:800;
}
.bmeta .sub{
  font-size:.9rem;
  color:#aaa;
}

/* SERVICES */
.services{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
    background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));  padding:14px 16px;
  border-radius:16px;
}

.service .left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.service .name{text-align:left;font-weight:900}
.service .desc{
  font-size:.85rem;
  color:#9a9a9a;
}

.qty{
  display:flex;
  align-items:center;
  gap:10px;
}
.qty button{
  width:38px;
  height:38px;
  border-radius:14px;
  border:0;
  background:#361f53;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.qty span{min-width:22px;text-align:center}

/* DATE + TIME */
.date-row{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}
.date-row input{
  width:100%;
  height:48px;
  border-radius:14px;
  background:#202020;
  border:0;
  color:#fff;
  padding:0 12px;
  font-weight:900;
}

.slots{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.slot{
  min-width:92px;
  padding:10px 14px;
  border-radius:14px;
  border:0;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.slot.active{
      background: #9617d1d7;
    }

/* INPUTS */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.field label{
  font-size:.9rem;
  color:#ccc;
}
.field input{
  height:52px;
  border-radius:14px;
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));
    color: #fff;  border:0;
  color:#fff;
  padding:0 12px;
  font-weight:900;
}

.summary {
  background: #29183f;
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
  color: #e5e5e5;
  font-size: .92rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.summary-header {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .5px;
}

.summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.summary-row.muted {
  color: #b9b9b9;
  font-weight: 600;
}

.summary-empty {
  color: #aaa;
  font-weight: 700;
  text-align: center;
  padding: 12px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 900;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.summary input[type="number"] {
  height: 46px;
  border-radius: 14px;
  background: rgba(125, 23, 209, .12);
  border: none;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding: 0 14px;
}

.summary input[type="number"]:focus {
  outline: none;
  background: rgba(125, 23, 209, .22);
}

.summary input::-webkit-outer-spin-button,
.summary input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.summary input {
  -moz-appearance: textfield;
}

.err{
  margin-top:10px;
  color:#ffb4b4;
  font-weight:900;
}

/* MOBILE */
@media (max-width:600px){
  .flow-head h1{font-size:2.2rem}
}
@keyframes panelShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

.panel.shake {
  animation: panelShake 0.4s ease;
}
.calendar {
background: #29183f;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.26));  border-radius:18px;
  padding:14px;
  width: 100%;
}

.calendar-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-weight:900;
}

.calendar-header button {
  background:none;
  border:0;
  color:#9617d1d7;
  font-size:1.4rem;
  cursor:pointer;
}

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.calendar-day {
  height:44px;
  border-radius:12px;
  background:#7d17d146;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
}

.calendar-day.disabled {
  opacity:.35;
  cursor:not-allowed;
}

.calendar-day.active {
  background:#9617d1d7;
}
.slot.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}






.map-links {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.map-links a {
    font-size: 0.9rem;
    color: #f8f8f8;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(37, 18, 53);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.map-links a:hover {
    transform: scale(1.10);
    opacity: 0.85;
}
@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  .site-header {
    height: 72px;
    padding: 0 5%;
  }

  .logo img {
    height: 64px;
  }

  .hero {
    padding-top: 110px;
    min-height: auto;
  }

  .hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem 1rem;
  }

  .hero-text {
    max-width: 100%;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 2.4rem;
  }

  .hero-text .tagline {
    font-size: 1.05rem;
  }

  .hero-logo img {
    max-width: 280px;
    margin: 0 auto;
  }

  .button-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .btn {
    height: 52px;
    width: 100%;
    padding: 0 1.25rem;
  }

  .info-box {
    max-width: 100%;
    padding: 1rem;
  }

  .location-map {
    height: 160px;
  }

  .reviews {
    padding: 4rem 1rem;
  }

  .reviews h2 {
    font-size: 2rem;
  }

  .reviews .subtitle {
    font-size: 1rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    padding: 1rem;
  }

}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2.1rem;
  }

  .btn {
    width: 100%;
  }

  .instagram-btn {
    width: 100%;
        margin-left: 0px;

  }

  .map-links {
    flex-wrap: wrap;
  }

  .map-links a {
    flex: 1 1 100%;
    text-align: center;
  }

  .review-pill {
    min-width: 300px;
  }
}

@media (max-width: 480px) {
  .site-header {
    height: 68px;
  }
.social-link{
  display: none;
}
  .logo img {
    height: 56px;
  }

  .hero {
    padding-top: 100px;
  }

  .hero-text h1 {
    font-size: 1.95rem;
  }

  .hero-text .tagline {
    font-size: 0.95rem;
  }

  .hero-logo img {
    max-width: 240px;
  }

  .review-pill {
    min-width: 260px;
    padding: 1rem;
  }


}