@layer components {
  [data-ui="hero"] {
    position: relative;
    min-height: clamp(30rem, 50vh, 45rem);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-red-dark) 100%);
    overflow: hidden;
  }



  [data-ui="hero-content"] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 50rem;
    padding: var(--space-md);
  }

  [data-ui="hero"] h1 {
    font-size: var(--size-step-4);
    line-height: 1.1;
    margin-bottom: var(--space-md);
    text-wrap: balance;
  }

  [data-ui="hero"] p {
    font-size: var(--size-step-1);
    color: var(--color-gray-lighter);
    margin-bottom: var(--space-lg);
    text-wrap: pretty;
  }

  [data-ui="btn"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-size: inherit;
  }

  /* Added focus states for all buttons for keyboard accessibility */
  [data-ui="btn"]:focus {
    outline: 2px solid var(--color-red-light);
    outline-offset: 2px;
  }

  [data-ui="btn-primary"] {
    background: var(--color-red);
    color: var(--color-white);
  }

  [data-ui="btn-primary"]:hover {
    background: var(--color-red-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  [data-ui="btn-primary"]:active {
    transform: translateY(0);
  }

  /* Enhanced focus state for primary buttons */
  [data-ui="btn-primary"]:focus {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  [data-ui="btn-secondary"] {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-red);
  }

  [data-ui="btn-secondary"]:hover {
    background: var(--color-red);
    transform: translateY(-2px);
  }

  [data-ui="card-grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-md);
  }

  [data-ui="card"] {
    background: var(--color-gray-dark);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
  }

  [data-ui="card"]:hover {
    transform: translateY(-0.5rem);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-red);
  }

  /* Added focus-within for cards containing focusable elements */
  [data-ui="card"]:focus-within {
    border-color: var(--color-red);
    box-shadow: var(--shadow-lg);
  }

  [data-ui="card-img"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-gray);
  }

  [data-ui="card-content"] {
    padding: var(--space-md);
  }

  [data-ui="site-search"] {
    position: relative;
    flex: 1 1 220px;
    max-width: 320px;
  }

  [data-ui="search-form"] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  [data-ui="search-form"] input {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-border);
    background: #111;
    color: var(--color-white);
    font-size: 0.95rem;
  }

  [data-ui="search-form"] input:focus {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
  }

  [data-ui="search-form"] button {
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-red);
    background: transparent;
    color: var(--color-white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  [data-ui="search-form"] button:hover {
    background: var(--color-red);
  }

  [data-ui="search-results"] {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    background: #0f0f0f;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs);
    display: none;
    z-index: 1002;
  }

  [data-ui="search-results"][data-visible="true"] {
    display: block;
  }

  [data-ui="search-list"] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-xs);
  }

  [data-ui="search-item"] a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-white);
    background: #151515;
    transition: background var(--transition-fast);
  }

  [data-ui="search-item"] a:hover,
  [data-ui="search-item"] a:focus {
    background: #1f1f1f;
  }

  [data-ui="search-title"] {
    font-weight: 700;
    font-size: 0.95rem;
  }

  [data-ui="search-desc"] {
    font-size: 0.85rem;
    color: var(--color-gray-lighter);
  }

  [data-ui="search-empty"] {
    padding: 0.6rem 0.75rem;
    color: var(--color-gray-lighter);
    font-size: 0.9rem;
  }

  [data-ui="blog-grid"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  [data-ui="blog-card"] {
    background: linear-gradient(135deg, #4a1414 0%, #8b2020 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
  }

  [data-ui="blog-card-body"] h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
  }

  [data-ui="blog-card-body"] p {
    color: var(--color-white);
    opacity: 0.9;
    margin-bottom: var(--space-md);
  }

  [data-ui="blog-meta"] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  [data-ui="blog-link"] {
    align-self: flex-start;
    color: var(--color-white);
    font-weight: 700;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 0.2rem;
    transition: border-color var(--transition-fast);
  }

  [data-ui="blog-link"]:hover {
    border-color: var(--color-white);
  }

  [data-ui="blog-status"] {
    margin-top: var(--space-md);
    color: var(--color-gray-lighter);
    font-size: 0.95rem;
    text-align: center;
  }

  @media (max-width: 1023px) {
    [data-ui="site-search"] {
      max-width: 240px;
    }

    [data-ui="blog-grid"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    [data-ui="site-search"] {
      max-width: 180px;
    }

    [data-ui="search-form"] button {
      padding: 0.5rem 0.7rem;
      font-size: 0.85rem;
    }

    [data-ui="blog-grid"] {
      grid-template-columns: 1fr;
    }
  }

  [data-ui="card"] h3 {
    font-size: var(--size-step-2);
    margin-bottom: var(--space-xs);
  }

  [data-ui="card"] p {
    color: var(--color-gray-lighter);
    margin-bottom: var(--space-sm);
  }

  [data-ui="card-meta"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-gray-lighter);
  }

  [data-ui="feature-grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-lg);
  }

  [data-ui="feature"] {
    text-align: center;
    padding: var(--space-md);
  }

  [data-ui="feature-icon"] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-md);
    background: var(--color-red-dark);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
  }

  [data-ui="feature"] h3 {
    font-size: var(--size-step-1);
    margin-bottom: var(--space-sm);
  }

  [data-ui="feature"] p {
    color: var(--color-gray-lighter);
  }

  [data-ui="form"] {
    max-width: 40rem;
    margin: 0 auto;
  }

  [data-ui="form-group"] {
    margin-bottom: var(--space-md);
  }

  [data-ui="label"] {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
  }

  [data-ui="input"],
  [data-ui="select"],
  [data-ui="textarea"] {
    width: 100%;
    padding: var(--space-sm);
    background: var(--color-gray-dark);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
    color: var(--color-white);
    transition: border-color var(--transition-fast);
    font-family: inherit;
    font-size: inherit;
  }

  /* Enhanced select element styling for better visibility */
  [data-ui="select"] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8 10.667L4 6.667h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    padding-right: calc(var(--space-md) + 1rem);
    cursor: pointer;
  }

  [data-ui="select"] option {
    background: var(--color-gray-dark);
    color: var(--color-white);
  }

  [data-ui="input"]:focus,
  [data-ui="select"]:focus,
  [data-ui="textarea"]:focus {
    outline: none;
    border-color: var(--color-red);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
  }

  [data-ui="textarea"] {
    min-height: 8rem;
    resize: vertical;
  }

  [data-ui="error"] {
    color: var(--color-red-light);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
    display: none;
  }

  [data-ui="error"][data-visible="true"] {
    display: block;
  }

  [data-ui="form-group"][data-error="true"] [data-ui="input"],
  [data-ui="form-group"][data-error="true"] [data-ui="select"],
  [data-ui="form-group"][data-error="true"] [data-ui="textarea"] {
    border-color: var(--color-red-light);
  }

  [data-ui="cookie-banner"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-gray-dark);
    border-top: 2px solid var(--color-red);
    padding: var(--space-md);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    z-index: 2000;
    box-shadow: var(--shadow-lg);
  }

  [data-ui="cookie-banner"][data-visible="true"] {
    transform: translateY(0);
  }

  [data-ui="cookie-content"] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
  }

  [data-ui="cookie-actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  [data-ui="cookie-modal"] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.8);
    padding: var(--space-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 2001;
  }

  [data-ui="cookie-modal"][data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  [data-ui="cookie-modal-content"] {
    background: var(--color-gray-dark);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 40rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  [data-ui="booking-modal"] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-md);
    background: rgba(6, 2, 2, 0.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 2002;
  }

  [data-ui="booking-modal"][data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  [data-ui="booking-card"] {
    width: min(48rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: radial-gradient(circle at top, rgba(88, 20, 20, 0.65), rgba(12, 6, 6, 0.95) 60%);
    border: 1px solid rgba(146, 56, 56, 0.6);
    border-radius: 1.5rem;
    padding: var(--space-lg);
    color: var(--color-white);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.6);
  }

  [data-ui="booking-header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  [data-ui="booking-header"] h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0;
  }

  [data-ui="booking-section-title"] {
    border: 1px solid rgba(146, 56, 56, 0.7);
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--space-md) 0 var(--space-sm);
    background: rgba(22, 6, 6, 0.7);
  }

  [data-ui="booking-modal"] [data-ui="label"] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
  }

  [data-ui="booking-modal"] [data-ui="input"],
  [data-ui="booking-modal"] [data-ui="select"] {
    background: rgba(12, 6, 6, 0.9);
    border: 1px solid rgba(146, 56, 56, 0.7);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    color: var(--color-white);
  }

  [data-ui="booking-modal"] [data-ui="select"] {
    background-color: rgba(12, 6, 6, 0.9);
  }

  [data-ui="booking-grid"] {
    display: grid;
    gap: var(--space-md);
  }

  [data-ui="booking-grid"][data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-ui="booking-grid"][data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-ui="booking-submit"] {
    width: 100%;
    border-radius: 999px;
    border: 2px solid #f2f2f2;
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #d60000;
    color: #ffffff;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  [data-ui="booking-submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(214, 0, 0, 0.35);
  }

  [data-ui="booking-success"] {
    display: none;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
  }

  [data-ui="booking-success"][data-visible="true"] {
    display: block;
  }

  [data-form="booking-modal"][data-visible="false"] {
    display: none;
  }

  [data-ui="cookie-toggle"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--color-gray);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
  }

  [data-ui="toggle"] {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background: var(--color-gray-light);
    border-radius: 1rem;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  /* Added focus state for toggle switches */
  [data-ui="toggle"]:focus {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
  }

  [data-ui="toggle"][data-checked="true"] {
    background: var(--color-red);
  }

  [data-ui="toggle"]::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-fast);
  }

  [data-ui="toggle"][data-checked="true"]::after {
    transform: translateX(1.5rem);
  }

  [data-ui="section-header"] {
    text-align: center;
    max-width: 50rem;
    margin: 0 auto var(--space-lg);
  }

  [data-ui="section-header"] h2 {
    font-size: var(--size-step-3);
    margin-bottom: var(--space-sm);
    text-wrap: balance;
  }

  [data-ui="section-header"] p {
    font-size: var(--size-step-1);
    color: var(--color-gray-lighter);
    text-wrap: pretty;
  }

  [data-ui="side-drawer"] {
    position: fixed;
    top: 0;
    right: 0;
    width: min(30rem, 100vw);
    height: 100vh;
    background: var(--color-gray-dark);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 2000;
    padding: var(--space-lg);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }

  [data-ui="side-drawer"][data-open="true"] {
    transform: translateX(0);
  }

  [data-ui="drawer-header"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
  }

  [data-ui="drawer-close"] {
    font-size: 2rem;
    color: var(--color-gray-lighter);
    transition: color var(--transition-fast);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
    /* Ensure close button has sufficient tap target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-ui="drawer-close"]:hover {
    color: var(--color-red-light);
  }

  /* Added focus state for drawer close button */
  [data-ui="drawer-close"]:focus {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  @container (min-width: 600px) {
    [data-ui="card-grid"] {
      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }
  }
}


    /* Mobile responsive styles */
    @media (max-width: 768px) {
      /* Hero section - stack vertically */
      section[data-ui="hero"] {
        flex-direction: column !important;
        min-height: auto !important;
      }
      
      section[data-ui="hero"] > div:first-child {
        min-height: 40vh !important;
      }
      
      section[data-ui="hero"] > div:last-child {
        min-height: auto !important;
        padding: var(--space-lg) !important;
      }
      
      /* Top picks - grid to single column */
      .grid-5 {
        grid-template-columns: 1fr !important;
      }
      
      /* Top picks - last column with button */
      .grid-5 > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-md) !important;
      }
      
      .grid-5 > div:last-child button {
        width: 100% !important;
      }
      
      /* Why Book with Us - 4 cards to 1 column */
      section[data-ui="why-book"] > div > div {
        grid-template-columns: 1fr !important;
      }
      
      /* Why Choose Our Guide - force ALL grid children to 1 column */
      .why-choose-grid-3,
      .why-choose-grid-2 {
        grid-template-columns: 1fr !important;
      }
      
      /* Fix icon container height in all sections */
      div[style*="border-radius: 50%"][style*="width: 60px"] {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
      }
      
      div[style*="border-radius: 50%"][style*="width: 60px"] img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
      }
      
      /* Split sections (Cities, Responsible Gaming, Contact, etc) */
      section[data-ui="section"] {
        flex-direction: column !important;
        padding: var(--space-lg) 0 !important;
      }
      
      section[data-ui="section"] > div {
        margin-left: var(--space-md) !important;
        margin-right: var(--space-md) !important;
        padding: var(--space-md) !important;
      }
      
      section[data-ui="section"] img {
        height: 250px !important;
        border-radius: 0.5rem !important;
      }
      
      /* Guides section - 3 cards to 1 column */
      section[data-ui="section"] > div[data-ui="container"] > div:last-child {
        grid-template-columns: 1fr !important;
      }
      
      /* Footer - stack vertically */
      footer[data-ui="footer"] > div > div:first-child {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
      }
      
      footer[data-ui="footer"] > div > div:last-child {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--space-lg) !important;
      }
      
      footer[data-ui="footer"] > div > div:last-child > div:last-child {
        text-align: center !important;
      }
      
      /* Contact form */
      section[data-ui="section"] form {
        gap: var(--space-sm) !important;
      }
      
      section[data-ui="section"] form input,
      section[data-ui="section"] form textarea {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
      }
      
      section[data-ui="section"] form button {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
      }

      [data-ui="booking-card"] {
        padding: var(--space-md) !important;
      }

      [data-ui="booking-grid"][data-columns="3"],
      [data-ui="booking-grid"][data-columns="2"] {
        grid-template-columns: 1fr !important;
      }
    }