/* ==========================================================
POMP SECURE 2.1 — secure.yourpomp
CSS DROP-IN
Shares brand tokens with planning.yourpomp CSS.
Add planning-css.css BEFORE this file, or paste the
:root token block here if loading standalone.
========================================================== */

/* ----------------------------------------------------------
styling after carrd migration/ padding/ width 
---------------------------------------------------------- */
html {
  background: #f7f3ec;
}

body {
  margin: 0;
  padding: 40px 20px;
  background: #f7f3ec;
}

body > h2,
body > p,
body > form {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

form {
  width: 100%;
}

.form-section {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
BATMAN FONTS
(duplicate-safe — browsers dedupe identical @font-face)
---------------------------------------------------------- */

@font-face {
font-family: 'Batman Nerd';
src: url('https://cdn.jsdelivr.net/gh/DaniiGLopez/POMPPeaceofMindPlanning/Batman%20nerd.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Batman Soft';
src: url('https://cdn.jsdelivr.net/gh/DaniiGLopez/POMPPeaceofMindPlanning/Batman%20soft.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}

/* ----------------------------------------------------------
BRAND TOKENS
(mirrors planning-css.css — safe to include here for
standalone use; no conflict if already declared)
---------------------------------------------------------- */

:root {
--pomp-forest: #4C5C53;
--pomp-olive: #7C7D38;
--pomp-blue: #517383;
--pomp-tan: #C49A6C;
--pomp-brown: #8B5E3C;
--pomp-orange: #BE6039;
--pomp-dark: #2B1200;

--pomp-bg: #F6F2ED;
--pomp-surface: #FFFFFF;
--pomp-border: #DDD5C8;
--pomp-muted: #7a7264;

--font-heading: 'Batman Nerd', 'Segoe UI', Helvetica, Arial, sans-serif;
--font-body: 'Batman Soft', 'Segoe UI', Helvetica, Arial, sans-serif;

--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-card: 0 2px 12px rgba(43, 18, 0, 0.07);
--transition: 0.2s ease;
}

/* ----------------------------------------------------------
GLOBAL BASE
---------------------------------------------------------- */

body,
input,
button,
select,
textarea,
label,
.form-block {
font-family: var(--font-body);
color: var(--pomp-dark);
box-sizing: border-box;
}

h1, h2, h3, h4,
.submit-final {
font-family: var(--font-heading);
}

/* ----------------------------------------------------------
INTRO — SECURE VARIANT
Slightly more structured/authoritative than planning
---------------------------------------------------------- */

.pomp-intro--secure {
margin-bottom: 32px;
padding: 24px 24px 20px;
background: var(--pomp-surface);
border-radius: var(--radius-lg);
border-left: 5px solid var(--pomp-forest);
box-shadow: var(--shadow-card);
}

.pomp-intro__eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pomp-forest);
margin-bottom: 10px;
}

.pomp-intro__heading {
font-family: var(--font-heading);
font-size: 1.45rem;
color: var(--pomp-dark);
margin: 0 0 12px;
line-height: 1.25;
}

.pomp-intro__body {
font-size: 0.96rem;
color: var(--pomp-forest);
line-height: 1.65;
margin: 0 0 8px;
}

.pomp-intro__body--last {
margin-bottom: 0;
}

/* ----------------------------------------------------------
FORM SECTIONS
---------------------------------------------------------- */

.form-section {
margin-bottom: 28px;
padding: 24px;
background: var(--pomp-surface);
border-radius: var(--radius-md);
border: 1px solid var(--pomp-border);
box-shadow: var(--shadow-card);
}

.form-section__note {
margin: -6px 0 16px;
font-size: 0.9rem;
color: var(--pomp-muted);
font-style: italic;
line-height: 1.5;
}

.form-section__divider {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pomp-muted);
border-top: 1px solid var(--pomp-border);
padding-top: 14px;
margin: 20px 0 14px;
}

.form-section__divider span {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--pomp-muted);
opacity: 0.75;
}

/* ----------------------------------------------------------
SECTION HEADINGS
---------------------------------------------------------- */

h4 {
margin: 0 0 16px;
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--pomp-forest);
font-weight: 700;
border-left: 5px solid var(--pomp-orange);
padding-left: 12px;
line-height: 1.3;
}

/* ----------------------------------------------------------
FORM BLOCKS & LABELS
---------------------------------------------------------- */

.form-block {
margin-bottom: 16px;
}

.form-block--half {
max-width: 50%;
}

label {
display: block;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
color: var(--pomp-forest);
margin-bottom: 6px;
}

/* ----------------------------------------------------------
FORM GRIDS
---------------------------------------------------------- */

.form-grid {
display: grid;
gap: 14px;
margin-bottom: 0;
}

.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.form-grid .form-block {
margin-bottom: 0;
}

@media (max-width: 640px) {
.form-grid--2,
.form-grid--3 { grid-template-columns: 1fr; }
.form-block--half { max-width: 100%; }
}

/* ----------------------------------------------------------
INPUTS, SELECTS, TEXTAREAS
---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
display: block;
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--pomp-border);
border-radius: var(--radius-sm);
background: #faf8f5;
font-family: var(--font-body);
font-size: 0.97rem;
color: var(--pomp-dark);
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--pomp-orange);
background: var(--pomp-surface);
box-shadow: 0 0 0 3px rgba(190, 96, 57, 0.1);
}

input::placeholder,
textarea::placeholder {
color: #b5a99a;
}

textarea {
min-height: 88px;
resize: vertical;
}

/* ----------------------------------------------------------
CONDITIONAL BLOCKS
---------------------------------------------------------- */

.conditional {
display: none;
}

/* ----------------------------------------------------------
KEY CONTACTS GRID
---------------------------------------------------------- */

#contacts-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
overflow-x: auto;
}

.contact-header,
.contact-row {
display: grid;
grid-template-columns: 1.2fr 1.1fr 1.1fr 1.4fr 1.8fr 1.8fr;
gap: 8px;
align-items: center;
min-width: 700px;
}

.contact-header {
padding: 10px 12px;
background: var(--pomp-forest);
color: #fff;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.contact-row {
background: #faf8f5;
border: 1px solid var(--pomp-border);
border-radius: var(--radius-sm);
padding: 8px;
}

.contact-row input {
padding: 9px 10px;
font-size: 0.92rem;
border-radius: 5px;
margin: 0;
}

/* Alternating row tint */
.contact-row:nth-child(even) {
background: #f4f0eb;
}

@media (max-width: 900px) {
.contact-header { display: none; }
.contact-row {
grid-template-columns: 1fr;
min-width: unset;
}
}

/* ----------------------------------------------------------
INSURANCE POLICY GRID
---------------------------------------------------------- */

#insurance-wrapper {
display: grid;
gap: 8px;
overflow-x: auto;
}

.policy-header,
.policy-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1.4fr 1.2fr 1fr 1fr 1fr 1.4fr;
gap: 8px;
align-items: center;
min-width: 900px;
}

.policy-header {
background: var(--pomp-forest);
color: #fff;
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 10px 12px;
border-radius: var(--radius-sm);
line-height: 1.3;
}

.policy-header small {
font-weight: 400;
font-size: 0.72rem;
opacity: 0.8;
text-transform: none;
letter-spacing: 0;
}

.policy-row {
background: #faf8f5;
padding: 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--pomp-border);
}

.policy-row:nth-child(even) {
background: #f4f0eb;
}

.policy-row input {
width: 100%;
margin: 0;
padding: 9px 10px;
font-size: 0.9rem;
}

@media (max-width: 900px) {
.policy-header { display: none; }
.policy-row {
grid-template-columns: 1fr;
min-width: unset;
}
}

/* ----------------------------------------------------------
SONG LIST GRID
---------------------------------------------------------- */

#songs-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}

.song-header,
.song-row {
display: grid;
grid-template-columns: 2fr 2fr 3fr;
gap: 10px;
align-items: center;
}

.song-header {
padding: 8px 12px;
background: var(--pomp-forest);
color: #fff;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.song-row {
background: #faf8f5;
border: 1px solid var(--pomp-border);
border-radius: var(--radius-sm);
padding: 6px 8px;
}

.song-row:nth-child(even) {
background: #f4f0eb;
}

.song-row input {
padding: 9px 10px;
font-size: 0.92rem;
margin: 0;
}

@media (max-width: 700px) {
.song-header { display: none; }
.song-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
ERROR DISPLAY
---------------------------------------------------------- */

.pomp-error {
margin: 16px 0;
padding: 12px 16px;
background: #fdecea;
border: 1.5px solid #e57373;
border-radius: var(--radius-sm);
color: #b00020;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
}

/* ----------------------------------------------------------
SAVE BUTTON (FLOATING)
Reuses .assist-button class from planning CSS.
Redeclared here for standalone use.
---------------------------------------------------------- */

.assist-button {
position: fixed;
bottom: 22px;
right: 22px;
background: var(--pomp-forest);
color: #fff;
padding: 14px 22px;
border-radius: 50px;
border: none;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 16px rgba(76, 92, 83, 0.3);
letter-spacing: 0.03em;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.assist-button:hover {
background: var(--pomp-dark);
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(43, 18, 0, 0.25);
}

.assist-button:active {
transform: scale(0.97);
box-shadow: none;
}

/* ----------------------------------------------------------
SUBMIT FINAL (if used on this page)
---------------------------------------------------------- */

.submit-final {
display: block;
width: 100%;
padding: 16px 20px;
margin-top: 28px;
background-color: var(--pomp-forest);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
text-align: center;
cursor: pointer;
letter-spacing: 0.03em;
transition: background var(--transition), transform var(--transition);
box-shadow: 0 4px 14px rgba(76, 92, 83, 0.25);
}

.submit-final:hover {
background-color: var(--pomp-dark);
transform: translateY(-2px);
}

.submit-final:active {
transform: translateY(0);
background-color: var(--pomp-brown);
}