/* layout.css — page-level tokens & shell */
:root{
  --c-primary : #5c0b15;
  --c-accent  : #2e69ff;
  --c-border  : #b8bdc9;
  --c-bg      : #fff;
  --c-text    : #2c3345;
  --radius    : 6px;
  --ff        : "Droid Sans","Inter",system-ui,sans-serif;
  --field-gap : 2rem;                /* column gap between half fields */
  --focus-glow : rgba(193, 209, 249, 0.521);   /* ultra-light blue */
  --error-glow : rgba(255, 208, 209, 0.607);    /* light red        */
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
  margin:0;padding:0;
  font:16px/1.45 var(--ff);
  background:var(--c-bg);color:var(--c-text);
  display:flex;flex-direction:column;align-items:center;
  padding-top:3.2rem;
}

/* request-form shell */
.request-form{
  width:100%;max-width:760px;
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:3rem 3.5rem;
  display:flex;flex-direction:column;gap:2rem;
}

#loading-overlay{
  position:fixed; inset:0; z-index:9998;
  display:none;                  /* toggled by JS */
  justify-content:center; align-items:center;
  backdrop-filter:blur(4px);
  background:rgba(255,255,255,.45);
}
.spinner{
  width:64px;height:64px;border-radius:50%;
  border:6px solid #bbb; border-top-color:var(--c-primary);
  animation: spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

h2{margin:0 0 .25rem;font-size:1.9rem;color:var(--c-primary);}
h2 .helper-text{
  display:block;
  margin-top:.35rem;
  font-size:.85rem;
  line-height:1.3;
  color:#57647e;
  font-weight:400;
}
@media(max-width:600px){.request-form{padding:1.5rem;}}
img{max-width:100%;height:auto;display:block;}

.site-logo{
  width:280px;
  display:block;
  margin:0 auto 2.5rem;
}


.leather-btn{
  /* layout / sizing */
  display:block;
  margin:0 auto;
  padding:0.6em 0.9em;      /* narrower than Jotform’s default */
  font:600 1rem/1.2 Inter, sans-serif;
  width:30%;
  cursor:pointer;
  /* palette & texture */
  color:#fff;
  text-shadow:0 2px 0 #000;
  border:2px dashed #fff;
  border-radius:12px;
  background:#4d4d4d url("../assets/leather.png") center/cover; /* point to /mnt/data/leather.png or wherever you host it */
  /* frame & depth */
  box-shadow:
    0 0 0   4px #262626,   /* outer ring */
    0 4px 0 4px #000,       /* bevel */
    0 6px 3px 4px rgba(0,0,0,.4); /* soft drop‑shadow */
  /* behaviour */
  transition:none;          /* makes hover “instant” */
  position:relative;        /* holds the tint (::after) */
}

/* white‑tint overlay that stays inside the border */
.leather-btn::after{
  content:"";
  position:absolute;
  inset:0;                  /* stretch edge‑to‑edge */
  border-radius:inherit;
  background:rgba(255,255,255,.18); /* subtle sheen */
  pointer-events:none;      /* keeps clicks on the button */
  opacity:0;                /* off by default */
}

/* hover / active state */
.leather-btn:hover,
.leather-btn:active{
  border-style:solid;                       /* dashed → solid */
}
.leather-btn:hover::after,
.leather-btn:active::after{
  opacity:1;                                /* show tint instantly */
}



/* ====Submission======= */
/* =====Completed===== */
/* =====Container===== */

/* === Page‑blur toggling =================================== */
body.modal‑open > *:not(#confirmation-overlay) {
  filter: blur(6px);
  pointer-events: none;         /* freeze underlying UI       */
  user-select: none;
}

/* === Overlay shell ======================================= */
#confirmation-overlay {
  position: fixed;
  inset: 0;
  display: none;                /* shown via JS               */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* translucent glass over the whole viewport */
#confirmation-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.4);   /* subtle milk‑glass tint */
}

/* === “new request” button ================================= */
#new-request-btn {
  margin-top: 24px;
  padding: 0.6rem 1.2rem;
  font: 600 0.95rem/1 Arial, sans-serif;
  border: none;
  border-radius: 4px;
  background: #eee; /* subtle grey background */
  color: #333;
  cursor: pointer;
  transition: background 120ms ease;
  align-self: center; /* center horizontally inside flex container */
}
#new-request-btn:hover  { background: #ddd; }
#new-request-btn:active { background: #ccc; }

.confirmation-container{
  position:relative;
  background:#fff;
  padding:24px 32px;
  border-radius:6px;
  max-width:420px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;   /* stack children vertically   */
  align-items:center;      /* horizontal centering        */
  text-align:center;       /* keep text centred           */
}

h1           { color:#333; margin:20px 0 10px; }
.case-number { color:#666; margin-bottom:16px; }

/* === Page‑blur toggling =================================== */
body.modal‑open > *:not(#error-overlay) {
  filter: blur(6px);
  pointer-events: none;         /* freeze underlying UI       */
  user-select: none;
}

/* === Overlay shell ======================================= */
#error-overlay {
  position: fixed;
  inset: 0;
  display: none;                /* shown via JS               */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* translucent glass over the whole viewport */
#error-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.4);   /* subtle milk‑glass tint */
}


/* === “new request” button ================================= */
#error-close-btn {
  margin-top: 24px;
  padding: 0.6rem 1.2rem;
  font: 600 0.95rem/1 Arial, sans-serif;
  border: none;
  border-radius: 4px;
  background: #eee; /* subtle grey background */
  color: #333;
  cursor: pointer;
  transition: background 120ms ease;
  align-self: center; /* center horizontally inside flex container */
}
#error-close-btn:hover  { background: #ddd; }
#error-close-btn:active { background: #ccc; }

.error-heading{
  font: 700 1.6rem/1.2 "Segoe UI", Roboto, sans-serif;
  color:#b00020;                /* a friendly red accent */
  margin-bottom:.5rem;
}
#errorMessage{
  font: 600 1rem/1.4 "Segoe UI", Roboto, sans-serif;
  text-align:center;
  margin-bottom:1.2rem;
  color:#333;
}

body.overlay-active > *:not(#confirmation-overlay):not(#error-overlay):not(#quote-overlay){
  display:none !important;         /* keeps form state in memory */
}

/* === Quote overlay ======================================= */
#quote-overlay{
  position:fixed;
  inset:0;
  display:none;                    /* toggled by JS             */
  justify-content:center;
  align-items:center;
  z-index:9999;
}

/* translucent milk-glass over the whole viewport */
#quote-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.4);
}

/* inner card */
.quote-container{
  position:relative;
  background:#fff;
  padding:24px 32px;
  border-radius:6px;
  max-width:600px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* === Quote-table styling =================================== */
.quote-table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font:15px/1.4 var(--ff);
}

.quote-table th,
.quote-table td{
  padding:.55rem .8rem;
  border:1px solid var(--c-border);
}

.quote-table thead th{
  background:var(--c-primary);
  color:#fff;
  font-weight:600;
  text-align:left;
}

.quote-table td.num{ text-align:right; }

.quote-table tfoot td{ font-weight:600; }

#quote-btn {
  margin-top:24px;
  padding:.6rem 1.2rem;
  font: 600 .95rem/1 Arial,sans-serif;
  border:none;border-radius:4px;
  background:#eee;color:#333;
  cursor:pointer;
  transition:background 120ms ease;
}
#quote-btn:hover {background:#ddd;}
#quote-btn:active{background:#ccc;}

/* grey button, same look as "new request" & error close */
#quote-close-btn{
  margin-top:24px;
  padding:.6rem 1.2rem;
  font: 600 .95rem/1 Arial,sans-serif;
  border:none;border-radius:4px;
  background:#eee;color:#333;
  cursor:pointer;
  transition:background 120ms ease;
}
#quote-close-btn:hover {background:#ddd;}
#quote-close-btn:active{background:#ccc;}

/* grey button, same look as "new request" & error close */
#quote-print-btn{
  margin-top:24px;
  padding:.6rem 1.2rem;
  font:600 .95rem/1 Arial,sans-serif;
  border:none;border-radius:4px;
  background:#eee;color:#333;
  cursor:pointer;
  transition:background 120ms ease;
}
#quote-print-btn:hover {background:#ddd;}
#quote-print-btn:active{background:#ccc;}

/* === page-blur toggle (re-use existing selector) ========= */
body.modal-open > *:not(#quote-overlay):not(#confirmation-overlay):not(#error-overlay){
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}