/*
=========================================================
FILE: payment.css
VERSION: 1.4
PURPOSE:
- Jewellery Doctor customer payment page styling
- All custom styles prefixed payment_
=========================================================
*/

.payment_page
{
padding:clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 7vw, 6rem);
background:#ffffff;
}

.payment_container
{
max-width:1000px;
margin:0 auto;
}

.payment_message
{
margin:0 auto 1.2rem;
padding:1rem 1.15rem;
border-radius:1rem;
background:#fff8d8;
border:2px solid #4a4a4a;
color:#111111;
font-weight:700;
text-align:center;
box-shadow:0 5px 10px rgba(0,0,0,0.28);
}

.payment_card
{
background:#ffffff;
border:2px solid #4a4a4a;
border-radius:1.45rem;
box-shadow:0 18px 34px rgba(0,0,0,0.16);
padding:clamp(1.15rem, 2.5vw, 1.7rem);
}

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

.payment_intro h2
{
margin:0 0 0.55rem;
font-family:'Outfit', sans-serif;
font-size:clamp(1.65rem, 3vw, 2.25rem);
font-weight:700;
line-height:1.15;
color:#111111;
}

.payment_intro p
{
margin:0;
font-size:1.03rem;
line-height:1.7;
color:#4c4c4c;
}

.payment_top_grid
{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.25rem;
align-items:stretch;
}

.payment_panel
{
padding:0;
border-radius:1.15rem;
background:#ffffff;
box-shadow:0 5px 10px rgba(0,0,0,0.30);
overflow:hidden;
}

.payment_customer_panel
{
border:2px solid #d4af37;
}

.payment_quote_panel
{
border:2px solid #16863a;
}

.payment_items_panel
{
margin-top:1.25rem;
border:2px solid #4a4a4a;
background:#ffffff;
}

.payment_panel h3,
.payment_section h3
{
margin:0;
padding:0.95rem 1rem;
font-family:'Outfit', sans-serif;
font-size:1.25rem;
font-weight:700;
line-height:1.2;
text-align:center;
color:#ffffff;
}

.payment_customer_panel h3
{
background:#d4af37;
border-bottom:2px solid #d4af37;
color:#ffffff;
font-size:1.4rem;
}

.payment_quote_panel h3
{
background:#16863a;
border-bottom:2px solid #16863a;
color:#ffffff;
font-size:1.4rem;
}

.payment_items_panel h3,
.payment_section h3
{
background:#4a4a4a;
border-bottom:2px solid #4a4a4a;
color:#ffffff;
}

.payment_rows
{
display:grid;
gap:0;
padding:1.25rem;
background:#ffffff;
}

.payment_rows > div
{
display:flex;
justify-content:space-between;
gap:1rem;
padding:0.75rem 0;
border-bottom:1px solid #e6e6e6;
background:#ffffff;
}

.payment_rows > div:last-child
{
border-bottom:0;
}

.payment_rows span
{
font-size:0.94rem;
font-weight:700;
color:#555555;
}

.payment_rows strong
{
font-size:0.98rem;
font-weight:700;
color:#111111;
text-align:right;
}

.payment_total
{
margin-top:0.85rem;
padding:1.2rem 1rem 1rem !important;
border:2px solid #16863a !important;
border-radius:0.95rem;
background:#dff6e5 !important;
align-items:center;
}

.payment_total span,
.payment_total strong
{
font-size:1.35rem;
line-height:1.1;
font-weight:800;
color:#16863a;
text-transform:uppercase;
}

.payment_items_table_wrap
{
width:100%;
overflow-x:auto;
padding:1.25rem;
box-sizing:border-box;
background:#ffffff;
}

.payment_items_table
{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:0.96rem;
background:#ffffff;
border:2px solid #b8b8b8;
border-radius:0.95rem;
overflow:hidden;
}

.payment_items_table th
{
padding:0.85rem 0.75rem;
background:#e7e7e7;
color:#111111;
font-weight:700;
text-align:left;
border-bottom:2px solid #b8b8b8;
}

.payment_items_table th:first-child
{
border-top-left-radius:0.75rem;
}

.payment_items_table th:last-child
{
border-top-right-radius:0.75rem;
}

.payment_items_table td
{
padding:0.85rem 0.75rem;
border-bottom:1px solid #eeeeee;
color:#333333;
line-height:1.55;
vertical-align:top;
}

.payment_items_table tbody tr:nth-child(odd) td
{
background:#ffffff;
}

.payment_items_table tbody tr:nth-child(even) td
{
background:#f8f8f8;
}

.payment_items_table tr:last-child td
{
border-bottom:0;
}

.payment_price_col
{
text-align:right !important;
white-space:nowrap;
font-weight:700;
}

.payment_section
{
margin-top:1.25rem;
padding:0;
border:2px solid #4a4a4a;
border-radius:1.15rem;
background:#ffffff;
box-shadow:0 5px 10px rgba(0,0,0,0.30);
overflow:hidden;
}

.payment_section form,
.payment_help,
.payment_delivery_note,
.payment_success,
.payment_notice,
.payment_promo_form
{
margin-left:1.25rem;
margin-right:1.25rem;
}

.payment_help
{
margin-top:1rem;
margin-bottom:1rem;
font-size:1rem;
line-height:1.65;
color:#444444;
text-align:center;
}

.payment_section form
{
margin-bottom:1.25rem;
}

.payment_select,
.payment_input
{
width:100%;
min-height:3.35rem;
padding:0.85rem 1rem;
border:2px solid #b7b7b7;
border-radius:0.8rem;
background:#ffffff;
color:#111111;
font-size:1rem;
font-weight:600;
outline:none;
box-sizing:border-box;
}

.payment_select:focus,
.payment_input:focus
{
border-color:#4a4a4a;
box-shadow:0 0 0 4px rgba(74,74,74,0.14);
}

.payment_delivery_note
{
margin-top:0;
margin-bottom:1.25rem;
padding:1rem 1.1rem;
border-radius:1rem;
font-size:1rem;
font-weight:600;
line-height:1.45;
text-align:center;
}

.payment_delivery_note strong
{
display:block;
margin-bottom:0.1rem;
font-size:1.45rem;
line-height:1.15;
text-transform:uppercase;
}

.payment_delivery_note_red
{
background:#e11919;
border:3px solid #7a0000;
color:#ffffff;
}

.payment_delivery_note_orange
{
background:#ff8c00;
border:3px solid #a34d00;
color:#ffffff;
}

.payment_delivery_note_green
{
background:#11a84e;
border:3px solid #075f2a;
color:#ffffff;
}

.payment_delivery_note_collect
{
background:#e8f6ff;
border:3px solid #2b6f8f;
color:#111111;
}

.payment_delivery_note_default
{
background:#f3f3f3;
border:3px solid #999999;
color:#111111;
}

.payment_promo_form
{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
gap:0.8rem;
align-items:stretch;
margin-top:1.25rem;
margin-bottom:1.25rem;
}

.payment_secondary_button
{
min-height:3.35rem;
padding:0.85rem 1.25rem;
border-radius:999px;
border:2px solid #8f6f00;
background:#d4af37;
color:#ffffff;
font-size:1rem;
font-weight:800;
line-height:1;
cursor:pointer;
text-transform:uppercase;
box-shadow:0 5px 10px rgba(0,0,0,0.28);
transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.payment_secondary_button:hover,
.payment_secondary_button:focus-visible
{
background:#ffffff;
color:#8f6f00;
transform:translateY(-1px);
}

.payment_success
{
margin-top:1.25rem;
margin-bottom:1.25rem;
padding:1rem 1.1rem;
border-radius:1rem;
background:#dff6e5;
border:2px solid #16863a;
color:#16863a;
font-weight:800;
text-align:center;
}

.payment_action_area
{
margin-top:1.5rem;
text-align:center;
}

.payment_button
{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
max-width:720px;
min-height:4.15rem;
padding:1rem 1.5rem;
border-radius:999px;
border:3px solid #075f2a;
background:#11a84e;
color:#ffffff;
font-size:1.25rem;
font-weight:900;
line-height:1;
letter-spacing:0.03em;
text-transform:uppercase;
cursor:pointer;
box-shadow:0 5px 10px rgba(0,0,0,0.34);
transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.payment_button:hover,
.payment_button:focus-visible
{
background:#ffffff;
color:#075f2a;
transform:translateY(-2px);
box-shadow:0 6px 12px rgba(0,0,0,0.38);
}

.payment_button_disabled,
.payment_button:disabled
{
opacity:0.65;
cursor:not-allowed;
transform:none !important;
}

.payment_secure_note
{
margin:0.85rem 0 0;
font-size:0.96rem;
line-height:1.55;
color:#555555;
}

.payment_notice
{
margin-top:1.25rem;
margin-bottom:1.25rem;
padding:1rem 1.1rem;
border-radius:1rem;
background:#fff8d8;
border:2px solid #4a4a4a;
color:#111111;
font-weight:800;
text-align:center;
}

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

.payment_rows,
.payment_items_table_wrap
{
padding:1.1rem;
}

.payment_section form,
.payment_help,
.payment_delivery_note,
.payment_success,
.payment_notice,
.payment_promo_form
{
margin-left:1.1rem;
margin-right:1.1rem;
}
}

@media (max-width: 640px)
{
.payment_page
{
padding:1.2rem 0 4rem;
}

.payment_card
{
border-radius:1.1rem;
padding:1rem;
}

.payment_promo_form
{
grid-template-columns:1fr;
}

.payment_secondary_button,
.payment_button
{
width:100%;
}

.payment_rows > div
{
display:grid;
grid-template-columns:1fr;
gap:0.25rem;
}

.payment_rows strong
{
text-align:left;
}

.payment_total span,
.payment_total strong
{
font-size:1.18rem;
}

.payment_items_table
{
font-size:0.9rem;
}

.payment_delivery_note strong
{
font-size:1.25rem;
}
}

.payment_delivery_note_yellow
{
background:#fff8d8;
border:3px solid #4a4a4a;
color:#111111;
}