/* =========================================================
FILE: ring_resize_calculator.css
VERSION: 8.0
PURPOSE: Ring resize calculator page styling
NOTES:
- Uses universal jd_band_hold_main wrapper and shared form_bands.css colours
- Keeps only page-specific ring resize styles
========================================================= */

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

.jd_resize_intro_copy,
.jd_resize_trust_card,
.jd_resize_process_card,
.jd_resize_info_card,
.jd_resize_form_shell
{
position:relative;
z-index:2;
border-radius:1.55rem;
box-shadow:0 24px 50px rgba(17,17,17,0.16);
}

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

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

.jd_resize_intro_copy p,
.jd_resize_info_card p
{
margin:0 0 0.9rem;
line-height:1.76;
color:#4f4f4f;
}

.jd_resize_intro_copy p:last-child,
.jd_resize_info_card p:last-child
{
margin-bottom:0;
}

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

.jd_resize_trust_card h3,
.jd_resize_process_card h3,
.jd_resize_info_card h3
{
margin:0 0 0.8rem;
font-size:1.28rem;
line-height:1.24;
text-align:center;
}

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

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

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

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

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

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

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

.jd_resize_form_header p
{
margin:0;
font-size:1.02rem;
line-height:1.72;
color:#29506a;
}

.jd_resize_form_shell
{
padding:1.3rem;
background:linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
border:2px solid #7db8d3;
box-shadow:0 26px 50px rgba(43,111,143,0.14), 0 8px 16px rgba(255,255,255,0.55) inset;
}

.resize_form
{
max-width:none;
margin:0;
}

.resize_form_card
{
padding:1.15rem;
border:1px solid rgba(125,184,211,0.18);
border-radius:1.2rem;
background:#ffffff;
box-shadow:0 10px 22px rgba(17,17,17,0.05);
}

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

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

.resize_form_header h3
{
margin:0 0 0.45rem;
text-align:center;
}

.resize_form_header p
{
max-width:42rem;
margin:0 auto;
text-align:center;
color:#5a5a5a;
}

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

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

.form_row_full
{
grid-column:1 / -1;
}

.field_wrap
{
position:relative;
}

.form_row select,
.form_input
{
display:block;
width:100%;
height:3.65rem;
padding:1.45rem 2.8rem 0.55rem 0.95rem;
border:1px solid #d3d8dc;
border-radius:1rem;
background-color:#ffffff;
box-shadow:inset 0 1px 2px rgba(17,17,17,0.03);
font-size:1rem;
line-height:1.2;
color:#111111;
outline:none;
}

.form_row select
{
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 0.95rem center;
background-size:16px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.form_input
{
padding-right:0.95rem;
}

.form_row select:focus,
.form_input:focus
{
border-color:#7db8d3;
box-shadow:0 0 0 0.2rem rgba(125,184,211,0.18);
}

.form_row select::-ms-expand
{
display:none;
}

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

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

.field_note
{
margin:0.55rem 0 0;
font-size:0.9rem;
line-height:1.55;
color:#666666;
}

.resize_checkbox_row
{
display:flex;
align-items:flex-start;
gap:0.75rem;
padding:0.95rem 1rem;
background:#fff9e8;
border:1px solid #efe3ad;
border-radius:1rem;
font-size:0.92rem;
line-height:1.55;
color:#555555;
cursor:pointer;
}

.resize_checkbox_row input
{
margin-top:0.15rem;
flex-shrink:0;
}

.resize_checkbox_row span
{
display:block;
}

.form_actions
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0.8rem;
padding-top:0.35rem;
margin-top:1.15rem;
}

.btn_primary
{
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;
background:#111111;
color:#ffffff;
box-shadow:0 18px 34px rgba(17,17,17,0.18);
cursor:pointer;
}

.btn_primary:hover
{
background:#2a2a2a;
}

.calc_error,
.calc_success,
.calc_result
{
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);
}

.calc_error
{
background:#fff1f1;
border:1px solid #e6b8b8;
color:#8f2d2d;
}

.calc_success
{
background:#eef9ef;
border:1px solid #b8d9bd;
color:#23653a;
}

.calc_success_inside
{
max-width:none;
margin:0 0 1rem 0;
box-shadow:none;
}

.calc_result
{
background:#ffffff;
border:2px solid #7db8d3;
color:#111111;
text-align:left;
}

.calc_result h3
{
margin:0 0 0.8rem;
font-size:1.28rem;
line-height:1.24;
text-align:center;
}

.calc_breakdown
{
display:grid;
gap:0;
}

.calc_breakdown_row
{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:0.95rem 0;
border-bottom:1px solid rgba(17,17,17,0.08);
font-size:1rem;
line-height:1.5;
color:#2d2925;
}

.calc_breakdown_row:last-child
{
border-bottom:0;
padding-bottom:0;
}

.calc_breakdown_total
{
font-weight:700;
font-size:1.08rem;
color:#111111;
}

.calc_warning
{
margin-top:1rem;
padding:0.95rem 1rem;
background:#fff8e8;
border:1px solid #ecd8a3;
border-radius:1rem;
font-size:0.95rem;
line-height:1.6;
color:#6e5212;
text-align:center;
}

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

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

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

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

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

.jd_resize_process_card
{
padding:1.5rem;
}

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

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

.jd_resize_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_resize_step_text strong
{
display:block;
margin-bottom:0.25rem;
line-height:1.42;
}

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

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

.jd_resize_info_card
{
padding:1.45rem;
background:linear-gradient(180deg, #ffffff 0%, #fafffa 100%);
}

.jd_resize_info_card .page_content
{
font-size:0.98rem;
line-height:1.8;
}

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

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

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

@media (min-width: 1040px)
{
.jd_resize_intro_copy
{
padding:1.6rem;
}

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

.jd_resize_form_shell
{
padding:1.45rem;
}

.jd_resize_info_card
{
padding:1.5rem;
}
}

@media (max-width: 991px)
{
.resize_form_grid
{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.form_row_full
{
grid-column:1 / -1;
}
}

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

.form_row_full
{
grid-column:auto;
}

.form_row select,
.form_input
{
font-size:1rem;
}

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

.floating_label
{
font-size:0.88rem;
}
}

#calc_result
{
scroll-margin-top:300px;
}