:root{
  --header-height: clamp(72px, 12svh, 110px);
  --drawer-height: clamp(220px, 30svh, 300px);
}

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  background:#2F7FA3;
  font-family:"Cinzel",serif;
  margin:0;
  color:white;
  overflow:hidden;
}

.hidden{
  display:none !important;
  
}

.screen{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
    linear-gradient(135deg, #0e3a46 0%, #3FD0E3 60%, #A6F2FA 100%);
  opacity:1;
  transition:opacity 1s ease;
  z-index:20;
}


/* MAP SCREEN */
#mapScreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--app-height);
  background:#2F7FA3;
  overflow:hidden;
}

.appHeader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  z-index:5001;
  background:#1F6F8B;
}

.headerBrand{
  font-size:56px;
  font-weight:500;
  line-height:1.1;
  text-align:center;
  width:100%;
  margin:0;
  color:white;
}

/* SEARCH BAR */
#searchBarWrap{
  width:100%;
  position:relative;
  
  }

#streetSearchInput{ width:100%; height:120px; padding:0 20px;
 
border:none; border-bottom:12px solid #2F7FA3; /* 🔑 anchor line */
 
font-size:60px; font-weight:600; font-family:Georgia,"Times New Roman",serif;
 
background:#F5F7F8; color:#000;
 
text-align:center; outline:none; box-sizing:border-box; }

#streetSearchInput::placeholder{
  font-size:48px;
  font-weight:600;
  color:#333;
  text-align:center;
  }

#streetSearchResults{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:white;
  color:black;
  border-radius:6px;
  margin-top:4px;
  max-height:220px;
  overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
   
}

.searchItem{
  padding:20px 18px;
  cursor:pointer;
  font-size:30px;
  line-height:1.25;
  font-weight:600;
}

.searchItem:hover{
  background:#e6f4f7;
}

/* MAP */
#mapSurface{
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  bottom:var(--drawer-height);
  width:100%;
  overflow:hidden;
  }

#mapSurface canvas{
  touch-action:none;
}

/* DRAWER */
.drawer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  min-height:420px;
  background:#2F7FA3;
  padding:22px 16px 14px;
  border-radius:24px 24px 0 0;
  z-index:5000;
  text-align:center;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.drawerMessage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:72px;
}

#drawerTitle,
#skDrawerTitle{
  font-size:44px;
  font-weight:500;
  line-height:1.2;
  color:white;
  opacity:1;
  margin:0;
  text-align:center;
}

#drawerSubtitle
#skdrawerSubtitle{
font-size:22px;
  line-height:1.25;
  margin-top:6px;
  color:white;
  text-align:center;
}

.drawerSlots{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:100%;
  align-items:stretch;
}

.drawerSlot{
  background:white;
  color:black;
  padding:22px 16px 18px;
  border-radius:18px;
  text-align:center;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:250px;
}
  #beginnerDrawer .drawerSlots{grid-template-columns: 1fr;}
.drawer.mode-single .drawerSlots{grid-template-columns:1fr;}
  


.streetLabel{
  font-size:18px;
  opacity:0.5;
  margin-bottom:8px;
}

.streetName{
  font-size:54px;
  font-weight:800;
  line-height:1.1;
  margin:14px 0 20px;
  white-space:pre-line;
}

.slotActions{
  margin-top:auto;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.streetBtn{
  min-width:150px;
  min-height:58px;
  padding:14px 24px;
  font-size:20px;
  border:none;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.claimBtn{
  background:linear-gradient(145deg, #1F6F8B, #124A58);
  color:white;

  min-width:280px;
  min-height:84px;
  padding:22px 40px;
  font-size:36px;
  font-weight:800;

  border:none;
  border-radius:22px;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition:all 0.15s ease;
}

.claimBtn:active{
  transform:scale(0.97);
  box-shadow:
    0 3px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(0,0,0,0.25);
}

.coverBtn{
 background:linear-gradient(145deg, #1F6F8B, #124A58);
  color:white;

  min-width:280px;
  min-height:84px;
  padding:22px 40px;
  font-size:36px;
  font-weight:800;

  border:none;
  border-radius:22px;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition:all 0.15s ease;
}

.coverBtn:active{
  transform:scale(0.97);
  box-shadow:
    0 3px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(0,0,0,0.25);
}

.coverBtn.covered{
  background:#3FD0E3; /* teal */
  color:white;
  opacity:1;
  pointer-events:none;
}

#secondStreetPrompt{
position:absolute;
top:400px;
left:0;
width:100%;
z-index:6000;

display:flex;
justify-content:center;

background:transparent;
pointer-events:none;
}

#secondStreetPrompt.hidden{
  display:none;
}

.promptCard{
  background:#ffffff;
  color:#222;
  padding:36px 28px;
  border-radius:20px;

  width:92%;
  max-width:480px;

  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);

  pointer-events:auto;
}

.promptTitle{
  font-size:56px;
  font-weight:800;
  margin-bottom:22px;
  line-height:1.25;
  
}

.promptActions{
  display:flex;
  gap:16px;
  justify-content:center;
}

.promptActions button{
  padding:16px 26px;
  font-size:20px;
  border:none;
  border-radius:14px;
  cursor:pointer;
}

#secondStreetYesBtn{
  background:#6A4FBF;
  color:white;
}

#secondStreetNoBtn{
  background:#ddd;
}

#secondStreetNote{
  font-size:28px;
  line-height:1.3;
  margin-top:16px;
  font-weight:600;
}

/* SINGLE-SLOT MODE */
.drawer.mode-single .drawerSlots{
  grid-template-columns:1fr;
}

.drawer.mode-single #slot2{
  display:none;
}

/* FIRST-TIME STATE */
.drawer.state-first .coverBtn{
  display:none;
}

/* CLAIMED / RETURNING STATE */
.drawer.state-claimed .claimBtn{
  display:none;
}

/* COVERED STATE */
.drawer.state-covered .claimBtn{
  display:none;
}



/* MAP CONTROLS */
.maplibregl-ctrl-group{
  border-radius:14px !important;
  overflow:hidden;
}

.maplibregl-ctrl-group button{
  width:70px !important;
  height:70px !important;
  font-size:22px;
}

.maplibregl-ctrl-icon{
  font-size:28px !important;
}

.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out{
  background-size:40px 40px !important;
}

.drawer.has-subtitle #drawerTitle,
.drawer.has-subtitle #skDrawerTitle{
  font-size:40px;
}

.drawer.has-subtitle #drawerSubtitle,
.drawer.has-subtitle #skDrawerSubtitle{
  font-size:30px;
  line-height:1.3;
  margin-top:10px;
  font-weight:600;
}

#mapLegend{
  position:absolute;
  top:150px;  
  right:18px; 
  z-index:5500;

  background:rgba(255,255,255,0.35);
  border-radius:18px;
  padding:20px 22px;

  display:flex;
  flex-direction:column;
  gap:16px;
  
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}

.legendItem{
  display:flex;
  align-items:center;
  gap:6px;
}

.legendColor{
  width:28px;
  height:28px;
  border-radius:6px;
}

.legendColor.available{
  background:#FFFF00;
}

.legendColor.claimed{
  background:#FF5CCF;
}

.legendColor.covered{
  background:#5FE3F5;
}

.legendText{
  color:white;
  font-size:22px;
  font-weight:700;
}



#beginBtn{
  position:relative;
  margin-top:14px;
  margin-bottom:20px;
  transform:none;
  z-index:5;
}


.myStreetSection{
  background:#ffffff;
  border-radius:16px;
  padding:18px 16px;
  margin:18px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}


/* ==================================================
LEGACY / EARLIER CARD FOUNDATION STYLES
(Some selectors overridden later below)
(myStreetName)
================================================== */

.myStreetName{
  font-size:20px;
  font-weight:600;
  color:#222;
  margin:8px 0;
}

.myStreetStatus{
  font-size:14px;
  color:#666;
  margin-bottom:12px;
}

.myStreetActions{
  display:flex;
  gap:10px;
  justify-content:center;
}

.hamburgerBtn{
  position:fixed;
  top:14px;
  left:14px;
  z-index:9999;

  width:84px;
  height:84px;
  border-radius:20px;
  
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:44px;
  font-weight:700;
  color:#ffffff;

  background:linear-gradient(145deg, #1F6F8B, #124A58);
  box-shadow:0 6px 18px rgba(0,0,0,0.30);
  cursor:pointer;
}

.hamburgerOverlay{
  position:fixed;
  inset:0;
  z-index:9500;

  background:rgba(0,0,0,0.35);

  display:flex;
  align-items:flex-start;
  justify-content:flex-start;

  padding:18px 0 80px 0;
  box-sizing:border-box;
}

.hamburgerMenu{
  width:94vw;
  max-width:720px;
  height:88vh;

  background:rgba(47,127,163,0.95);
  backdrop-filter:blur(10px);

  border-radius:0 28px 28px 0;

  padding:40px 28px 36px 28px;
  box-sizing:border-box;

  box-shadow:
    14px 0 50px rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.15);

  display:flex;
  flex-direction:column;

  gap:22px;

  overflow-y:auto;
}

.hamburgerMenu h2{
  margin:26px 0 24px 0;

  color:#ffffff;

  font-family:"Cinzel", serif;
  font-size:56px;
  font-weight:600;
  letter-spacing:0.1em;

  text-align:center;
}

.closeHamburgerBtn{
  align-self:flex-end;

  width:44px;
  height:44px;

  border:none;
  border-radius:12px;

  cursor:pointer;

  font-size:24px;
  font-weight:700;

  color:#124A58;

  background:#ffffff;

  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.hamburgerPageBtn{
  width:100%;

  border:none;
  border-radius:22px;

  padding:28px 24px;

  cursor:pointer;

  text-align:left;

  font-family:"Cinzel", serif;
  font-size:32px;
  font-weight:600;
  letter-spacing:0.05em;

  color:#ffffff;

  background:rgba(0,0,0,0.18);

  transition:all 0.2s ease;
}

.hamburgerPageBtn:active{
  transform:scale(0.97);
  background:rgba(0,0,0,0.28);
}

#mapHelpPanel,
#myStreetPanel,
#hamburgerPagePanel,
#inviteStreetkeeperPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;

  background:linear-gradient(180deg, #071a22 0%, #14566d 52%, #238fa3 100%);
  padding:88px 22px 42px 22px;
}

.helpContainer{
  width:100%;
  max-width:760px;
  margin:0 auto;
}


#mapHelpPanel h2,
#myStreetPanel h2{
  margin:0 0 24px 0;
  color:#ffffff;
  font-size:46px;
  line-height:1.12;
  text-align:center;
}

#mapHelpPanel p{
  color:#ffffff;
  font-size:34px;
  line-height:1.46;
  margin:0 0 30px 0;
}

#mapHelpPanel h3{
  color:#ffffff;
  font-size:42px;
  line-height:1.18;
  margin:38px 0 16px 0;
  font-weight:800;
}

#mapHelpPanel strong{
  font-weight:800;
}

#mapHelpPanel .magentaText{
  color:#FF5CCF;
  font-weight:800;
}

#mapHelpPanel .tealText{
  color:#5FE3F5;
  font-weight:800;
}
#mapHelpPanel .yellowText{
  color:#F2D35A;
  font-weight:800;
}

#mapHelpPanel .offWhiteText{
  color:#BFD6DC;
  font-weight:800;

}
#myStreetPanel h2{
  margin:28px 0 22px 0;
  color:#ffffff;

  font-family:"Cinzel", serif;
  font-size:46px;
  font-weight:600;
  letter-spacing:0.06em;

  text-align:center;
}

.myStreetSection{
  background:#ffffff;
  border-radius:16px;
  padding:18px 16px;
  margin:28px 0 12px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.10);
}

.findSection{
  margin-top:48px;
}

.centeredSection h3{
  text-align:center;
}

#findNearbyBtn{
  display:block;
  margin:0 auto;
}


/* ==================================================
myStreetName — CURRENT ACTIVE CARD SYSTEM
================================================== */

.myStreetName{
  font-size:28px;
  font-weight:600;
  color:#222222;
  margin:8px 0;
  text-align:center;
}

.myStreetStatus{
  font-size:24px;
  color:#666666;
  margin-bottom:14px;
}

.myStreetActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.panelBackBtn{
  position:absolute;
  top:14px;
  right:14px;
  z-index:9500;

  width:84px;
  height:84px;
  border-radius:20px;
  
  display:flex;
  align-items:center;
  justify-content:center;
  
  background:linear-gradient(145deg,#1F6F8B, #124A58);
  box-shadow:0 6px 18px rgba(0,0,0,0.30);
  
  border:none;
  padding:0;

}


.backCircle{
  width:42px;
  height:42px;
  border:3px solid #ffffff;
  border-radius:50%;
  position:relative;
}

.backCircle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  border-left:2px solid #ffffff;
  border-bottom:2px solid #ffffff;
  transform:translate(-30%, -50%) rotate(45deg);
}

.infoPage{
  position:relative;
  min-height:100vh;
  padding:40px 20px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  color:#ffffff;
}

.infoContent{
  max-width:500px;
  width:100%;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.06);
  border-radius:16px;
  padding:25px 20px;
  line-height:1.6;
}

.infoContent h1{
  text-align:center;
  margin-bottom:20px;
  font-size:22px;
  letter-spacing:0.5px;
}

.section{
  margin-bottom:14px;
  font-size:15px;
  opacity:0.9;
}

.section strong{
  color:#3FD0E3;
  font-weight:600;
}

#cityPreparingNotice{
  margin-top:24px;
  padding:20px 22px;
  border-radius:16px;
  background:rgba(0,0,0,0.55);
  color:#ffffff;
  font-size:24px;
  line-height:1.5;
  text-align:center;
  backdrop-filter:blur(12px);
  
  
  width:70%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}



#claimedStreetToast{
  position:fixed;
  left:50%;
  top:34%;
  transform:translate(-50%, -50%);
  z-index:9000;

  width:92%;
  max-width:480px;

  background:#ffffff;
  color:#222;

  padding:36px 28px;
  border-radius:20px;

  text-align:center;

  box-shadow:0 10px 28px rgba(0,0,0,0.12);

  display:none;
}

#claimedStreetToast .toastTitle{
  font-size:42px;
  font-weight:800;
  margin-bottom:16px;
  line-height:1.25;
}

#claimedStreetToast .toastSubtitle{
  font-size:24px;
  font-weight:500;
}

.settingsSection{
  margin-top:24px;
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,0.92);
  color:#222;
  text-align:left;
}

.settingsSection h3{
  margin:0 0 10px;
  font-size:24px;
  font-weight:800;
}

.settingsSection p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.4;
}

.settingsPlaceholder{
  padding:16px;
  border-radius:14px;
  background:rgba(0,0,0,0.06);
  font-size:15px;
  font-weight:600;
}

#settingsPanel{
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: #ffffff;
}

/* GUIDANCE BUBBLE SYSTEM */
.guidanceBubble{
  position:fixed;
  left:41%;
  top:190px;
  transform:translateX(-50%);
  z-index:9200;
  width:82%;
  max-width:560px;
  pointer-events:none;
}

/* THIS COVERS THE RECTANGLE BORDER UNDER THE POINTER */
.guidanceBubblePointer{
  display:block;
  position:absolute;
  top:0;
  left:50px;
  width:122px;
  height:10px;
  background:#ffffff;
  z-index:9204;
}

.guidanceBubbleCard{
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;

  background:#ffffff;
  border:8px solid #2F7FA3;
  border-radius:34px;
  padding:34px 30px;
  box-sizing:border-box;

  box-shadow:0 12px 32px rgba(0,0,0,0.20);
  color:#071b2d;
  text-align:left;

  z-index:9201;
}

/* LONG SPEECH-BUBBLE POINTER — OUTER DRAWER COLOR */
.guidanceBubbleCard::before{
  content:"";
  position:absolute;
  top:-118px;
  left:-62px;
  width:292px;
  height:118px;
  background:#2F7FA3;
  clip-path:polygon(0 0, 100% 100%, 32% 100%);
  z-index:-2;
}

/* LONG SPEECH-BUBBLE POINTER — INNER WHITE */
.guidanceBubbleCard::after{
  content:"";
  position:absolute;
  top:-100px;
  left:-50px;
  width:262px;
  height:104px;
  background:#ffffff;
  clip-path:polygon(0 0, 100% 100%, 32% 100%);
  z-index:-1;
}

.guidanceBubbleIcon{
  display:block;
  flex:0 0 auto;
  font-size:58px;
  line-height:1;
  margin:0;
  color:#2F7FA3;
}

.guidanceBubbleTextWrap{
  position:relative;
  z-index:3;
}

.guidanceBubbleTitle{
  font-size:42px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:12px;
  color:#2F7FA3;
}

.guidanceBubbleBody{
  font-size:30px;
  line-height:1.25;
  font-weight:600;
  color:#071b2d;
}

.guidanceBubbleEmphasis{
  margin-top:18px;
  font-size:28px;
  line-height:1.2;
  font-weight:800;
  color:#2F7FA3;
}

/* REFRESH BUBBLE */

.refreshBubble{
  position:fixed;
  top:150px;
  left:50%;
  transform:translateX(-50%);
  z-index:9300;
  width:82%;
  max-width:560px;
  pointer-events:none;
}

.refreshBubble.hidden{
  display:none;
}

.refreshBubbleCard{
  position:relative;
  background:#ffffff;
  color:#071b2d;
  border:8px solid #2F7FA3;
  border-radius:34px;
  padding:52px 34px 38px;
  box-sizing:border-box;
  text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,0.20);
}

/* CENTER PEAK SHAPE */
.refreshBubbleCard::before{
  content:"";
  position:absolute;
  top:-96px;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:100px;
  background:#2F7FA3;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:1;
}

.refreshBubbleCard::after{
  content:"";
  position:absolute;
  top:-78px;
  left:50%;
  transform:translateX(-50%);
  width:118px;
  height:82px;
  background:#ffffff;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:2;
}

.refreshBubblePointer{
  display:none;
}

/* ARROWS ABOVE PEAK */
.refreshArrowStack{
  position:absolute;
  top:-148px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

.refreshArrow{
  font-size:42px;
  line-height:28px;
  font-weight:800;
  color:#2F7FA3;
  opacity:0;
  animation:refreshArrowFade 1.2s infinite;
}

.arrowFade1{ animation-delay:0s; }
.arrowFade2{ animation-delay:0.2s; opacity:0.55; }
.arrowFade3{ animation-delay:0.4s; opacity:0.25; }

@keyframes refreshArrowFade{
  0%{ opacity:0.15; transform:translateY(8px); }
  50%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0.15; transform:translateY(-8px); }
}

.refreshIcon{
  font-size:86px;
  line-height:1;
  margin:6px 0 22px;
  color:#2F7FA3;
}

.refreshTitle{
  font-size:42px;
  line-height:1.15;
  font-weight:800;
  margin-bottom:18px;
  color:#071b2d;
}

.refreshBody{
  font-size:30px;
  line-height:1.25;
  font-weight:600;
  color:#071b2d;
}

/* GEOLOCATOR PROMPT */

.geoPrompt{
  position:fixed;
  left:50%;
  top:200px;
  transform:translateX(-50%);
  z-index:9400;
  width:82%;
  max-width:560px;
  pointer-events:auto;
}

.geoPrompt.hidden{
  display:none;
}

.geoPromptCard{
  background:#ffffff;
  border:8px solid #2F7FA3;
  border-radius:34px;
  padding:34px 30px;
  box-sizing:border-box;
  box-shadow:0 12px 32px rgba(0,0,0,0.20);
  text-align:left;
}

.geoPromptTitle{
  text-align:center;
  font-size:42px;
  font-weight:800;
  color:#2F7FA3;
  margin-bottom:14px;
}

.geoPromptBody{
  font-size:30px;
  font-weight:600;
  color:#071b2d;
  line-height:1.25;
  margin-bottom:26px;
}

.geoPromptActions{
  display:flex;
  gap:16px;
}

.geoPromptActions button{
  flex:1;
  font-size:26px;
  font-weight:700;
  padding:16px 12px;
  border-radius:18px;
  border:none;
}

/* Primary button */
#geoUseLocationBtn{
  background:#2F7FA3;
  color:#ffffff;
}

/* Secondary button */
#geoNotNowBtn{
  background:#e5eef4;
  color:#071b2d;
}

/* INSTALL APP ICON */

.installPromptWrap{
  width:100%;

  margin-top:42px;
  margin-bottom:82px;

  display:grid;
  grid-template-columns:250px 1fr;
  align-items:center;

  column-gap:105px;

  padding-left:50px;
  padding-right:26px;

  box-sizing:border-box;
}

.installPromptIcon{
  width:250px;
  max-width:none;
  height:auto;

  justify-self:start;

  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,0.34));
}

.installPromptText{
  font-family:"Cinzel", Georgia, serif;

  font-size:36px;
  line-height:1.35;
  font-weight:600;

  color:#FFFFFF;

  text-align:left;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.38);
}

/* STREETKEEPER OPENING */

.streetkeeperOpening{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  overflow:hidden;
  z-index:2000;

  background-image:url("https://assets.codepen.io/16711308/daniyar-orazov-W7tQ4qu_G1M-unsplash.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.streetkeeperContent{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:0px 22px 42px;
  box-sizing:border-box;
  text-align:center;
}

.streetkeeperOverlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
 radial-gradient(
  ellipse 220% 46% at 50% 14%,
  rgba(255,246,200,0.96) 0%,
  rgba(255,255,255,0.96) 7%,
  rgba(245,250,255,0.82) 16%,
  rgba(180,220,255,0.34) 34%,
  rgba(100,170,235,0.12) 44%,
  rgba(31,60,115,0.03) 52%,
  rgba(0,0,0,0) 60%
),
  linear-gradient(
    180deg,
    rgba(31,60,115,0.04) 0%,
    rgba(31,60,115,0.04) 45%,
    rgba(0,0,0,0.50) 100%
  );
}
.streetkeeperLogo{
  width:720px;
  max-width:120vw;
  height:auto;
  

  margin-top:-20px;

  position:relative;
  z-index:2;
  transform:translateY(-45px);

  filter:
  drop-shadow(0 0 14px rgba(255,255,255,0.9))
  drop-shadow(0 0 34px rgba(220,240,255,0.55));
}

.streetkeeperWeeklyMessage{
  margin-top:90px;

  width:100%;
  max-width:620px;
  min-height:250px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 26px;
  box-sizing:border-box;

  background:transparent;
  border:none;

  font-family:"Cinzel",Georgia,serif;
  font-size:clamp(34px, 8vw, 54px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:0.02em;

  color:#ffffff;
  text-align:center;

  text-shadow:
    0 4px 14px rgba(0,0,0,0.78),
    0 0 26px rgba(31,60,115,0.60);
  
}

.prayerOpeningTitle{
  margin-top:-18px;
  transform:translateY(-215px);

  font-family: "Cinzel", serif;
  font-size: clamp(52px, 13.5vw, 96px);
  font-weight: 500;
  letter-spacing: 0.04em;

  color: #0f2a4d;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.25);
}

.prayerOpeningSubtitle{
  margin-top: 16px;
  transform:translateY(-205px);

  font-family: "Georgia", serif;
  font-size: clamp(26px, 7vw, 40px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.5px;

  color: #ffffff;

  text-shadow: 
    0 2px 6px rgba(0,0,0,0.45), 
 0 0 8px rgba(255,255,255,0.25);
}

.prayerOpeningSubtitle .dash{
  color:rgba(255,255,255,0.7);
  padding:0 8px;
}

/* ==================================================
   STREETKEEPER IMPACT TRANSITION
   ================================================== */

#transitionScreen.impactActive .transitionImageScreen{
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.08) 42%,
      rgba(0,0,0,0.48) 100%
    ),
    url("streetkeeper_impact_transition.png");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.streetkeeperImpactTransition{
  position:absolute;

  right:6%;
  top:11%;

  width:54%;
  max-width:520px;

  z-index:99999;

  font-family:"Georgia", "Cinzel", serif;
  font-size:clamp(30px, 7vw, 52px);
  line-height:1.30;
  font-weight:400;
  letter-spacing:0.015em;

  color:#E6D39A;
  text-align:right;

  text-shadow:
    0 2x 5px rgba(0,0,0,0.55),
    
  background:rgba(0,0,0,0.22);
  padding:18px 18px 20px;
  border-radius:18px;
    
}

.streetkeeperImpactTransition p{
  margin:0 0 22px;
}

.streetkeeperImpactTransition p:last-child{
  margin-bottom:0;
}

#impactCityState{
  white-space:nowrap;
}


/* BEGINNER OPENING */

.beginnerOpening{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  overflow:hidden;
  z-index:2000;

  background-image:url("https://assets.codepen.io/16711308/daniyar-orazov-W7tQ4qu_G1M-unsplash.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.beginnerContent{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:0px 22px 42px;
  box-sizing:border-box;
  text-align:center;
}

.beginnerOverlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
 radial-gradient(
  ellipse 220% 46% at 50% 14%,
  rgba(255,246,200,0.96) 0%,
  rgba(255,255,255,0.96) 7%,
  rgba(245,250,255,0.82) 16%,
  rgba(180,220,255,0.34) 34%,
  rgba(100,170,235,0.12) 44%,
  rgba(31,60,115,0.03) 52%,
  rgba(0,0,0,0) 60%
),
  linear-gradient(
    180deg,
    rgba(31,60,115,0.04) 0%,
    rgba(31,60,115,0.04) 45%,
    rgba(0,0,0,0.50) 100%
  );
}

.beginnerLogo{
  width:720px;
  max-width:120vw;
  height:auto;

  margin-top:-20px;

  position:relative;
  z-index:2;
  transform:translateY(-20px);

  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.9))
    drop-shadow(0 0 34px rgba(220,240,255,0.55));
}



.prayerOpeningTitle{
  margin-top:-18px;
  transform:translateY(-160px);

  font-family:"Cinzel", serif;
  font-size:clamp(52px, 13.5vw, 96px);
  font-weight:500;
  letter-spacing:0.04em;

  color:#0f2a4d;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.25);
}

.prayerOpeningSubtitle{
  margin-top:16px;
  transform:translateY(-150px);

  font-family:"Georgia", serif;
  font-size:clamp(26px, 7vw, 40px);
  font-style:italic;
  font-weight:500;
  letter-spacing:0.5px;

  color:#ffffff;

  text-shadow: 
    0 2px 6px rgba(0,0,0,0.45), 
    0 0 8px rgba(255,255,255,0.25);
}

.prayerOpeningSubtitle .dash{
  color:rgba(255,255,255,0.7);
  padding:0 8px;
}

.beginnerMessage{
  position:absolute;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);

  width:90%;
  max-width:600px;

  font-family:"Cinzel", Georgia, serif;
  font-size:clamp(28px, 4.5vw, 42px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:0.02em;

  color:#ffffff;
  text-align:center;

  text-shadow:
    0 4px 14px rgba(0,0,0,0.78),
    0 0 26px rgba(31,60,115,0.60);
}

.guestExpiredMessage{
  width:86%;
  max-width:760px;

  margin-top:clamp(58px, 8vh, 96px);
  margin-left:auto;
  margin-right:auto;

  font-family:"Georgia", "Cinzel", serif;

  font-size:clamp(24px, 5.8vw, 34px);

  line-height:1.5;

  font-weight:500;

  letter-spacing:0.01em;

  color:#ffffff;

  text-align:center;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.82),
    0 0 22px rgba(31,60,115,0.48);
}

.guestExpiredMessage p{
  margin:0 0 26px;
}

.guestExpiredMessage p:last-child{
  margin-bottom:0;
}

.guestExpiredMessage em{
  font-style:italic;
}

#accessCodeInput,
#stateSelect,
#citySelect,
#beginBtn{
  display:block;
  width:82%;
  max-width:700px;
  height:100px;
  margin-left:auto;
  margin-right:auto;

  border:3px solid rgba(255,255,255,0.72);
  border-radius:22px;

  background-color:rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  color:#ffffff;
  font-size:32px;
  font-family:Arial, sans-serif;

  box-shadow:
    0 8px 30px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}

#accessCodeInput{
  margin-top:clamp(120px, 16vh, 180px);
  padding-left:86px;
}

#stateSelect{
  margin-top:22px;
  padding-left:86px;
}

#citySelect{
  margin-top:22px;
  padding-left:86px;
}

#beginBtn{
  margin-top:22px;
  padding:0;
  font-size:34px;
  background-color:rgba(23,90,108,0.35);
}

#accessCodeInput,
#stateSelect,
#citySelect{
  appearance:none;
  -webkit-appearance:none;
  background-repeat:no-repeat;
  background-position:24px center, calc(100% - 24px) center;
  background-size:30px 30px, 22px 22px;
}

#stateSelect option,
#citySelect option{
  color:#0B2239;
  background:#ffffff;
}

#accessCodeInput{
  box-sizing:border-box;
  width:82%;
  max-width:700px;
  height:100px;

  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
}

#accessCodeInput::placeholder{
  color:#ffffff;
  opacity:1;
}

#accessCodeInput{
  padding-left:86px;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='15.5' r='1.2' fill='white'/%3E%3C/svg%3E");
}
#stateSelect{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s7-6.1 7-12A7 7 0 0 0 5 9c0 5.9 7 12 7 12z' fill='none' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='9' r='2.5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

#citySelect{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 21V9h5v12M9 21V4h7v17M16 21v-8h4v8' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M6 12h1M6 15h1M11 7h1M11 10h1M18 16h1' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

/* ===== TRANSITION IMAGE SCREEN ===== */

.transitionImageScreen{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  background-image:url("https://assets.codepen.io/16711308/Real+Pet+%282%29.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.reminderControls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:0px;
}

/* Top row: checkbox + label */
.reminderToggle{
  font-size:28px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:6px;
  color:#222222;
}

/* Make checkbox bigger */
.reminderControls input[type="checkbox"]{
  transform:scale(2);
}

/* Dropdown row */
.reminderOptions{
  display:flex;
  justify-content:center;
  gap:100px;
  width:100%;
}

/* Labels above dropdowns */
.reminderOptions label{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:18px;
  font-weight:600;
  gap:6px;
}

/* Bigger dropdowns */
#weeklyReminderDay,
#weeklyReminderWindow{
  font-size:26px;
  padding:18px 22px;
  border-radius:14px;
  min-width:160px;

  /* MATCH BUTTON STYLE EXACTLY */
  background:linear-gradient(145deg, #1F6F8B, #124A58);
  color:#ffffff;
  border:none;
}

.reminderSection{
  margin-bottom:8px;
}

.reminderNote{
  margin-top:14px;
  font-size:24px;
  line-height:2;
  text-align:center;
  color:#555555;
}

#privacyPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

/* PRIVACY PANEL CONTENT */
#privacyPanel .helpContainer{
  max-width:none;
  width:92%;
  margin:0 auto;
  padding:110px 16px 80px 16px;
  box-sizing:border-box;/* matches your other pages */
}

/* TITLE */
#privacyPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
  letter-spacing:0.04em;
}

/* SECTION HEADERS */
#privacyPanel h3{
  font-size:26px;
  margin-top:28px;
  margin-bottom:10px;
  font-weight:600;
}

/* BODY TEXT */
#privacyPanel p{
  font-size:26px;
  line-height:1.45;
  margin-bottom:14px;
}

/* OPTIONAL: tighten spacing for last section */
#privacyPanel p:last-child{
  margin-bottom:0;
}

#termsPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#termsPanel .helpContainer{
  max-width:none;
  width:92%;  
  margin:0 auto;
  padding:110px 16px 80px 16px;
  box-sizing:border-box;
}

#termsPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
  letter-spacing:0.04em;
}

#termsPanel h3{
  font-size:26px;
  margin-top:28px;
  margin-bottom:10px;
  font-weight:600;
}

#termsPanel p{
  font-size:26px;
  line-height:1.45;
  margin-bottom:14px;
}

#safetyPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#safetyPanel .helpContainer{
  max-width:none;
  width:92%;
  margin:0 auto;
  padding:110px 16px 80px 16px;
  box-sizing:border-box;
}

#safetyPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
}

#safetyPanel h3{
  font-size:26px;
  margin-top:28px;
  margin-bottom:10px;
}

#safetyPanel p{
  font-size:26px;
  line-height:1.45;
  margin-bottom:14px;
}

#safetyPanel ul{
  font-size:23px;
  line-height:1.7;
  margin-left:20px;
}

#faqPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#faqPanel .helpContainer{
  max-width:none;
  width:92%;
  margin:0 auto;
  padding:110px 16px 80px 16p;
  box-sizing:border-box;
}

#faqPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
}

#faqPanel h3{
  font-size:26px;
  margin-top:28px;
  margin-bottom:10px;
}

#faqPanel p{
  font-size:26px;
  line-height:1.5;
  margin-bottom:14px;
}
#faqPanel a{
  color:#FFD76A;
  text-decoration:underline;
  font-weight:600;
}

.inviteStreetkeeperContainer{
  text-align:center;
}

.inviteStreetkeeperTitle{
  margin:0 0 18px 0;
  font-family:"Cinzel", Georgia, serif;
  font-size:42px;
  font-weight:600;
  letter-spacing:0.06em;
  color:#ffffff;
}

.inviteStreetkeeperSubtitle{
  max-width:720px;
  margin:0 auto 34px auto;
  font-family:Georgia, serif;
  font-size:25px;
  line-height:1.4;
  font-weight:800;
  color:#ffffff;
  white-space:nowrap;
}

.inviteCard{
  margin:0 auto 28px auto;
  padding:28px 24px;
  border-radius:22px;
  background:rgba(255,255,255,0.94);
  color:#124A58;
  box-shadow:0 10px 26px rgba(0,0,0,0.22);
}

.inviteCardIcon{
  width:60px;
  height:60px;
  margin:0 auto 14px auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1F6F8B;
  font-size:40px;
}

.inviteMapIcon{
  width:42px;
  height:42px;
}

.inviteCardTitle{
  margin:0 0 8px 0;
  font-family:"Cinzel", Georgia, serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:0.04em;
  color:#124A58;
  text-align:center;
}

.inviteCardSubtitle{
  margin:0 auto 22px auto;
  max-width:540px;
  font-family:Georgia, serif;
  font-size:20px;
  line-height:1.42;
  font-weight:700;
  color:#245b66;
  text-align:center;
}

.inviteLocationRow{
  display:flex;
  gap:14px;
}

.inviteFieldGroup{
  flex:1;
  text-align:left;
}

.inviteFieldLabel{
  display:block;
  margin:0 0 7px 2px;
  font-family:Georgia, serif;
  font-size:16px;
  font-weight:700;
  color:#124A58;
}

.inviteInput{
  width:100%;
  min-height:60px;
  box-sizing:border-box;
  border:2px solid rgba(31,111,139,0.38);
  border-radius:16px;
  padding:0 16px;
  font-family:Georgia, serif;
  font-size:20px;
  font-weight:700;
  color:#124A58;
  background:#ffffff;
}

.inviteInput::placeholder{
  color:rgba(18,74,88,0.74);
}

.inviteCityResults{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:99999;
  max-height:320px;
  overflow-y:auto;
  margin-top:8px;
  background:#ffffff;
  border:2px solid rgba(31,111,139,0.18);
  border-radius:22px;
  box-shadow:0 18px 44px rgba(0,0,0,0.22);
}

.inviteCityResult{
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  font-family:Georgia, serif;
  font-size:17px;
  font-weight:700;
  color:#124A58;
  background:#ffffff;
}

.inviteCityResult:last-child{
  border-bottom:none;
}

.inviteCityResult:active{
  background:rgba(31,111,139,0.10);
}

.inviteNameRow{
  display:flex;
  gap:10px;
  margin-top:14px;
  margin-bottom:12px;
}

.inviteHalfInput{
  flex:1;
}
.inviteEmailInput{
  margin-top:2px;
}

.sendInvitationBtn{
  width:100%;
  max-width:620px;
  min-height:64px;
  margin:4px auto 0 auto;
  border:none;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Cinzel", Georgia, serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:0.05em;
  color:#ffffff;
  background:linear-gradient(145deg,#2f9fb1,#1F7F94);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
}

.sendInvitationBtn:active{
  transform:scale(0.97);
}

.inviteGuidanceMessage{
  max-width:640px;
  margin:16px auto 0 auto;
  padding:0 12px;
  font-family:Georgia, serif;
  font-size:20px;
  line-height:1.5;
  font-weight:500;
  color:rgba(255,255,255,0.92);
  text-align:center;
}

@media(max-width:520px){
  .inviteStreetkeeperTitle{
    font-size:34px;
  }

  .inviteStreetkeeperSubtitle{
    font-size:19px;
  }

  .inviteLocationRow{
    flex-direction:column;
  }

  .inviteCardTitle{
    font-size:22px;
  }
}

#contactPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#contactPanel .helpContainer{
  max-width:680px;
  margin:0 auto;
  padding:110px 24px 80px 24px;
}

#contactPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
}

#contactPanel p{
  font-size:23px;
  line-height:1.7;
  margin-bottom:24px;
}

#supportSuccessMessage{
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;

  background:rgba(255,255,255,0.15);
  color:#ffffff;

  font-size:24px;
  text-align:center;
}

#supportForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#supportForm label{
  font-size:20px;
  font-weight:700;
}

#supportForm input,
#supportForm select,
#supportForm textarea{
  font-size:20px;
  padding:14px 16px;
  border-radius:12px;
  border:none;
}

#supportForm textarea{
  resize:vertical;
}

#aboutPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#aboutPanel .helpContainer{
  max-width:680px;
  margin:0 auto;
  padding:110px 24px 80px 24px;
}

#aboutPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
}

#aboutPanel h3{
  font-size:26px;
  margin-top:28px;
  margin-bottom:10px;
}

#aboutPanel p{
  font-size:23px;
  line-height:1.7;
  margin-bottom:16px;
}

/* ===== INTRO VIDEO SCREEN ===== */

.introVideoFrame{
  width:100vw;
  height:100vh;
  border:0;
  background:#000;
}

#videoLibraryPanel{
  position:fixed;
  inset:0;
  z-index:9100;
  overflow-y:auto;
  background:linear-gradient(to bottom,#002f3a,#1f8fa3);
  color:#ffffff;
}

#videoLibraryPanel .helpContainer{
  max-width:680px;
  margin:0 auto;
  padding:110px 24px 80px 24px;
}

#videoLibraryPanel h2{
  text-align:center;
  font-size:42px;
  font-weight:600;
  margin-bottom:30px;
}

.videoLibraryCard{
  background:rgba(255,255,255,0.12);
  border-radius:18px;
  padding:20px;
}

.videoLibraryCard h3{
  font-size:26px;
  margin-top:0;
  margin-bottom:18px;
}

.libraryVideo{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:14px;
  background:#000000;
}

#myAccountCard{
  margin-top: 100px;
  padding: 30px 18px;
}

#myAccountOptions{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#myAccountOptions.hidden{
  display: none;
}

#myAccountOptions label{
  font-size: 0.95rem;
  font-weight: 700;
  color: #333333;
  text-align: left;
}

#myAccountOptions input{
  width: calc(100% - 24px);
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  padding: 8px 10px;
  font-size: 1rem;
}

#submitEmailChangeBtn{
  width: 100%;
  margin-top: 10px;
}

.accountDeleteRow{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #333333;
}

.accountCircleBtn{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #1F6F8B;
  background: transparent;
}

.accountSectionDivider{
  margin: -80px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.dividerLine{
  flex: 1;
  max-width: 240px;
  height: 5px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(
  to right,
  rgba(255,255,255,0),
  rgba(255,255,255,0.95),
  rgba(255,255,255,0)
);
}

.dividerDot{
  width: 10px;
  height: 10px;
  color: white;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

.myAccountTitle{
  font-size:38px;
  font-weight:600;
  color:#222222;
  text-align:center;
  margin:0;
  padding-top:43px;
}