/* Order form design language — scoped under body.order-page so it never touches
   admin/partner dashboards, the homepage, or auth, which all share styles.css.
   Same palette/type system as home.css/customer.css. This is the highest-stakes
   page on the site (death certificate details + $1,495 payment), so it gets the
   full treatment rather than the old purple-gradient/Inter look. */

body.order-page {
    --rc-bg: #F7F5F0;
    --rc-card: #FFFFFF;
    --rc-dark: #232320;
    --rc-mid: #55554E;
    --rc-muted: #8C8A80;
    --rc-green: #3D5A1E;
    --rc-green-mid: #4E7228;
    --rc-green-light: #6B9A35;
    --rc-green-pale: #EDF2E4;
    --rc-border: #E3DFD6;
    --rc-red-bg: #F7E3E1;
    --rc-red-border: #E8C6C1;
    --rc-red-text: #A23B2E;
    --rc-amber-bg: #FBF0DC;
    --rc-amber-border: #E8C171;
    --rc-amber-text: #7A4A0C;
    font-family: 'DM Sans', 'Inter', sans-serif;
    background: var(--rc-bg);
    color: var(--rc-dark);
}

body.order-page h1,
body.order-page h2,
body.order-page h3,
body.order-page h4 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Header / nav */
body.order-page .header { background: rgba(247, 245, 240, 0.92); border-bottom: 1px solid var(--rc-border); }
body.order-page .tagline { color: var(--rc-green); font-style: normal; letter-spacing: 0.02em; }
body.order-page .nav-menu a { color: var(--rc-mid); }
body.order-page .nav-menu a:hover { color: var(--rc-dark); }

/* Order header banner + progress bar */
body.order-page .order-header {
    background: linear-gradient(135deg, var(--rc-bg) 0%, var(--rc-green-pale) 100%);
    border-bottom: 1px solid var(--rc-border);
    padding: 130px 0 40px;
}
body.order-page .order-header h1 { color: var(--rc-dark); }
body.order-page .order-subtitle { color: var(--rc-mid); }

body.order-page .step-number { background: var(--rc-muted); font-family: 'DM Sans', sans-serif; }
body.order-page .progress-step.active .step-number { background: var(--rc-green); }
body.order-page .step-label { color: var(--rc-mid); font-family: 'DM Sans', sans-serif; }
body.order-page .progress-step.active .step-label { color: var(--rc-dark); font-weight: 600; }

/* Form sections */
body.order-page .order-form-section { background: var(--rc-bg); }
body.order-page .form-section {
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    box-shadow: 0 2px 10px rgba(35, 35, 32, 0.04);
}
body.order-page .form-section h3 { color: var(--rc-dark); font-size: 1.2rem; }
body.order-page .form-section h4 { color: var(--rc-dark); font-size: 1rem; }

body.order-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
body.order-page .section-header h3 { margin: 0; }
body.order-page .section-chevron {
    font-size: 1.1rem;
    color: var(--rc-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
body.order-page .form-section.collapsed .section-chevron { transform: rotate(-90deg); }
body.order-page .section-body { margin-top: 1.5rem; }
body.order-page .form-section.collapsed .section-body { display: none; }
body.order-page .section-header:hover h3 { color: var(--rc-green); }

body.order-page .form-group label { color: var(--rc-dark); font-family: 'DM Sans', sans-serif; font-weight: 500; }
body.order-page .form-group input,
body.order-page .form-group select,
body.order-page .form-group textarea {
    border: 2px solid var(--rc-border);
    color: var(--rc-dark);
    font-family: 'DM Sans', sans-serif;
    background: var(--rc-card);
}
body.order-page .form-group input:focus,
body.order-page .form-group select:focus,
body.order-page .form-group textarea:focus {
    border-color: var(--rc-green);
}
body.order-page .form-group small { color: var(--rc-muted); }

/* Checkboxes */
body.order-page .checkbox-label a,
body.order-page .checkbox-label a:visited { color: var(--rc-green); }
body.order-page .checkbox-mark { border: 2px solid var(--rc-border); background: var(--rc-card); }
body.order-page .checkbox-label input[type="checkbox"]:checked + .checkbox-mark {
    background: var(--rc-green);
    border-color: var(--rc-green);
}

/* Medical device warning callout */
body.order-page .medical-device-info {
    background: var(--rc-red-bg);
    border-left: 4px solid var(--rc-red-text);
    color: var(--rc-mid);
}
body.order-page .medical-device-info strong { color: var(--rc-dark); }

/* Buttons */
body.order-page .order-submit-btn {
    background: var(--rc-green);
    font-family: 'DM Sans', sans-serif;
}
body.order-page .order-submit-btn:hover { background: var(--rc-green-mid); }
body.order-page .order-submit-btn:disabled { background: var(--rc-muted); }

body.order-page .order-save-btn {
    background: var(--rc-card);
    color: var(--rc-green);
    border: 2px solid var(--rc-green);
    font-family: 'DM Sans', sans-serif;
}
body.order-page .order-save-btn:hover { background: var(--rc-green-pale); }

/* Order summary sidebar */
body.order-page .summary-card {
    background: var(--rc-card);
    border: 1px solid var(--rc-border);
    border-top: 3px solid var(--rc-green);
    box-shadow: 0 12px 32px rgba(61, 90, 30, 0.08);
}
body.order-page .summary-card h3 { color: var(--rc-dark); }
body.order-page .summary-line { border-bottom: 1px solid var(--rc-border); color: var(--rc-mid); }
body.order-page .summary-line.total { border-bottom: 2px solid var(--rc-green); color: var(--rc-dark); }
body.order-page .summary-features h4 { color: var(--rc-dark); }
body.order-page .summary-features ul li {
    color: var(--rc-mid);
    position: relative;
    padding-left: 1.5rem;
}
body.order-page .summary-features ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 14px;
    height: 14px;
    background: var(--rc-green);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Trust badges — line icons instead of emoji */
body.order-page .trust-badges { gap: 0.6rem; }
body.order-page .badge {
    background: var(--rc-green-pale);
    color: var(--rc-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
}
body.order-page .badge-icon { color: var(--rc-green); flex-shrink: 0; }
body.order-page .timing-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rc-border);
    color: var(--rc-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Footer */
body.order-page .footer { background: var(--rc-dark); }
body.order-page .footer-section h3,
body.order-page .footer-section h4 { font-family: 'Fraunces', serif; font-weight: 500; }
body.order-page .footer-section ul li a:hover { color: var(--rc-green-light); }
body.order-page .footer-bottom { border-top-color: #3a3a35; }

@media (max-width: 768px) {
    body.order-page .order-header { padding: 110px 0 30px; }
}