/*
=========================================================
FILE: forms.css
VERSION: 3.0
PURPOSE: Shared form layout and styling
NOTES:
- Universal width shell for all form pages
- Shared box-within-a-box structure
- Restores shared security code panel styling
=========================================================
*/

.jd_form_zone
{
max-width:920px;
margin:0 auto;
}

.jd_form_intro
{
max-width:760px;
margin:0 auto 1.55rem;
text-align:center;
}

.jd_form_intro h2
{
margin:0 0 0.8rem;
font-size:clamp(1.9rem, 4.6vw, 2.7rem);
line-height:1.08;
color:#FFF;
}

.jd_form_intro p
{
margin:0;
font-size:1.1rem;
line-height:1.72;
color:#FFF;
}

.jd_form_card
{
background:linear-gradient(180deg, #f9f9f9 0%, #f3f3f3 100%);
border:1px solid #c7d8e4;
border-radius:1.7rem;
padding:1.15rem;
box-shadow:0 18px 34px rgba(17,17,17,0.10);
}

.jd_form_section
{
background:#ffffff;
border:1px solid #dfe7ed;
border-radius:1.35rem;
padding:1.2rem;
margin-bottom:1rem;
box-shadow:0 8px 18px rgba(17,17,17,0.04);
}

.jd_form_section:last-child
{
margin-bottom:0;
}

.jd_form_section_header
{
margin-bottom:1rem;
padding-bottom:0.9rem;
border-bottom:1px solid rgba(17,17,17,0.06);
text-align:center;
}

.jd_form_section_kicker
{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:7rem;
padding:0.42rem 0.95rem;
margin:0 auto 0.75rem;
border-radius:999px;
background:#fff3bf;
border:1px solid #d8b84e;
color:#7a5d00;
font-size:0.82rem;
font-weight:700;
letter-spacing:0.03em;
text-transform:uppercase;
box-shadow:0 4px 10px rgba(17,17,17,0.06);
}

.jd_form_section_header h3
{
margin:0 0 0.45rem;
font-size:2rem;
line-height:1.14;
color:#111111;
text-align:center;
}

.jd_form_section_header p
{
max-width:42rem;
margin:0 auto;
font-size:1rem;
line-height:1.72;
color:#5b5b5b;
text-align:center;
}

.form_row
{
display:grid;
gap:1rem;
margin-bottom:1rem;
}

.form_row:last-child
{
margin-bottom:0;
}

.form_row_2
{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.form_row_3
{
grid-template-columns:repeat(3, minmax(0, 1fr));
}

.form_field
{
position:relative;
margin-bottom:0;
}

.form_input,
.form_textarea,
.form_select
{
display:block;
width:100%;
border:1px solid #d3d8dc;
border-radius:1rem;
background:#ffffff;
box-shadow:inset 0 1px 2px rgba(17,17,17,0.03);
font-size:1rem;
line-height:1.4;
color:#111111;
outline:none;
box-sizing:border-box;
transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.form_input,
.form_select
{
min-height:3.65rem;
padding:1.45rem 1rem 0.55rem 1rem;
}

.form_textarea
{
min-height:9rem;
padding:1.7rem 1rem 0.75rem 1rem;
resize:vertical;
}

.form_select
{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding-right:3rem;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 1rem center;
background-size:16px;
}

.form_input:focus,
.form_textarea:focus,
.form_select:focus
{
border-color:#7db8d3;
box-shadow:0 0 0 0.2rem rgba(125,184,211,0.18);
}

.floating_label
{
position:absolute;
top:50%;
left:0.95rem;
transform:translateY(-50%);
font-size:0.92rem;
line-height:1.2;
color:#707070;
background:transparent;
transition:all 0.18s ease;
pointer-events:none;
max-width:calc(100% - 1.9rem);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.floating_label_textarea
{
top:1.15rem;
transform:none;
}

.form_input:focus + .floating_label,
.form_input:not(:placeholder-shown) + .floating_label,
.form_textarea:focus + .floating_label,
.form_textarea:not(:placeholder-shown) + .floating_label,
.form_select:focus + .floating_label,
.form_field_select .floating_label
{
top:0.52rem;
transform:none;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.01em;
color:#2b6f8f;
}

/* =========================================================
   SECURITY PANEL
========================================================= */

.jd_security_panel
{
display:grid;
grid-template-columns:minmax(260px, 1fr) minmax(260px, 1fr);
gap:1rem;
align-items:stretch;
margin-top:0.35rem;
margin-bottom:1rem;
padding:0.35rem;
border-radius:1.25rem;
background:linear-gradient(180deg, #fff8de 0%, #fdf2c9 100%);
border:1px solid rgba(216,184,78,0.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}

.jd_security_panel_code
{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:1.1rem 1rem 0.95rem;
border-radius:1rem;
background:rgba(255,255,255,0.26);
border:1px solid rgba(216,184,78,0.18);
min-height:142px;
}

.jd_security_label
{
display:block;
margin:0 0 0.25rem;
font-size:1rem;
font-weight:700;
line-height:1.35;
color:#5c5c5c;
}

.jd_security_panel_code strong
{
display:block;
margin:0;
font-size:3.35rem;
line-height:1;
font-weight:800;
letter-spacing:0.06em;
color:#f2b300;
}

.jd_security_hint
{
display:block;
margin-top:0.5rem;
font-size:0.95rem;
line-height:1.45;
color:#666666;
}

.jd_security_panel_input
{
display:flex;
align-items:center;
justify-content:center;
padding:0.65rem;
border-radius:1rem;
background:rgba(255,255,255,0.18);
border:1px solid rgba(216,184,78,0.14);
min-height:142px;
}

.jd_security_panel_input .form_input
{
min-height:124px;
padding:0 1rem;
text-align:center;
font-size:4rem;
line-height:1;
font-weight:700;
letter-spacing:0.06em;
color:#5b5b5b;
border:1px solid #cfd4dc;
border-radius:1rem;
box-shadow:inset 0 1px 2px rgba(17,17,17,0.05);
}

.jd_security_panel_input .form_input::placeholder
{
color:#F4F4F4;
opacity:1;
font-weight:700;
}

.jd_security_panel_input .form_input:focus
{
border-color:#7db8d3;
box-shadow:0 0 0 0.22rem rgba(125,184,211,0.18);
}

.jd_terms_box
{
border-radius:1rem;
padding:1rem 1.1rem;
background:linear-gradient(180deg, #fffef8 0%, #fff7dc 100%);
border:1px solid rgba(210,184,70,0.14);
text-align:center;
}

.jd_checkbox_label
{
display:flex;
justify-content:center;
align-items:center;
gap:0.7rem;
line-height:1.68;
}

.jd_checkbox_label span
{
display:inline-block;
text-align:center;
max-width:44rem;
}

.jd_submit_area
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.8rem;
padding-top:0.35rem;
margin-top:1rem;
}

.jd_submit_button
{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:340px;
min-height:4rem;
padding:0 2rem;
font-size:1.16rem;
font-weight:700;
letter-spacing:0.01em;
text-align:center;
border-radius:999px;
border:2px solid #2b2b2b;
box-shadow:0 18px 34px rgba(17,17,17,0.18);
}

.jd_submit_button[disabled]
{
opacity:0.65;
cursor:not-allowed;
pointer-events:none;
}

.jd_submit_note
{
max-width:42rem;
font-size:0.88rem;
line-height:1.42;
text-align:center;
white-space:normal;
color:#555555;
}

@media (max-width: 767px)
{
.jd_form_card
{
padding:0.85rem;
border-radius:1.2rem;
}

.jd_form_section
{
padding:1rem;
border-radius:1.1rem;
}

.jd_form_section_header h3
{
font-size:1.7rem;
}

.form_row_2,
.form_row_3
{
grid-template-columns:1fr;
}

.jd_security_panel
{
grid-template-columns:1fr;
}

.jd_security_panel_code,
.jd_security_panel_input
{
min-height:auto;
}

.jd_security_panel_input .form_input
{
min-height:96px;
font-size:3rem;
}

.jd_submit_button
{
width:100%;
min-width:0;
}
}