:root{
      --outline:#ccc;
      --bg:#f0f0f0;
      --gap:12px;
          /* ===== Two bottom div borders ===== */
      --blue:#000;
    }

    /* ===== Global ===== */
    html,body{
      height:100%;
      margin:0;
      font-family:Arial, sans-serif;
      background:var(--bg);
      overflow:hidden; /* desktop: no page scroll, panels scroll */
    }
    body{
      display:flex;
      flex-direction:column;
    }

    /* ===== NAVBAR (taken from Checkout page) ===== */
    .navbar { display: flex; background-color: #f2f2f2; align-items: stretch; height: 7.5%; min-height: 56px; }
    .navbtn, .dropbtn, .cartbtn {
      border: 0; background: none; cursor: pointer; font-size: 14px;
      transition: background-color 0.2s ease;
      display: flex; align-items: center; justify-content: center;
      padding: 0 20px; white-space: nowrap; height: 100%;
    }
    .navbtn:hover, .cartbtn:hover { background-color: #ddd; }
    .smallbtn { flex: 0 0 auto; }

    .romogi-btn { display: flex; align-items: center; gap: 6px; }
    .romogi-btn img { height: 22px; width: auto; object-fit: contain; }
    .location-btn img { height: 34px; width: auto; object-fit: contain; }

    .search-container { flex: 1 1 auto; display: flex; align-items: center; }
    .search-container input[type="text"] {
      flex: 1; padding: 10px 14px; font-size: 14px;
      border: 1px solid #ccc; border-right: none;
      border-radius: 4px 0 0 4px;
    }
    .search-container button {
      border: 1px solid #ccc; border-left: none;
      background: #eee; padding: 10px 14px; cursor: pointer;
      border-radius: 0 4px 4px 0;
      display: flex; align-items: center; justify-content: center;
    }
    .search-container button img { height: 18px; width: 18px; object-fit: contain; }
    .search-container button:hover { background: #ddd; }

    .dropdown { position: relative; flex: 0 0 auto; height: 100%; }
    .dropbtn { width: 100%; height: 100%; padding: 0 10px; }
    .dropbtn img { height: 20px; width: 20px; object-fit: contain; }
    .dropdown:hover .dropbtn { background-color: #ddd; }
    .arrow { font-size: 10px; transition: transform 0.2s ease; display: inline-block; }

    .dropdown-menu {
      position: absolute; left: 0; top: 100%;
      min-width: 160px; background: #f2f2f2;
      border-top: 1px solid #e0e0e0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      opacity: 0; transform: translateY(-4px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 10;
    }
    .dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .dropdown.open .arrow { transform: rotate(180deg); }
    .dropdown-menu a {
      font-size: 1.2em; display: block; padding: 12px 16px;
      text-decoration: none; color: inherit; transition: background-color 0.2s ease;
    }
    .dropdown-menu a:hover { background-color: #ddd; }

    .cartbtn img { height: 34px; width: auto; object-fit: contain; }

    /* ===== Search suggestions dropdown (NEW) ===== */
    .search-container{ position: relative; } /* anchor dropdown to search row */

    .search-suggest{
      position:absolute;
      left:0;
      right:0;
      top:calc(100% + 2px);
      background:#fff;
      border:1px solid #ccc;
      border-top:none;
      border-radius:0 0 6px 6px;
      box-shadow:0 6px 18px rgba(0,0,0,0.10);
      max-height:260px;
      overflow:auto;
      z-index:50;
      display:none;
    }
    .search-suggest.open{ display:block; }

    .search-suggest-item{
      padding:10px 12px;
      font-size:14px;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .search-suggest-item:hover,
    .search-suggest-item.active{
      background:#f2f2f2;
    }
    .search-suggest-empty{
      padding:10px 12px;
      font-size:13px;
      color:#666;
    }

    /* ===== Ballot page outer wrapper ===== */
    .outer{
      flex:1;
      display:flex;
      flex-direction:column;
      padding:var(--gap);
      box-sizing:border-box;
      gap:var(--gap);
      min-height:0;
    }

    .bottom-row{
      flex:1;
      display:flex;
      gap:var(--gap);
      min-height:0;
    }

    .main-content{
      flex:1;
      background:#fdfdfd;
      border:1px solid var(--blue);
      box-sizing:border-box;
      min-width:0;
      min-height:0;
      display:flex;
      flex-direction:column;
      padding:14px 18px;
      overflow:auto; /* panel scroll */
    }

    .side-panel{
      width:360px;
      background:#fff;
      border:1px solid var(--blue);
      box-sizing:border-box;
      padding:12px 14px;
      overflow:auto; /* panel scroll */
      min-height:0;
    }

    /* ===== Right panel list styling (unchanged) ===== */
    .side-panel h3{
      margin:0 0 10px 0;
      font-size:14px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    ol.roman{
      margin:0;
      padding-left:22px;
      list-style-type:upper-roman;
    }
    ol.roman > li{ margin:0 0 14px 0; }
    ul.inner{ margin:8px 0 0 0; padding-left:18px; }
    ul.inner > li{ margin:4px 0; }

    /* ===== Ballot styling (unchanged content; title caps enforced) ===== */
    .ballot-title{
      text-align:center;
      font-size:20px;
      font-weight:800;
      letter-spacing:0.08em;
      margin:4px 0 14px 0;
      text-transform:uppercase;
    }

    .ballot{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .race{
      background:#fff;
      border:1px solid #ddd;
      box-sizing:border-box;
      padding:12px 12px;
    }

    .race-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }

    .race-left{ min-width:0; }

    .race h4{
      margin:0 0 6px 0;
      font-size:14px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0.03em;
    }

    .race .scope{
      margin:0;
      font-size:12px;
      color:#555;
    }

    .race-date{
      flex:0 0 auto;
      white-space:nowrap;
      font-size:13px;
      text-align:right;
    }

    .candidates{
      margin:0;
      padding-left:18px;
    }
    .candidates li{
      margin:6px 0;
      line-height:1.25;
    }

    .note{
      margin-top:10px;
      font-size:12px;
      color:#666;
    }

    /* ===== Region links ===== */
    .region-link{
      cursor:pointer;
      color:#0066cc;
      text-decoration:underline;
    }
    .region-link:hover{ color:#004999; }
    .region-link.active{
      font-weight:700;
      color:#000;
      text-decoration:none;
    }

    /* ===== Mobile layout (taken from Checkout page patterns) ===== */
    @media (max-width: 768px) {

      /* allow the page to scroll normally on mobile */
      html, body{ overflow:auto; height:auto; }

      /* NAVBAR: wrap into two rows WITHOUT overlapping content */
      .navbar{
        flex-wrap:wrap;
        height:auto;
        min-height:0;
        align-items:center;
        justify-content: space-between; /* even spread on icon row */
      }

      /* stop children from forcing 100% height behavior on wrap */
      .navbtn, .dropbtn, .cartbtn{
        height:56px;
        padding:0 12px;
      }

      /* icons row first */
      .navbar .romogi-btn,
      .navbar .location-btn,
      .navbar .dropdown,
      .navbar .navbtn[aria-label="Account"],
      .navbar .cartbtn{
        order:1;
        flex: 1 1 0;
        padding: 0;
        justify-content:center;
      }

      /* search row second, full width */
      .navbar .search-container{
        order:2;
        flex:1 0 100%;
        width:100%;
        padding:10px 10px 12px;
        box-sizing:border-box;
      }

      /* Main layout stacks vertically */
      .bottom-row{
        flex-direction:column;
      }
      .side-panel{
        width:auto;
      }
    }
    
    /* ===== Search suggestions dropdown ===== */
.search-container{ position: relative; } /* anchor dropdown to search row */

.search-suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 2px);
  background:#fff;
  border:1px solid #ccc;
  border-top:none;
  border-radius:0 0 6px 6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.10);
  max-height:260px;
  overflow:auto;
  z-index:50;
  display:none;
}

.search-suggest.open{ display:block; }

.search-suggest-item{
  padding:10px 12px;
  font-size:14px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.search-suggest-item:hover,
.search-suggest-item.active{
  background:#f2f2f2;
}

.search-suggest-empty{
  padding:10px 12px;
  font-size:13px;
  color:#666;
}