/* ==========================================================
   AYSO Region 76 – Sportsmanship Cup Login Query (Final v5)
   Fix: Normalize <button> rendering across browsers
   ========================================================== */

:root {
  --r76-surface: #ffffff;
  --r76-text: #1f1f1f;
  --r76-subtle: #555;
  --r76-accent: #D69048;
  --r76-accent-hover: #ef832f;
  --r76-ring: rgba(214,144,72,0.45);
  --r76-shadow-lg: 0 20px 50px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12);
  --r76-radius: 14px;
  --r76-border: rgba(0,0,0,.14); /* slightly clearer gray */
}

/* --- H4-styled trigger link (arrow + text) --- */
.r76-trigger-heading { margin: 0 0 0.5em; }

.r76-trigger-heading .r76-login-query-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

.r76-trigger-heading .r76-login-query-trigger:hover {
  color: inherit;
  text-decoration: underline;
}

.r76-trigger-heading .r76-login-query-trigger .r76-arrow-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}

.r76-trigger-heading .r76-login-query-trigger:hover .r76-arrow-icon {
  opacity: 1;
}

/* --- Focus ring for accessibility --- */
.r76-trigger-heading .r76-login-query-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Screen reader utility --- */
.r76-sr {
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* --- Modal container --- */
.r76-login-modal[hidden]{display:none!important;}
.r76-login-modal{
  position:fixed;inset:0;z-index:9999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.r76-login-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;transition:opacity .25s ease;
}

.r76-login-dialog{
  position:relative;
  max-width:clamp(320px,92vw,640px);
  margin:min(8vh,80px) auto 0;
  background:var(--r76-surface);
  color:var(--r76-text);
  border:1px solid var(--r76-border);
  border-radius:var(--r76-radius);
  box-shadow:var(--r76-shadow-lg);
  transform:translateY(24px)scale(.98);
  opacity:0;
  transition:transform .28s ease,opacity .28s ease;
  overflow:hidden;
}

.r76-login-modal.open .r76-login-backdrop{opacity:1;}
.r76-login-modal.open .r76-login-dialog{transform:translateY(0)scale(1);opacity:1;}

/* --- Header --- */
.r76-login-header{
  padding:28px 28px 12px;
  text-align:center;
}
#r76LoginTitle{
  margin:0 0 8px;
  line-height:1.25;
  font-size:clamp(18px,2.3vw,26px);
}
#r76LoginDesc{
  margin:0;
  color:var(--r76-subtle);
  font-size:15px;
}

/* --- Buttons (normalized across browsers) --- */
.r76-login-actions {
  display: grid;
  gap: 14px;
  padding: 22px 28px 34px;
}

/* Reset ALL default browser button styles */
.r76-login-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  all: unset;                     /* strip native button chrome completely */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  cursor: pointer;

  /* reapply intended look */
  width: 100%;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid var(--r76-border);
  border-radius: 14px;
  background-clip: padding-box;
  color: var(--r76-text);
  padding: 18px 20px;
  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.r76-login-btn:hover {
  background: #fff;
  border-color: var(--r76-accent);
  box-shadow:
    0 0 0 3px var(--r76-ring),
    0 6px 12px rgba(214,144,72,0.25);
}

/* 1️⃣ Main line (“Yes” / “No”) */
.r76-login-btn .main {
  font-size: 24px;
  font-weight: 800;
  color: var(--r76-accent);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* 2️⃣ Second line (main subtext) */
.r76-login-btn .sub {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--r76-text);
  line-height: 1.35;
  margin-top: 3px;
}

/* 3️⃣ Third line (instructional helper text) */
.r76-login-btn .sub2 {
  font-size: 13px;
  color: var(--r76-subtle);
  line-height: 1.3;
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}

/* Decorative arrow marker before sub2 */
.r76-login-btn .sub2::before {
  content: "↳ ";
  color: var(--r76-accent);
  opacity: 0.6;
  font-style: normal;
}

/* Hover accent lift for main line */
.r76-login-btn:hover .main {
  color: var(--r76-accent-hover);
}

/* --- Close button --- */
.r76-login-close{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid var(--r76-border);
  background:#fff;
  color:var(--r76-subtle);
  font-size:22px;line-height:1;
  cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.r76-login-close:hover{
  background:#f6f6f6;
  border-color: var(--r76-accent);
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

@media(prefers-reduced-motion:reduce){
  .r76-login-backdrop,.r76-login-dialog,.r76-login-btn{transition:none!important;}
}