@font-face {font-family: 'Roboto';src: url('../fonts/Roboto-Regular.woff')  format('woff');
-webkit-font-smoothing: antialiased;
}
@font-face {font-family: 'iWK';src: url('../fonts/iwkdef.woff')  format('woff');
-webkit-font-smoothing: antialiased;
}
@font-face {font-family: 'iWKBold';src: url('../fonts/iwkbold.woff')  format('woff')}
@font-face {
  font-family: 'pass';
  font-style: normal;
  font-weight: 400;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
}

@font-face {
    font-family: "Ionicons";
    src: url("../fonts/ionicons.eot?v=2.0.0");
    src: url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons.woff?v=2.0.0") format("woff"), url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

    :root{
      --bg:#0f0f0f;
      --card:#121212;
      --accent:#c84b31;
      --muted:#e5e5e5;
      --glass: rgba(255,255,255,0.04);
      --max-width:1024px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#eee;
      background: linear-gradient(180deg,#070707 0%, #111111 100%);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.4;
    }

    .container{max-width:var(--max-width);margin:0 auto;
//padding:24px;
}

    /* NAV */
    header{position:sticky;top:0;z-index:50;padding:12px 0;background:linear-gradient(180deg, rgba(0,0,0,0.35), transparent);backdrop-filter: blur(6px)}
    .nav{display:flex;align-items:center;gap:20px;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:230px;height:60px;border-radius:10px;background:linear-gradient(135deg,#2b2b2b,#1a1a1a);display:grid;place-items:center;font-family:Playfair Display, serif;font-weight:700;color:var(--accent)}
    nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
    nav a{color:var(--muted);text-decoration:none;font-weight:600}
    .cta{background:linear-gradient(90deg,var(--accent),#ff715b);padding:10px 14px;border-radius:10px;color:white;text-decoration:none;font-weight:700}
	nav a:hover{color: white;
    text-decoration: underline;
    text-decoration-color: #e05743;
    text-decoration-thickness: 4px;}
.xEmail {color:#ffc107;text-decoration:none;}
.xSocMed {color:#7bb0ff;text-decoration:none;}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;padding:6.8em 0 0 0;}
    .hero-inner{display: grid;gap: 12px;padding-left: 10px;background-color: rgb(0 0 0 / 72%);
	    padding: 20px;
	    border-radius: 18px;}
    .hero-inner2{display: grid;gap: 12px;padding-left: 10px;background-color: rgb(0 0 0 / 72%);
	    padding: 20px;
	    border-radius: 18px;width:40vw;right:10px;float:right;position:relative;}
@media only screen and (max-width: 600px) {
.hero-inner2{display: grid;gap: 12px;padding-left: 10px;background-color: rgb(0 0 0 / 72%);
	    padding: 20px;
	    border-radius: 18px;width:98%;right:10px;float:right;position:relative;}
}

    .eyebrow{color:var(--accent);font-weight:700;letter-spacing:1px}
    h1{font-family: iWk;
    font-size: clamp(28px, 3vw, 38px);
    margin: 0;
    color: #d5d5d5;}
    p.lead{color:var(--muted);margin:0;max-width:60ch}

    .hero-grid{display:block;grid-template-columns:1fr 420px;gap:28px;align-items:start}

    /* Reservation card */
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:14px;padding:18px;
	//box-shadow:0 6px 24px rgba(0,0,0,0.6);
	}
    label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
    input,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
    .row{display:flex;gap:10px}
    .row .col{flex:1}
    button.primary{width:100%;padding:12px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),#ff715b);color:white;font-weight:700}

    /* Menu preview */
    .menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
    .menu-item{padding:12px;border-radius:10px;background:var(--glass);display:flex;justify-content:space-between;align-items:center}
    .price{font-weight:700}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
    .gallery img{width:100%;height:140px;object-fit:cover;border-radius:8px}

    /* About & footer */
    section.about{padding:40px 0}
    section.booking{padding:40px}

    footer{padding:28px;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}

    /* Responsive */
    @media (max-width:900px){
      .hero-grid{grid-template-columns:1fr}
      .gallery{grid-template-columns:repeat(2,1fr)}
      nav ul{display:none}
    }
    @media (max-width:520px){
      .gallery img{height:110px}
      .hero{padding:100px 10px}
    }

    /* small utilities */
    .muted{color:var(--muted)}
    .center{display:grid;place-items:center}

    /* simple carousel controls */
    .carousel{position:relative}
    .carousel .slides{display:flex;gap:8px;overflow:hidden}
    .carousel .slides img{flex:0 0 100%;max-height:320px;object-fit:cover;border-radius:12px}
    .carousel .controls{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;transform:translateY(-50%);padding:0 8px}
    .btn-ghost{background:rgba(0,0,0,0.45);border:0;color:white;padding:8px 10px;border-radius:8px}

.oImg{
background-image: url(../images/bg2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.28);
    background-blend-mode: darken;
}

#myHeader {
    position: fixed;
    top: 0;width: 100%;
    padding: 20px;
    /* Initial state: transparent background, subtle blur */
/*   background-color: rgba(255, 255, 255, 0.1); */
   background-color: rgba(0, 0, 0, 0); 
    backdrop-filter: blur(0px); /* Start with no blur */
    /* Add a smooth transition for the properties you want to change */
    transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
    z-index: 100;
}

#myHeader.scrolled {
    /* Scrolled state: solid color, more blur */
//    background-color: rgba(255, 255, 255, 0.95); /* Almost solid white */
    background-color: rgba(0, 0, 0, 0.95); /* Almost solid white */
    backdrop-filter: blur(10px); 
    /* Add a subtle shadow for better contrast against the page content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: none) {
    #myHeader.scrolled {
        background-color: rgba(255, 255, 255, 0.95); /* Solid fallback */
    }
}

.test {display:none;}


  .carousel-container {
    position: relative;
    width: 80%;
    max-width: 900px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.6);
  }

  .carousel-slide {
    display: flex;
    transition: transform 1s ease;
  }

  .carousel-slide img {
    width: 100%;
    border-radius: 16px;
  }

  /* Title overlay */
  .carousel-caption {
    position: absolute;
    bottom: 30px;
    left: 40px;
    background: rgba(0, 0, 0, 0.55);
    padding: 12px 18px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    animation: fadeIn 1s ease;
  }

  .carousel-caption a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
  }

  .carousel-caption a:hover {
    text-decoration: underline;
  }

  /* Navigation buttons */
  .carousel-btn {
	font-family:iwk;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    transition: background 0.3s;
  }

  .carousel-btn:hover {
    background: rgba(0,0,0,0.8);
  }

  #prevBtn { left: 15px; }
  #nextBtn { right: 15px; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }


  .collage {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 120px;
    gap: 10px;
    width: 90vw;
    max-width: 1000px;
  }

  .collage div {
    overflow: hidden;
    border-radius: 10px;
    cursor: zoom-in;
    position: relative;
    transition: transform 0.3s ease, z-index 0.3s ease;
  }

  .collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }

  /* Random size layout */
  .collage div:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .collage div:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .collage div:nth-child(3) { grid-column: span 1; grid-row: span 2; }
  .collage div:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .collage div:nth-child(5) { grid-column: span 3; grid-row: span 1; }
  .collage div:nth-child(6) { grid-column: span 2; grid-row: span 1; }
  .collage div:nth-child(7) { grid-column: span 1; grid-row: span 1; }

  /* Zoomed state */
  .collage div.zoomed {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    height: 80vh;
    z-index: 999;
    transform: translate(-50%, -50%);
    cursor: zoom-out;
  }

  .collage div.zoomed img {
    object-fit: contain;
    transform: scale(1.05);
  }

  /* Dim background when zoomed */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .3s ease;
    pointer-events: none;
    z-index: 998;
  }

  body.zoom-active::before {
    background: rgba(0,0,0,0.7);
    pointer-events: all;
  }

  @media (max-width: 700px) {
    .collage {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 100px;
    }
  }

  .booking-container {
    background: #1a1a1f;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
/*    width: 45%;*/
    max-width: 420px;
    padding: 0;
/*    display: flex;*/
	display:table-cell;
    flex-direction: column;
	padding-left:10px;
    overflow: hidden;
  }

  .booking-header {
    position: sticky;
    top: 0;
    background: #1a1a1f;
    padding: 0.8rem;
    border-bottom: 1px solid #2a2a30;
    z-index: 10;
  }

  .booking-header h2 {
    text-align: center;
    color: #00ff9d;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .booking-content {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    padding: 0.8rem;
    scrollbar-width: thin;
    scrollbar-color: #00ff9d #1a1a1f;
  }

  .booking-content::-webkit-scrollbar {
    width: 6px;
  }
  .booking-content::-webkit-scrollbar-thumb {
    background-color: #00ff9d;
    border-radius: 4px;
  }

  label {
    font-weight: 500;
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
  }

  .date-buttons, .time-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
  }

  .btn {
    background: #2a2a30;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
  }

  .btn:hover:not(:disabled) {
    background: #00ff9d;
    color: #000;
  }

  .btn.selected {
    background: #00ff9d;
    color: #000;
    font-weight: 600;
  }

  .slot {
    background: #1f1f25;
    border-radius: 8px;
    margin-top: 0.4rem;
    padding: 0.4rem;
  }

  .availability {
    display: block;
    font-size: 0.65rem;
    color: #00ff9d;
    margin-top: 0.1rem;
  }

  .court-selection {
    display: none;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.3rem;
    justify-content: center;
  }

  .court-btn {
    background: #3c3c44;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font-size: 0.7rem;
    transition: 0.2s;
  }

  .court-btn.selected {
    background: #00ff9d;
    color: #000;
    font-weight: bold;
  }

  .booking-footer {
    position: sticky;
    bottom: 0;
    background: #1a1a1f;
    padding: 0.8rem;
    border-top: 1px solid #2a2a30;
    z-index: 10;
  }

  #bookBtn {
    width: 100%;
    background: #00ff9d;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }

  .summary {
//    margin-top: 0.8rem;
    background: #222;
    border-radius: 8px;
    padding: 0.6rem;
    display: none;
overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff9d #1a1a1f;
	max-height:100px;
  }

  .summary h3 {
    text-align: center;
    color: #00ff9d;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }

  .summary p {
    font-size: 0.75rem;
    margin: 0.2rem 0;
  }
  .TotSum {
    margin-top: 0.8rem;
    background: #222;
    border-radius: 8px;
    padding: 0.6rem;
  }

  .TotSum h3 {
    text-align: center;
    color: #00ff9d;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }

  .TotSum p {
    font-size: 0.75rem;
    margin: 0.2rem 0;
  }

  .date-title {
    font-weight: bold;
    color: #00ff9d;
    margin-top: 0.4rem;
  }

  .date-section {
    margin-top: 0.3rem;
  }

  hr {
    border: none;
    border-top: 1px solid #2a2a30;
    margin: 0.4rem 0 0.6rem;
  }

  * { box-sizing: border-box; }