/* EVODE v12aw – style.css */
/* Last updated: August 31, 2025 */

/* EVODE – booking form collapse */


body {
    margin: 0;
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #000;
    color: white;
}

header {
    text-align: center;
    padding: 1em;
    background-color: #000;
}

header h1 {
    font-size: 2.5em;
    letter-spacing: 0.2em;
}

.logo {
	width:500px;
	height:200px;
}

@media (max-width: 600px) {
    .logo {
	width:350px;
	height:100px;
	}
}

.tagline {
    font-style: italic;
    color: #ccc;
}


/* HERO LAYOUT (fixed rows/columns) */
.hero {
  display: grid;
  grid-template-areas:
    "h3 h3"
	"text image"
    "points points";
  grid-template-columns: 1fr 1fr;   /* keep text | image side-by-side */
  grid-auto-rows: auto;
  column-gap: 20px;
  row-gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  background: linear-gradient(to right, #000, #127194);
  padding: 16px;
}

/* Row 1: full-width headline */
.hero1-text { grid-area: h3; }
.hero1-text h3 {
  font-size: 1.5em;
  margin: 0;
  white-space: nowrap;      /* keep on one line, truncate if needed */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row 2: three columns for h4, h5, h6 */
.hero-points {
  grid-area: points;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hero-points h4,
.hero-points h5,
.hero-points h6 {
  margin: 0;
  padding: 6px 8px;
  font-size: 1.1rem;        /* same size for all three */
  line-height: 1.2;
}

/* Row 3: text + image */
.hero-text { grid-area: text; }
.hero-text h2 {
  font-size: 1.2em;
  margin: 0.5em 0 0;
}
.hero-image { grid-area: image; justify-self: center; }
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Optional: small-screen font tweaks ONLY (layout stays the same) */
@media (max-width: 600px) {
  .hero1-text h3 { font-size: 1.2em; white-space: normal; }
  .hero-points h4,
  .hero-points h5,
  .hero-points h6 { font-size: 1rem; }
  .hero-text h2 { font-size: 1em; }
}
	  
	  

.cta-button {
    display: inline-block;
    padding: 0.8em 1.5em;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin-top: 1em;
}

.buttonspan {
    display: inline-block;
    padding: 0.8em 0em;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin-top: .15em;
	background-color: #127194;
	width: 100%;
	font-size: 1em;
	text-align: center;
	margin: 0 auto;
	border-radius: 25px;
	
}

@media (max-width: 600px) {
      .buttonspan {
    display: inline-block;
    padding: 0.8em 0em;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: bold;
	margin-top: .15em;
	background-color: #127194;
	width: 100%;
	font-size: 1em;
	text-align: center;
	margin: 0 auto;
	border-radius: 25px;
	
}
    }

.cta1-button {
    display: inline-block;
    padding: 0.8em 1.5em;
    border: 2px solid white;
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin-top: 1em;
	background-color: #000;
	width: 100%;
	font-size: 1em;
	border-radius: 25px;
}

.hero-image {
    flex: 1;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}
.services{
	padding: .25em 2em .5em 2em;
	background-color: #fff;
	color: #000;
}
.about{
    padding: 2em;
    background-color: #111;
	color: white;
}

.services .service-list {
    display: block;
    flex-wrap: wrap;
    gap: 1em;
	color: #000;
}

.etext{
	font-style:italic;
	color:#fff;
	text-decoration: underline;
}

.service {
    
    background: #fff;
    padding:.25em 0;
    border-radius: 8px;
	
	
}

footer {
    background-color: #000;
    text-align: center;
    padding: 1em;
    font-size: 0.9em;
    color: #777;
	
}
#map { height: 400px; margin: 10px 0; }
    #directionsPanel { padding: 10px; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; }
    #popupOverlay, #popup {
      display: none;
      position: fixed;
      z-index: 1000;
    }
    #popupOverlay {
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    #popup {
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: #127194;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      text-align: left;
      z-index: 1001;
    }
	button.link { background:none; border:none;
	font:Arial;
	font-size:12pt;
	}
	.popup1 {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }

  .popup1-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }

  .close1 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close1:hover,
  .close1:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
   /* Modal Overlay */
    #tosOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 999;
    }

    /* Modal Box */
    #tosModal {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
      border-radius: 8px;
      width: 75%;
      max-height: 90%;
      overflow-y: auto;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      font-family: Arial, sans-serif;
	  color: white;
	  border:#127194 6px solid;
    }

    #tosModal h2 {
      text-align: center;
      margin-top: 0;
    }

    #tosModal h3, #tosModal h4 {
      margin-top: 1.2em;
    }

    .closeBtn {
      position: absolute;
      top: 10px;
      right: 15px;
      background: #ff5f5f;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 14px;
    }

    .tos-link {
      color: #007BFF;
      text-decoration: underline;
      cursor: pointer;
    }

    @media (max-width: 600px) {
      #tosModal {
        padding: 15px;
        font-size: 14px;
      }
    }
	
	 /* Modal Overlay */
    #privacyOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 999;
    }

    /* Modal Box */
    #privacyModal {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
      border-radius: 8px;
      width: 75%;
      max-height: 90%;
      overflow-y: auto;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      font-family: Arial, sans-serif;
	  color: white;
	  border:#127194 6px solid;
    }

    #privacyModal h2 {
      text-align: center;
      margin-top: 0;
    }

    .closeBtnp {
      position: absolute;
      top: 10px;
      right: 15px;
      background: #ff5f5f;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 14px;
    }

    .privacy-link {
      color: #007BFF;
      text-decoration: underline;
      cursor: pointer;
    }

    @media (max-width: 600px) {
      #privacyModal {
        padding: 15px;
        font-size: 14px;
      }
    }
	 /* Modal Overlay */
    #aboutOverlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 999;
    }

    /* Modal Box */
    #aboutModal {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
	  color: #fff;
      border-radius: 8px;
      width: 75%;
      max-height: 90%;
      overflow-y: auto;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      font-family: Arial, sans-serif;
	  border:#127194 6px solid;
    }

    #aboutModal h2 {
      text-align: center;
      margin-top: 0;
    }

    .closeBtna {
      position: absolute;
      top: 10px;
      right: 15px;
      background: #ff5f5f;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 14px;
    }

    .about-link {
      color: #FFF;
      text-decoration: underline;
      cursor: pointer;
    }

    @media (max-width: 600px) {
      #aboutModal {
        padding: 15px;
        font-size: 14px;
      }
    }
	.contact {
    
    color: white;
	background: linear-gradient(to right, #000, #127194);
	text-align:center;
	width:100%;
}

	.contact h2{
		color:#fff;
		font-size:1.35em;
		font-decoration:bold;
		
		
	}
	.contact-link{
	color: #FFFFFF;
      text-decoration: underline;
      cursor: pointer;
	}
	.c-phone{
	color: #FFF;
      
	}
	a
{
    color: #ffffff;
}

.formtext{
	font-size:.85em;
	width:95%;
}
.fixedonly{
	border:3px solid #127194;
	background-color: #000;
	color: #fff;
	font-size:1em;
	text-align:center;
	padding: 0 .25em 0 1em;
	border-radius: 35px;
}
@media (max-width: 600px) {
      .fixedonly{
	border:3px solid #127194;
	background-color: #000;
	color: #fff;
	font-size:1em;
	text-align:left;
	padding: 0 .25em 0 1em;
	border-radius: 35px;
}
    }

/* ===== Booking form (namespaced) ===== */
.evode-booking.container{max-width:980px;margin:22px auto;padding:0 16px 40px;position:relative;z-index:2;}
.evode-booking .card{background:#fff;border:1px solid #0e1b24;border-radius:18px;padding:18px 16px;margin:16px 0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.evode-booking .section-heading{color:#fff;margin:0 0 12px;font-size:1.25rem}
.evode-booking .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.evode-booking label{display:flex;flex-direction:column;gap:6px}
.evode-booking label span{color:#000;font-size:.92rem}
.evode-booking input,.evode-booking textarea,.evode-booking select{background:#0a0f14;color:#f5f7fa;border:1px solid #16232e;border-radius:12px;padding:12px 12px;outline:none}
.evode-booking input:focus,.evode-booking textarea:focus,.evode-booking select:focus{border-color:#127194;box-shadow:0 0 0 3px rgba(18,113,148,.25)}
.evode-booking .span-2{grid-column:span 2}
.evode-booking .price-panel{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:14px;border:1px solid #0e1b24;border-radius:14px;background:#127194}
.evode-booking .price-label{color:#a8b3c3;font-size:.9rem}
.evode-booking .price-value{font-size:1.8rem;font-weight:700;color:#fff}
.evode-booking .price-breakdown{color:#a8b3c3;font-size:.92rem;margin-top:4px}
.evode-booking .btn-primary{background:#000;border:none;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;text-align:center;}
.evode-booking .btn-primary:hover{filter:brightness(1.07)}
.evode-booking .disclaimer{color:#000;font-size:.85rem;margin-top:10px}
@media (max-width:720px){
  .evode-booking .grid{grid-template-columns:1fr}
  .evode-booking .span-2{grid-column:span 1}
  .evode-booking .price-panel{flex-direction:column;align-items:flex-start}
  .evode-booking .price-panel .btn-primary{
    align-self: center;   /* centers horizontally in the column layout */
    margin-top: 10px;
}
}

/* Date/Time picker reliability */
.evode-booking input[type="date"], .evode-booking input[type="time"]{
  -webkit-appearance: menulist; appearance: auto; position: relative; z-index: 5; pointer-events: auto;
}

/* Ensure modals sit on top (in case legacy uses overlays) */
#tosOverlay,#privacyOverlay,#aboutOverlay{z-index:1000}
#tosModal,#privacyModal,#aboutModal{z-index:1001}

.miles-badge{ margin-left:8px; color:#a8b3c3; font-size:.9rem }

/* ensure Google Places dropdown stays above form */
.pac-container{ z-index: 100000 !important; }


/* v12aa: ensure custom modals appear above overlays and autocomplete */
#tosModal, #privacyModal, #aboutModal { z-index: 200000 !important; }
#tosOverlay, #privacyOverlay, #aboutOverlay { z-index: 199999 !important; }



/* v12ab: minimal modal fallbacks when custom CSS missing */
.evode-visible[role="dialog"], .evode-visible.modal, .evode-visible.modal-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 900px;
  width: 90%;
  background: #0b1020;
  color: #dbe6ff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.modal-open { overflow: hidden !important; }


.terms-confirm{ margin: 10px 0; font-size: .95rem }
.terms-confirm a{ text-decoration: underline }

/* v12af: keep checkbox + link on one line where space allows */
.terms-confirm .terms-label{ display:inline-flex; align-items:center; gap:8px; white-space:normal }
.terms-confirm .terms-label input{ margin:0 }
.terms-confirm a{ text-decoration: underline }


/* v12ah: Form toggle button */
.btn-form-toggle{
  width: 100%;
  display: block;
  border: none;
  border-radius: 9999px;
  padding: 14px 18px;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  margin: 12px 0 16px;
  background: linear-gradient(180deg, #127194, #000);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.btn-form-toggle:focus{ outline: 2px solid #a8c3ff; outline-offset: 2px; }
.btn-form-toggle[aria-expanded="true"]{ background: linear-gradient(180deg, #127194, #000); }

/* v12ah: collapsible wrapper */
.form-wrap{ overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.form-wrap.open{ max-height: 5000px; } /* large enough for full form */

/* v12ah: brighter inputs */
#BookingForm_Wrap input[type="text"],
#BookingForm_Wrap input[type="tel"],
#BookingForm_Wrap input[type="date"],
#BookingForm_Wrap input[type="time"],
#BookingForm_Wrap input[type="number"],
#BookingForm_Wrap select,
#BookingForm_Wrap textarea{
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #4f5d75 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
#BookingForm_Wrap ::placeholder{ color: #555 !important; opacity: 1; }
#BookingForm_Wrap label{ color: #e6edff; font-weight: 600; }

/* Service Intro Section */
.service-intro {
  padding: 20px;
  background: #000);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.service-intro h2 {
  color: #3AB0D4;
  margin-bottom: 10px;
  font-size: 1.6em;
  text-align:center;
}

.service-intro h3 {
  color: #3AB0D4;
  margin-bottom: 8px;
  font-size: 1.3em;
  text-align:center;
}

.service-intro p {
  margin-bottom: 15px;
  line-height: 1.6;
  
}

.service-intro ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.service-intro ul li {
  margin-bottom: 8px;
}


/* ===== Checkout Section ===== */
.evode-booking .checkout {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #0e1b24;
  border-radius: 14px;
  background: #f9fafb;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.evode-booking .checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.evode-booking .checkout-title {
  font-size: 1.25rem;
  margin: 0;
  color: #127194;
}

.evode-booking .checkout-note {
  margin: 0;
  font-size: .9rem;
  color: #5b6572;
}

.evode-booking .checkout-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}




.evode-booking .pay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  background: #000;
  color: #fff;
  border: 1px solid transparent;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.evode-booking .pay-btn:hover { filter: brightness(1.08); }
.evode-booking .pay-btn:active { transform: translateY(1px); }

.evode-booking .pay-btn--outline {
  background: #fff;
  color: #000;
  border: 1px solid #000;
}

.evode-booking .pay-btn .label { font-size: 1rem; line-height: 1.2; }
.evode-booking .pay-btn .desc  { font-size: .85rem; opacity: .85; }

.evode-booking .checkout-disclaimer {
  margin-top: 10px;
  font-size: .85rem;
  color: #5b6572;
}

/* Mobile */
@media (max-width: 720px) {
  .evode-booking .checkout-actions {
    grid-template-columns: 1fr;
  }
}



/* Booking form notice */
.evode-booking .form-notice {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid #0e1b24;
  border-radius: 14px;
  background: #f9fafb;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.evode-booking .form-notice h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: #127194;
}

.evode-booking .form-notice p {
  margin: 0 0 8px;
  line-height: 1.55;
  color: #0e1b24;
}

.evode-booking .form-notice .notice-points {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  color: #0e1b24;
}

.evode-booking .form-notice a {
  color: #127194;
  text-decoration: underline;
  font-weight: 700;
}

.evode-booking .form-notice .fine-print {
  margin-top: 8px;
  font-size: .88rem;
  color: #5b6572;
}

/* Optional: make the three points appear side-by-side on wider screens */
@media (min-width: 820px) {
  .evode-booking .form-notice .notice-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
  }
}
/* If you already added .form-notice styles earlier, keep them.
   This is just the extra callout + minor layout tweaks. */

.evode-booking .booking-id-note {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-left: 4px solid #127194;
  background: #eef6fb; /* subtle info background */
  border-radius: 10px;
  color: #0e1b24;
}

@media (min-width: 820px) {
  .evode-booking .form-notice .notice-points {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* three across on wide screens */
    column-gap: 12px;
  }
}
/* Existing .form-notice styles from earlier can remain as-is. */
.evode-booking .booking-id-note {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-left: 4px solid #127194;
  background: #eef6fb;
  border-radius: 10px;
  color: #0e1b24;
}

/* Optional: visually de-emphasize booking-fee link until confirmed */
.evode-booking .pay-link.is-disabled[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  text-decoration: none;
  cursor: not-allowed;
}

.btn-primary[disabled] { opacity: .6; cursor: not-allowed; }

/* Make "Request Booking" button larger */
.evode-booking .btn-primary{
  font-size: 1.35rem;       /* ~20px */
  padding: 16px 28px;       /* bigger tap area */
  border-radius: 9999px;
  min-height: 56px;         /* 48–56px is great for touch */
}

/* Optional: full-width on phones */
@media (max-width: 720px){
  .evode-booking .btn-primary{ width: 100%; }
}

/* If you use the offline-guard disable, keep this for visuals */
.evode-booking .btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

/* Admin cog */
header { position: relative; }
.admin-cog{
  position:absolute; top:12px; right:12px; color:#3AB0D4;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(18,113,148,.15); text-decoration:none;
}
.admin-cog:hover{ filter:brightness(1.15); }

/* Admin modal + overlay (matching your existing modal system) */
#adminOverlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:199999;
}
#adminModal {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:90%; max-width:620px; max-height:90vh; overflow:auto;
  background:#000; color:#fff; border:#127194 6px solid; border-radius:12px;
  padding:16px; z-index:200000; box-shadow:0 20px 50px rgba(0,0,0,.6);
}

/* Admin modal form styles */
#adminModal .admin-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
#adminModal label{ display:flex; flex-direction:column; gap:6px; }
#adminModal input[type=text], #adminModal input[type=datetime-local]{
  padding:10px 12px; border:1px solid #294255; border-radius:8px; background:#09141c; color:#fff;
}
#adminModal .row{ display:flex; gap:8px; flex-wrap:wrap; }
#adminModal button{ background:#127194; border:none; color:#fff; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer; }
#adminModal button.btn-outline{ background:#fff; color:#127194; border:1px solid #127194; }
#adminModal button:hover{ filter:brightness(1.08); }
#Admin_Summary .ok{ color:#9be7a1 } #Admin_Summary .err{ color:#ff9b9b }


/* Hamburger button */
.evode-hamburger {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.evode-hamburger span {
  display: block;
  height: 4px;
  background: #127194;
  border-radius: 2px;
  transition: 0.3s;
}

/* Side Menu */
.evode-side {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  padding: 1rem;
}
.evode-side.open {
  transform: translateX(0);
}
.evode-side__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.evode-side__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.evode-side__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.evode-side__list li {
  margin: 0.5rem 0;
}
.evode-link {
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  color: #127194;
  width: 100%;
  text-align: left;
}


/* === Hamburger button === */
.evode-hamburger{
  position:absolute; top:14px; left:14px; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; z-index:1002;
}
.evode-hamburger span{ display:block; width:22px; height:2px; background:#333; margin:3px 0; }

/* === Side menu === */
.evode-side{
  position:fixed; top:0; left:0; height:100vh; width:290px; background:#fff;
  box-shadow:2px 0 12px rgba(0,0,0,.2); transform:translateX(-100%);
  transition:transform .25s ease; z-index:1001; overflow-y:auto;
}
.evode-side.open{ transform:translateX(0); }
.evode-side__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.evode-side__close{ background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer; }
.evode-side__list{ list-style:none; padding:8px 0 24px; margin:0; }
.evode-side__list .evode-link{ display:block; width:100%; text-align:left; padding:12px 16px; background:transparent; border:0; cursor:pointer; }
.evode-side__list .evode-link:hover{ background:#f5f7f9; }

/* === Overlay === */
.evode-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1000; }
.evode-overlay[hidden]{ display:none; }


/* ===== Contact modal: match About modal styles ===== */
#contactOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999; /* same as #aboutOverlay */
}

#contactModal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #fff;
  border-radius: 8px;
  width: 75%;
  max-height: 90%;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 1000; /* same as #aboutModal */
  font-family: Arial, sans-serif;
  border: #127194 6px solid; /* same blue border */
}

#contactModal h2 {
  text-align: center;
  margin-top: 0;
}

/* reuse your existing .closeBtna class as-is */

/* Keep the high z-index override consistent */
#contactModal { z-index: 200000 !important; }
#contactOverlay { z-index: 199999 !important; }

/* Mobile tweak like About */
@media (max-width: 600px) {
  #contactModal {
    padding: 15px;
    font-size: 14px;
  }
}


/* ===== Admin modal: match About modal ===== */
#adminOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 199999; /* align with your aboutOverlay override */
}

#adminModal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  color: #fff;
  border-radius: 8px;
  width: 75%;
  max-height: 90%;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 200000; /* align with your aboutModal override */
  font-family: Arial, sans-serif;
  border: #127194 6px solid;
}

#adminModal h2 {
  text-align: center;
  margin-top: 0;
}

/* Mobile tweak like About */
@media (max-width: 600px) {
  #adminModal {
    padding: 15px;
    font-size: 14px;
  }
}


/* Admin lists */
.acc-item{ border:1px solid #294255; border-radius:8px; margin:8px 0; background:#09141c; }
.acc-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; cursor:pointer; color:#fff; }
.acc-body{ display:none; padding:6px 12px; color:#dbe6ff; }
.acc-item.open .acc-body{ display:block; }
.acc-body .row{ border-top:1px dashed #294255; padding:8px 0; }
#Admin_Edit_Form label{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
#Admin_Edit_Form input, #Admin_Edit_Form select, #Admin_Edit_Form textarea{
  padding:10px 12px; border:1px solid #294255; border-radius:8px; background:#09141c; color:#fff; width:100%;
}
#Admin_Edit_Form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:720px){ #Admin_Edit_Form .grid-2{ grid-template-columns:1fr; } }
/* Mobile: keep hamburger away from the OS status/clock area */
@media (max-width: 768px) {
  #evodeHamburgerBtn {
    position: fixed;               /* keep it anchored */
    top: calc(env(safe-area-inset-top, 0px) + 18px); /* add safe-area + offset */
    right: 16px;
    z-index: 10010;                /* above page content */
    touch-action: manipulation;    /* better tap behavior */
  }

  /* If your header overlaps, give it room too (optional) */
  header, .site-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  }
}

/* Respect the iOS notch globally (safe-area) */
html, body {
  padding-top: env(safe-area-inset-top, 0px);
}
/* Extra nudge when in PWA shell */
.pwa #evodeHamburgerBtn {
  top: calc(env(safe-area-inset-top, 0px) + 28px);
}

/* --- Global mobile safety --- */
html, body { overflow-x: hidden; }                 /* no sideways scroll on page */
body.modal-open { overflow: hidden; }              /* lock page scroll when modal open */

/* Apply to ALL overlay/modals by id suffix (About/Contact/Admin/TOS/Privacy/etc.) */
[id$="Overlay"] {
  position: fixed !important;
  inset: 0 !important;                             /* full-screen overlay */
  display: none;                                   /* shown via JS */
  background: rgba(0,0,0,.45);
  z-index: 200000;                                 /* above everything */
}

[id$="Modal"] {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0;
  width: 100vw;                                    /* fill viewport width */
  max-width: none;
  top: 0;
  height: 100vh;                                   /* fill viewport height */
  max-height: 100vh;
  background: #fff;
  border-radius: 0;                                /* full-screen look */
  overflow-y: auto;                                /* internal scroll */
  overflow-x: hidden;                              /* no sideways scroll */
  -webkit-overflow-scrolling: touch;               /* iOS momentum */
  padding: calc(env(safe-area-inset-top, 0px) + 60px) 16px 16px 16px; /* room for header */
}

/* Modal header row (close button area) — sticky so it's always reachable */
[id$="Modal"] .modal-header,
[id$="Modal"] .modal-close,
#evodeSideClose {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 200001;
}

/* If your close "X" is absolutely positioned inside the modal, keep it visible */
[id$="Modal"] .modal-close,
#evodeSideClose,
#adminModal .close,
#aboutModal .close,
#contactModal .close {
  position: sticky;           /* override absolute */
  align-self: flex-end;
  margin-top: -44px;          /* pulls into the padded header area */
}

/* Buttons/tools bar under the header: keep visible while scrolling */
#EVODE_AdminTools_Bar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 200002;
}

/* Admin edit grid: stack on phones */
@media (max-width: 768px) {
  #Admin_Edit_Form .grid-2 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  #Admin_Edit_Form label { width: 100%; }
  #Admin_Edit_Form input, 
  #Admin_Edit_Form select, 
  #Admin_Edit_Form textarea { width: 100%; }
}

/* Trip Timer & Quick Texts modals: full-screen too */
#EVODE_TT_Overlay, #EVODE_QT_Overlay { inset: 0; }
#EVODE_TT_Modal, #EVODE_QT_Modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 60px) 16px 16px 16px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Head rows inside those modals should wrap nicely on mobile */
#EVODE_TT_Modal .head, #EVODE_QT_Modal .head {
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
  align-items: center;
}

/* Make timer big and readable on mobile */
#EVODE_TT_Timer {
  font-size: clamp(22px, 7vw, 36px);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}


:root{
  --hamburger-top: max(14px, env(safe-area-inset-top));
}

/* Position hamburger safely */
#evodeHamburgerBtn{
  position: fixed;           /* if not already */
  top: var(--hamburger-top); /* pushes it below phone clock / notch */
  left: 12px;
  z-index: 200100;           /* above page content */
}

/* Side menu overlay base */
#evodeSideOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
}

/* Drawer panel (example) */
#evodeSideMenu{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 86vw);
  transform: translateX(-100%);
  transition: transform .2s ease;
  background: #fff;
  box-shadow: 2px 0 18px rgba(0,0,0,.15);
}
#evodeSideMenu.open{ transform: translateX(0); }

/* --- Make hamburger respect iOS safe area and be easy to tap --- */
.evode-hamburger{
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 12px); /* keeps it below PWA clock area */
  left: 14px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; z-index: 1002;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure the overlay never blocks taps when hidden */
.evode-overlay[hidden]{ display: none !important; pointer-events: none !important; }

/* Fallback drawer styles if site CSS misses (JS will use them automatically) */
@media (max-width: 720px){
  .evode-side{
    max-width: 90vw;
  }
}

/* Admin fullscreen modals scroll correctly on small screens */
.evode-fullscreen-modal{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Hamburger: keep it tappable and away from iOS PWA clock area */
#evodeHamburgerBtn{
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0) + 12px) !important;
  left: 12px !important;
  width: 48px !important;
  height: 48px !important;
  z-index: 2147483000 !important;
}

/* Overlay must never block when hidden */
#evodeSideOverlay[hidden]{
  display: none !important;
  pointer-events: none !important;
}

/* Start of Round Floating Timer */

/* ===== EVODE Floating Round Timer (v1) ===== */
#evodeTimerFab[hidden]{ display:none !important; }
#evodeTimerFab{
  position: fixed;
  bottom: 18px; right: 18px;            /* starts docked, but is draggable */
  width: 320px; height: 320px;
  border-radius: 50%;
  z-index: 250000;                       /* above admin modals (yours go to ~200k) */
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  background: #127194;                   /* EVODE brand */
  display: grid; place-items: center;
  touch-action: none;                    /* for smooth pointer dragging */
  user-select: none;
}

#evodeTimerFab .evode-timer-inner{
  width: 86%; height: 86%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: #fff; text-align:center;
  margin:auto;
}

#evodeTimerDisplay.evode-ended{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.evode-timer-time{
  font-size: clamp(36px, 9vw, 56px);
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.evode-timer-input{
  width: 70%;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 8px;
  text-align: center;
}

.evode-timer-controls button{
  margin: 4px; padding: 8px 14px;
  border: none; border-radius: 8px;
  background: #fff; color: #127194; font-weight: 700;
  cursor: pointer;
}
.evode-timer-controls button:hover{ background:#f0f0f0; }

/* Drag affordance (subtle ring) */
#evodeTimerFab::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.18);
  pointer-events:none;
}

/* Smaller on very small screens */
@media (max-width: 420px){
  #evodeTimerFab{ width: 260px; height: 260px; }
}



/* Endo of Round Floating Timer */

/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="tel"], 
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: 16px !important;
}

/* Specifically for modal inputs */
[id$="Modal"] input,
[id$="Modal"] textarea,
[id$="Modal"] select {
  font-size: 16px !important;
}

/* Admin modal inputs */
#adminModal input,
#adminModal textarea,
#adminModal select {
  font-size: 16px !important;
}

/* Quick texts modal inputs */
#EVODE_QT_Modal input,
#EVODE_QT_Modal textarea {
  font-size: 16px !important;
}