/*
=========================================================
FILE: /css/online_quote.css
VERSION: 5.0
PURPOSE:
- Online Quote page styling
- Shared form structure aligned more tightly to Request Free Pack
- Final visual tidy-up
=========================================================
*/

.jd_quote_page
{
padding:0;
background:#ffffff;
}

/* =========================================================
   BANDS
========================================================= */

.jd_quote_band
{
position:relative;
overflow:hidden;
padding:clamp(2.15rem, 3.8vw, 3.5rem) 0;
}

.jd_quote_band_intro
{
margin-top:-15px;
background:linear-gradient(180deg, #d7efff 0%, #c7e8ff 32%, #d9f1ff 62%, #edf8ff 100%);
box-shadow:0 18px 32px rgba(40, 96, 126, 0.16);
z-index:3;
}

.jd_quote_band_form
{
background:linear-gradient(180deg, #f2de7a 0%, #f7e79d 28%, #fff1bc 62%, #fff8de 100%);
border-top:1px solid rgba(210, 184, 70, 0.20);
border-bottom:1px solid rgba(210, 184, 70, 0.16);
position:relative;
z-index:2;
box-shadow:inset 0 18px 28px rgba(255,255,255,0.26);
}

.jd_quote_band_bottom
{
background:linear-gradient(180deg, #dff2e1 0%, #bfe3c3 100%);
padding-bottom:clamp(5rem, 8vw, 7rem);
}

.jd_quote_band::before,
.jd_quote_band::after
{
content:"";
position:absolute;
border-radius:50%;
pointer-events:none;
}

.jd_quote_band_intro::before
{
width:460px;
height:460px;
top:-180px;
right:-120px;
background:radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 72%);
}

.jd_quote_band_intro::after
{
width:360px;
height:360px;
bottom:-150px;
left:-90px;
background:radial-gradient(circle, rgba(186,230,255,0.52) 0%, rgba(186,230,255,0.15) 45%, rgba(186,230,255,0) 74%);
}

.jd_quote_band_form::before
{
width:320px;
height:320px;
top:-90px;
left:-110px;
background:radial-gradient(circle, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0) 74%);
}

.jd_quote_band_form::after
{
width:320px;
height:320px;
bottom:-120px;
right:-130px;
background:radial-gradient(circle, rgba(255,234,159,0.24) 0%, rgba(255,234,159,0.08) 44%, rgba(255,234,159,0) 74%);
}

.jd_quote_band_bottom::before
{
width:300px;
height:300px;
top:-120px;
right:-80px;
background:radial-gradient(circle, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 44%, rgba(255,255,255,0) 74%);
}

.jd_quote_band_bottom::after
{
width:340px;
height:340px;
bottom:-150px;
left:-100px;
background:radial-gradient(circle, rgba(188,236,174,0.34) 0%, rgba(188,236,174,0.10) 46%, rgba(188,236,174,0) 72%);
}

/* =========================================================
   TOP BAND
========================================================= */

.jd_quote_hero
{
position:relative;
z-index:2;
display:grid;
gap:1.1rem;
margin-top:0;
}

.jd_quote_hero_copy,
.jd_quote_hero_card,
.jd_quote_form_shell,
.jd_quote_step_card,
.jd_quote_help_card,
.jd_quote_help_strip
{
position:relative;
z-index:2;
border-radius:1.55rem;
box-shadow:0 24px 50px rgba(17,17,17,0.16);
}

.jd_quote_hero_copy
{
padding:1.45rem;
background:linear-gradient(180deg, #ffffff 0%, #f9fdff 100%);
border:2px solid #7db8d3;
}

.jd_quote_kicker
{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.48rem 0.88rem;
border-radius:999px;
background:linear-gradient(180deg, #ffffff 0%, #edf9ff 100%);
border:1px solid rgba(120, 188, 220, 0.18);
color:#23566d;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.03em;
text-transform:uppercase;
}

.jd_quote_heading
{
margin:0 0 0.9rem;
font-size:clamp(1.45rem, 2.55vw, 2.2rem);
line-height:1.1;
letter-spacing:-0.02em;
}

.jd_quote_lead
{
margin:0 0 0.9rem;
font-size:1.08rem;
line-height:1.72;
color:#111111;
max-width:56ch;
}

.jd_quote_intro_text
{
margin:0;
line-height:1.76;
color:#4f4f4f;
max-width:58ch;
}

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

.jd_quote_hero_card
{
padding:1.3rem 1.45rem 1.25rem;
background:linear-gradient(180deg, #ffffff 0%, #f6fcff 100%);
border:2px solid #7db8d3;
}

.jd_quote_hero_card h3,
.jd_quote_help_card h3,
.jd_quote_step_card h3,
.jd_quote_help_strip h3
{
margin:0 0 0.8rem;
font-size:1.28rem;
line-height:1.24;
text-align:center;
}

.jd_quote_tick_list
{
margin:0;
padding:0;
list-style:none;
}

.jd_quote_tick_list li
{
position:relative;
padding-left:1.75rem;
margin-bottom:0.82rem;
line-height:1.64;
color:#111111;
}

.jd_quote_tick_list li:last-child
{
margin-bottom:0;
}

.jd_quote_tick_list li::before
{
content:"✓";
position:absolute;
left:0;
top:0.02rem;
font-weight:700;
color:#4f93aa;
}

.jd_quote_trust_strip
{
position:relative;
z-index:2;
display:grid;
gap:1rem;
margin-top:1.2rem;
}

.jd_quote_trust_item
{
padding:1.15rem 1.15rem 1.08rem;
background:#fff1b5;
border:2px solid #7db8d3;
border-radius:1.2rem;
color:#111111;
box-shadow:0 20px 38px rgba(0,0,0,0.18);
text-align:center;
}

.jd_quote_trust_item strong
{
display:block;
margin-bottom:0.32rem;
font-size:1rem;
}

.jd_quote_trust_item span
{
display:block;
font-size:0.94rem;
line-height:1.55;
color:#494949;
}

/* =========================================================
   FORM BAND
========================================================= */

.jd_quote_form_zone
{
position:relative;
z-index:2;
max-width:920px;
margin:0 auto;
}

.jd_quote_form_zone::before
{
content:"";
position:absolute;
left:1rem;
right:1rem;
top:-1rem;
height:2rem;
border-radius:1.5rem;
background:linear-gradient(180deg, rgba(116,92,16,0.15) 0%, rgba(116,92,16,0.05) 45%, rgba(116,92,16,0) 100%);
filter:blur(10px);
pointer-events:none;
}

.jd_quote_form_header
{
text-align:center;
max-width:760px;
margin:0 auto 1.75rem;
}

.jd_quote_form_header h2
{
margin:0 0 0.8rem;
font-size:clamp(1.9rem, 4.6vw, 2.7rem);
line-height:1.08;
}

.jd_quote_form_header p
{
margin:0;
font-size:1.02rem;
line-height:1.72;
color:#5a5a5a;
}

.jd_quote_warning_banner
{
max-width:920px;
margin:0 auto 1rem;
padding:0.95rem 1.1rem;
border-radius:1rem;
background:#fff7dd;
border:1px solid #e3cb70;
color:#5f4b04;
font-size:0.95rem;
font-weight:600;
line-height:1.55;
text-align:center;
box-shadow:0 10px 22px rgba(17,17,17,0.08);
}

.jd_quote_form_shell
{
padding:1.35rem;
background:linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
border:2px solid #e0c85e;
box-shadow:
0 26px 50px rgba(90,72,10,0.16),
0 8px 16px rgba(255,255,255,0.55) inset;
}

.jd_form_message
{
max-width:920px;
margin:0 auto 1rem;
padding:0.95rem 1.1rem;
border-radius:1rem;
font-size:0.95rem;
font-weight:600;
line-height:1.5;
text-align:center;
box-shadow:0 10px 22px rgba(17,17,17,0.08);
}

.jd_form_message_info
{
background:#eef8ff;
border:1px solid #bfddee;
color:#28566f;
}

.jd_online_quote_form_row_3
{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:1rem;
}

.jd_repair_form_card
{
box-shadow:none;
border:0;
background:transparent;
padding:0;
}

.jd_repair_form_card .jd_form_section
{
padding:1.45rem 1.25rem 1.3rem;
margin-bottom:1.15rem;
border:1px solid rgba(125,184,211,0.18) !important;
box-shadow:0 12px 24px rgba(17,17,17,0.06);
border-radius:1.2rem !important;
}

.jd_repair_form_card .jd_form_section:last-child
{
margin-bottom:0;
}

.jd_online_quote_section_alt_1
{
background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.jd_online_quote_section_alt_2
{
background:linear-gradient(180deg, #f7f7f7 0%, #f1f1f1 100%);
}

.jd_repair_form_card .jd_form_section_header
{
margin-bottom:1.15rem;
padding-bottom:0.95rem;
border-bottom:1px solid rgba(17,17,17,0.06);
text-align:center;
}

.jd_repair_form_card .jd_form_section_header h3
{
margin:0 0 0.45rem;
text-align:center;
font-size:1.85rem;
line-height:1.15;
}

.jd_repair_form_card .jd_form_section_header p
{
max-width:42rem;
margin:0 auto;
text-align:center;
}

.jd_repair_form_card .jd_form_section_header .jd_form_section_kicker
{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:7rem;
padding:0.48rem 1rem;
margin:0 auto 0.95rem;
border-radius:999px;
background:#fff3bf !important;
border:1px solid #d8b84e !important;
color:#7a5d00 !important;
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);
}

.form_field
{
position:relative;
margin-bottom:0;
}

.form_field .form_input,
.form_field .form_textarea,
.form_field .form_select
{
width:100%;
}

.jd_repair_form_card .form_input,
.jd_repair_form_card .form_select,
.jd_repair_form_card .form_textarea
{
border:1px solid #d3d8dc;
background:#ffffff;
box-shadow:inset 0 1px 2px rgba(17,17,17,0.03);
}

.jd_repair_form_card .form_input,
.jd_repair_form_card .form_select
{
padding-top:1.45rem;
padding-bottom:0.55rem;
min-height:3.65rem;
}

.jd_repair_form_card .form_textarea
{
padding-top:1.7rem;
padding-bottom:0.75rem;
min-height:8.9rem;
}

.jd_repair_form_card .form_input:focus,
.jd_repair_form_card .form_select:focus,
.jd_repair_form_card .form_textarea: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% - 2.6rem);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.floating_label_textarea
{
top:1.15rem;
transform:none;
}

.form_field .form_input:focus + .floating_label,
.form_field .form_input:not(:placeholder-shown) + .floating_label,
.form_field .form_textarea:focus + .floating_label,
.form_field .form_textarea:not(:placeholder-shown) + .floating_label
{
top:0.52rem;
transform:none;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.01em;
color:#2b6f8f;
}

.form_field .form_select
{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

.form_field_select .floating_label
{
top:0.52rem;
transform:none;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.01em;
color:#2b6f8f;
}

.jd_online_quote_select
{
padding-right:3.3rem !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M3 4l7 7 7-7' fill='none' stroke='%232b6f8f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 1rem center;
background-size:18px 12px;
}

.form_help_dual
{
margin-top:0.15rem !important;
padding-left:0.2rem;
padding-right:0.2rem;
text-align:center;
}

.form_help_dual .form_help
{
display:block;
margin-top:0.12rem;
color:#666666;
line-height:1.55;
}

.jd_online_quote_hidden_file_input
{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}

.jd_online_quote_upload_shell
{
display:grid;
gap:0.9rem;
}

.jd_online_quote_dropzone
{
position:relative;
padding:1.1rem;
border:2px dashed #7db8d3;
border-radius:1.2rem;
background:#fbfdff;
cursor:pointer;
transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
box-shadow:0 10px 22px rgba(17,17,17,0.05);
}

.jd_online_quote_dropzone:hover,
.jd_online_quote_dropzone:focus
{
border-color:#2b6f8f;
box-shadow:0 14px 28px rgba(17,17,17,0.08);
outline:none;
}

.jd_online_quote_dropzone.is-dragover
{
border-color:#2b6f8f;
background:#f2fbff;
box-shadow:0 14px 28px rgba(43,111,143,0.14);
transform:translateY(-1px);
}

.jd_online_quote_dropzone_inner
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:0.6rem;
min-height:200px;
}

.jd_online_quote_dropzone_icon
{
display:flex;
align-items:center;
justify-content:center;
width:3.2rem;
height:3.2rem;
border-radius:50%;
background:#7db8d3;
border:2px solid #23566d;
color:#ffffff;
font-size:2rem;
line-height:1;
font-weight:400;
box-shadow:0 10px 22px rgba(35,86,109,0.18);
}

.jd_online_quote_dropzone_inner h4
{
margin:0;
font-size:1.2rem;
line-height:1.3;
color:#111111;
}

.jd_online_quote_dropzone_inner p
{
margin:0;
line-height:1.6;
color:#4a4a4a;
}

.jd_online_quote_dropzone_limit
{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.45rem 0.8rem;
border-radius:999px;
background:#fff3bf;
border:1px solid #d8b84e;
font-size:0.92rem;
font-weight:700;
color:#7a5d00;
}

.jd_online_quote_upload_button
{
margin-top:0.15rem;
}

.jd_online_quote_upload_status
{
padding:0.85rem 1rem;
background:#f7f7f1;
border:1px solid rgba(17,17,17,0.05);
border-radius:1rem;
font-size:0.96rem;
line-height:1.55;
color:#444444;
text-align:center;
}

.jd_online_quote_preview_grid
{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:0.8rem;
}

.jd_online_quote_preview_card
{
display:flex;
gap:0.9rem;
align-items:center;
padding:0.8rem;
background:#ffffff;
border:1px solid rgba(17,17,17,0.08);
border-radius:1rem;
box-shadow:0 10px 22px rgba(17,17,17,0.05);
}

.jd_online_quote_preview_thumb
{
flex:0 0 76px;
width:76px;
height:76px;
border-radius:0.85rem;
overflow:hidden;
background:#f3f3ef;
display:flex;
align-items:center;
justify-content:center;
font-size:0.9rem;
color:#666666;
}

.jd_online_quote_preview_thumb img
{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.jd_online_quote_preview_info
{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:0.5rem;
}

.jd_online_quote_preview_name
{
font-size:0.95rem;
line-height:1.4;
color:#222222;
word-break:break-word;
}

.jd_online_quote_preview_remove
{
align-self:flex-start;
padding:0;
border:none;
background:none;
font-size:0.92rem;
font-weight:700;
text-decoration:underline;
cursor:pointer;
color:#2b6f8f;
}

.jd_repair_form_card .jd_form_section_final
{
padding-top:1.45rem !important;
}

.jd_online_quote_terms_box
{
margin-top:0.2rem;
padding:1rem 1.1rem !important;
}

.jd_online_quote_checkbox_label
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.75rem;
text-align:center;
}

.jd_online_quote_checkbox_label input
{
margin:0;
}

.jd_online_quote_checkbox_label span
{
display:block;
max-width:42rem;
margin:0 auto;
text-align:center;
line-height:1.65;
}

.jd_online_quote_submit_panel
{
margin-top:1rem;
padding:1rem 1.1rem 0.95rem;
border-radius:1rem;
background:linear-gradient(180deg, #f8f8f8 0%, #efefef 100%);
border:1px solid rgba(17,17,17,0.06);
}

.jd_submit_area
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.75rem;
padding-top:0;
margin-top:0;
}

.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;
}

.jd_submit_note
{
max-width:42rem;
font-size:0.88rem;
line-height:1.42;
text-align:center;
white-space:normal;
color:#555555;
}

/* =========================================================
   BOTTOM BAND
========================================================= */

.jd_quote_bottom_intro
{
text-align:center;
margin-bottom:2rem;
}

.jd_quote_bottom_intro h2
{
font-size:clamp(1.6rem, 2.4vw, 2rem);
margin-bottom:0.5rem;
}

.jd_quote_bottom_intro p
{
font-size:1rem;
color:#444444;
}

.jd_quote_bottom_layout
{
display:grid;
grid-template-columns:2fr 1fr;
gap:1.5rem;
align-items:stretch;
}

.jd_quote_step_card,
.jd_quote_help_card,
.jd_quote_help_strip
{
background:#ffffff;
border:2px solid #2b6f8f;
border-radius:1.25rem;
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.jd_quote_step_card
{
padding:1.5rem;
}

.jd_quote_steps
{
display:flex;
flex-direction:column;
gap:1.2rem;
}

.jd_quote_step
{
display:flex;
gap:0.9rem;
align-items:flex-start;
}

.jd_quote_step_no
{
width:34px;
height:34px;
border-radius:50%;
background:#f2b300;
color:#111111;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:0 8px 16px rgba(17,17,17,0.12);
}

.jd_quote_step_text strong
{
display:block;
margin-bottom:0.25rem;
line-height:1.42;
}

.jd_quote_step_text p
{
margin:0;
line-height:1.68;
color:#575757;
}

.jd_quote_side_cards
{
display:flex;
flex-direction:column;
gap:1.5rem;
}

.jd_quote_help_card
{
padding:1.4rem;
background:#ffffff;
text-align:center;
}

.jd_quote_help_card p
{
margin:0;
line-height:1.74;
color:#535353;
}

.jd_quote_help_strip
{
margin-top:1.5rem;
padding:1.15rem 1.5rem;
text-align:center;
}

.jd_quote_help_strip h3
{
margin:0 0 0.45rem;
font-size:1.15rem;
}

.jd_quote_help_strip p
{
margin:0;
line-height:1.7;
color:#4d4d4d;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px)
{
.jd_quote_hero
{
grid-template-columns:minmax(0, 2fr) minmax(0, 1.35fr);
align-items:stretch;
}

.jd_quote_trust_strip
{
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
}
}

@media (max-width: 900px)
{
.jd_quote_bottom_layout
{
grid-template-columns:1fr;
}

.jd_quote_help_strip
{
padding:1.15rem 1.1rem;
}
}

@media (min-width: 1040px)
{
.jd_quote_band
{
padding:clamp(2.6rem, 4.2vw, 4rem) 0;
}

.jd_quote_hero_copy
{
padding:1.6rem;
}

.jd_quote_hero_card
{
padding:1.3rem 1.45rem 1.3rem;
}

.jd_quote_form_shell
{
padding:1.45rem;
}

.jd_quote_help_card
{
padding:1.5rem;
}
}

@media (max-width: 1039px)
{
.jd_quote_form_zone::before
{
left:0.5rem;
right:0.5rem;
}
}

@media (max-width: 767px)
{
.jd_online_quote_form_row_3,
.jd_online_quote_preview_grid
{
grid-template-columns:1fr;
}

.jd_online_quote_dropzone_inner
{
min-height:180px;
padding:0.2rem 0;
}

.jd_online_quote_preview_card
{
align-items:flex-start;
}

.jd_online_quote_preview_thumb
{
flex-basis:68px;
width:68px;
height:68px;
}

.jd_submit_button
{
width:100%;
min-width:0;
}

.floating_label
{
font-size:0.88rem;
}

.floating_label_textarea
{
top:1rem;
}
}