/* ==========================================================================
   Mon Road Trip Sur Mesure — Form Plugin Styles
   Scoped under .roadtrip-form-wrap to avoid WP theme conflicts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — mirrored from the main theme for standalone use
   Fonts are loaded dynamically by PHP based on plugin settings.
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap {
    --bleu-fjord:      #2c3e50;
    --vert-foret:      #27ae60;
    --orange-aventure: #e67e22;
    --gris-route:      #34495e;
    --blanc-brume:     #ecf0f1;
    --gris-asphalte:   #7f8c8d;
    --ivoire:          #faf8f5;
    --rouge-erreur:    #e74c3c;

    /* Defaults — overridden by PHP via inline style when settings are saved */
    --font-title: 'Oswald', sans-serif;
    --font-body:  'Lora', Georgia, serif;

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-pill: 50px;

    --shadow-sm:  0 2px 8px rgba(44, 62, 80, 0.08);
    --shadow-md:  0 6px 20px rgba(44, 62, 80, 0.14);
    --shadow-lg:  0 14px 40px rgba(44, 62, 80, 0.18);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--font-body);
    color: var(--gris-route);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Form wrapper — centered at 820px as usual.
   The sidebar is position:fixed (managed entirely by JS) so it never
   participates in this layout and never causes any shift.
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
    position: relative;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: mrtf-form;
}

/* Subtle road texture behind the form.
   Absolute, not fixed: container-type above already makes this element a
   containing block for fixed descendants, so fixed would be confined to
   this box anyway. */
.roadtrip-form-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(39, 174, 96, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(230, 126, 34, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   Progress bar
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .form-progress {
    margin-bottom: 2.5rem;
    position: relative;
}

/* The "road" track */
.roadtrip-form-wrap .progress-bar {
    width: 100%;
    height: 5px;
    background: var(--blanc-brume);
    border-radius: var(--radius-pill);
    overflow: visible;
    margin-bottom: 1.4rem;
    position: relative;
}

/* Gradient fill travelling along the road */
.roadtrip-form-wrap .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vert-foret), var(--orange-aventure));
    width: 33.33%;
    transition: width 0.5s var(--ease-smooth);
    border-radius: var(--radius-pill);
    position: relative;
}

/* Motorcycle icon at the tip of the fill — real FA element for color + size control */
.roadtrip-form-wrap .progress-moto-icon {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.35rem;
    color: var(--gris-route);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
    transition: right 0.5s var(--ease-smooth);
    line-height: 1;
}

.roadtrip-form-wrap .progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.roadtrip-form-wrap .progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.45;
    transition: opacity 0.3s var(--ease-smooth);
    cursor: default;
}

.roadtrip-form-wrap .progress-step span {
    font-family: var(--font-title);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-asphalte);
    transition: color 0.3s;
}

.roadtrip-form-wrap .progress-step.active {
    opacity: 1;
}

.roadtrip-form-wrap .progress-step.active span {
    color: var(--vert-foret);
}

.roadtrip-form-wrap .progress-step.completed {
    opacity: 1;
}

.roadtrip-form-wrap .progress-step.completed span {
    color: var(--orange-aventure);
}

.roadtrip-form-wrap .step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--blanc-brume);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gris-asphalte);
    transition: all 0.35s var(--ease-spring);
    box-shadow: var(--shadow-sm);
}

.roadtrip-form-wrap .progress-step.active .step-circle {
    background: var(--vert-foret);
    border-color: var(--vert-foret);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(39, 174, 96, 0.15);
}

.roadtrip-form-wrap .progress-step.completed .step-circle {
    background: var(--orange-aventure);
    border-color: var(--orange-aventure);
    color: white;
}

.roadtrip-form-wrap .progress-step.completed .step-circle::after {
    content: '✓';
    font-size: 0.9rem;
}

.roadtrip-form-wrap .progress-step.completed .step-circle > * {
    display: none;
}

/* --------------------------------------------------------------------------
   Form steps
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .form-wizard {
    background: var(--ivoire);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(44, 62, 80, 0.07);
    position: relative;
    overflow: hidden;
}

/* Decorative corner mark — like a worn map corner */
.roadtrip-form-wrap .form-wizard::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(225deg, rgba(230, 126, 34, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.roadtrip-form-wrap .form-step {
    display: none;
    animation: mrtf-slide-in 0.4s var(--ease-smooth) both;
}

.roadtrip-form-wrap .form-step.active {
    display: block;
}

@keyframes mrtf-slide-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.roadtrip-form-wrap .form-step h2 {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bleu-fjord);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--blanc-brume);
    position: relative;
}

/* Orange accent line under step title */
.roadtrip-form-wrap .form-step h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--orange-aventure);
}

/* --------------------------------------------------------------------------
   Form groups & labels
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .form-group {
    margin-bottom: 2rem;
}

.roadtrip-form-wrap .form-group > label {
    display: block;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bleu-fjord);
    margin-bottom: 0.8rem;
}

.roadtrip-form-wrap .hotel-rooms {
    background: white;
    border: 1px dashed rgba(44, 62, 80, 0.15);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 0.5rem;
}

.roadtrip-form-wrap .hotel-rooms h4 {
    font-family: var(--font-title);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris-asphalte);
    margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   Radio & Checkbox cards
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .radio-cards,
.roadtrip-form-wrap .checkbox-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.roadtrip-form-wrap .radio-card,
.roadtrip-form-wrap .checkbox-card {
    position: relative;
    cursor: pointer;
    background: white;
    border: 2px solid rgba(44, 62, 80, 0.1);
    border-radius: var(--radius-md);
    padding: 1.4rem 1rem;
    transition: all 0.25s var(--ease-smooth);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Shimmer on hover */
.roadtrip-form-wrap .radio-card::after,
.roadtrip-form-wrap .checkbox-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(39, 174, 96, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.25s;
}

.roadtrip-form-wrap .radio-card:hover,
.roadtrip-form-wrap .checkbox-card:hover {
    border-color: rgba(39, 174, 96, 0.4);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.roadtrip-form-wrap .radio-card:hover::after,
.roadtrip-form-wrap .checkbox-card:hover::after {
    opacity: 1;
}

/* Selected state — gradient border */
.roadtrip-form-wrap .radio-card.selected,
.roadtrip-form-wrap .checkbox-card.selected {
    border-color: transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, var(--vert-foret), var(--orange-aventure)) border-box;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(39, 174, 96, 0.18);
}

/* Checkmark badge — top right */
.roadtrip-form-wrap .radio-card.selected .radio-card-content::after,
.roadtrip-form-wrap .checkbox-card.selected .checkbox-card-content::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: var(--vert-foret);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mrtf-pop-in 0.25s var(--ease-spring) both;
}

@keyframes mrtf-pop-in {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.roadtrip-form-wrap .radio-card-content,
.roadtrip-form-wrap .checkbox-card-content {
    text-align: center;
    position: relative;
}

.roadtrip-form-wrap .radio-card-content i,
.roadtrip-form-wrap .checkbox-card-content i {
    font-size: 2rem;
    color: var(--orange-aventure);
    margin-bottom: 0.6rem;
    display: block;
    transition: transform 0.25s var(--ease-spring), color 0.25s;
}

.roadtrip-form-wrap .radio-card:hover .radio-card-content i,
.roadtrip-form-wrap .checkbox-card:hover .checkbox-card-content i,
.roadtrip-form-wrap .radio-card.selected .radio-card-content i,
.roadtrip-form-wrap .checkbox-card.selected .checkbox-card-content i {
    transform: scale(1.15);
    color: var(--vert-foret);
}

.roadtrip-form-wrap .radio-card-content span,
.roadtrip-form-wrap .checkbox-card-content span {
    display: block;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--bleu-fjord);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.roadtrip-form-wrap .radio-card-content small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gris-asphalte);
    line-height: 1.4;
    font-style: italic;
}

/* Hide native inputs */
.roadtrip-form-wrap .radio-card input,
.roadtrip-form-wrap .checkbox-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Sliders
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .slider-container {
    margin: 0.8rem 0 0.4rem;
}

.roadtrip-form-wrap .slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--blanc-brume);
    outline: none;
    cursor: pointer;
    box-sizing: content-box; /* height applies to the track only, not including padding */
}

/* Filled portion — applied via JS inline style */
.roadtrip-form-wrap .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--vert-foret);
    cursor: grab;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.35);
    transition: all 0.2s var(--ease-spring);
}

.roadtrip-form-wrap .slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.45);
}

.roadtrip-form-wrap .slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.1);
}

/* Firefox — track */
.roadtrip-form-wrap .slider::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--blanc-brume);
    border: none;
}

/* Firefox — filled portion before the thumb */
.roadtrip-form-wrap .slider::-moz-range-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, #2ecc71, #27ae60);
}

/* Firefox — thumb */
.roadtrip-form-wrap .slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--vert-foret);
    cursor: grab;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.35);
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    box-sizing: border-box;
}

.roadtrip-form-wrap .slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.45);
}

.roadtrip-form-wrap .slider:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.1);
}

.roadtrip-form-wrap .slider-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.roadtrip-form-wrap .slider-footer > span {
    font-size: 0.8rem;
    color: var(--gris-asphalte);
    font-style: italic;
    padding-top: 0.45rem;
    white-space: nowrap;
    line-height: 1.4;
}

.roadtrip-form-wrap .slider-footer .slider-value {
    flex: 1;
    margin: 0;
}

.roadtrip-form-wrap .slider-value {
    text-align: center;
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bleu-fjord);
    letter-spacing: -0.01em;
}

.roadtrip-form-wrap .slider-value span {
    color: var(--vert-foret);
}

/* --------------------------------------------------------------------------
   Text inputs, selects
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1.1rem;
    border: 2px solid rgba(44, 62, 80, 0.12);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--gris-route);
    background: white;
    transition: all 0.25s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
    -webkit-appearance: none;
    appearance: none;
}

.roadtrip-form-wrap .form-control:focus {
    outline: none;
    border-color: var(--vert-foret);
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.1), var(--shadow-sm);
}

.roadtrip-form-wrap .form-control::placeholder {
    color: var(--gris-asphalte);
    opacity: 0.65;
    font-style: italic;
}

.roadtrip-form-wrap .form-control.error {
    border-color: var(--rouge-erreur);
    background: rgba(231, 76, 60, 0.03);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.roadtrip-form-wrap select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='%237f8c8d' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.roadtrip-form-wrap .form-help {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--gris-asphalte);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Error messages
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .field-error {
    color: var(--rouge-erreur);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    animation: mrtf-slide-in 0.25s var(--ease-smooth) both;
    font-style: italic;
}

.roadtrip-form-wrap .field-error::before {
    content: '⚠';
    font-style: normal;
    font-size: 0.9rem;
}

/* Submit-level error (after form-navigation): align with the submit
   button on the right instead of the default left alignment. */
.roadtrip-form-wrap .form-navigation + .field-error {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-smooth);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.roadtrip-form-wrap .btn-primary {
    background: var(--vert-foret);
    color: white;
}

.roadtrip-form-wrap .btn-primary:hover {
    background: var(--orange-aventure);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(230, 126, 34, 0.35);
}

.roadtrip-form-wrap .btn-primary:active {
    transform: translateY(-1px);
}

.roadtrip-form-wrap .btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.roadtrip-form-wrap .btn-secondary {
    background: transparent;
    color: var(--bleu-fjord);
    border: 2px solid rgba(44, 62, 80, 0.2);
    box-shadow: none;
}

.roadtrip-form-wrap .btn-secondary:hover {
    background: var(--bleu-fjord);
    color: white;
    border-color: var(--bleu-fjord);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.roadtrip-form-wrap .form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--blanc-brume);
}

/* Single button (first step) → align right */
.roadtrip-form-wrap .form-navigation .btn:only-child {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   Layout wrapper — plain block, no special layout needed.
   The sidebar is position:fixed so it's fully outside this flow.
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .mrtf-layout {
    display: block;
}

/* --------------------------------------------------------------------------
   Live price preview — position and size set entirely by JS.
   JS places it fixed in the left margin and clamps it within the form's
   vertical bounds on scroll. On narrow screens JS falls back to static.
   Only card visual styles live here.
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .price-preview {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

/* Bottom copy of the widget, always static below the form */
.roadtrip-form-wrap #mrtf-price-bottom {
    margin-top: 1.5rem;
}

.roadtrip-form-wrap .price-preview-content {
    background: var(--bleu-fjord);
    color: white;
    padding: 1.2rem 1.2rem 1rem;
    border-radius: var(--radius-md);
    text-align: left;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* In sidebar (fixed) mode, price-left and price-right are transparent —
   their children flow directly in the card's block layout. */
.roadtrip-form-wrap .price-left,
.roadtrip-form-wrap .price-right {
    display: contents;
}

/* Animated shimmer stripe */
.roadtrip-form-wrap .price-preview-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: mrtf-shimmer 3s infinite;
    pointer-events: none;
}

@keyframes mrtf-shimmer {
    from { left: -60%; }
    to   { left: 120%; }
}

/* "Estimation" label */
.roadtrip-form-wrap .price-label {
    font-family: var(--font-title);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.3rem;
}

/* Large price */
.roadtrip-form-wrap .price-amount {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    color: var(--orange-aventure);
    line-height: 1.1;
    margin-bottom: 0.9rem;
}

.roadtrip-form-wrap .price-unit {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}

/* Cost breakdown list */
.roadtrip-form-wrap .price-breakdown {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0.7rem 0 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.8rem;
    opacity: 0.8;
}

.roadtrip-form-wrap .price-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.roadtrip-form-wrap .price-breakdown li span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

/* Trip summary line */
.roadtrip-form-wrap .price-meta {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 0.6rem;
    font-size: 0.78rem;
    opacity: 0.6;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Price preview — inline (static) mode: horizontal bar
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .price-preview--inline .price-preview-content {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* stretch so price-left separator fills full height */
    gap: 0;
    padding: 0;
}

/* Restore price-left and price-right as real flex children */
.roadtrip-form-wrap .price-preview--inline .price-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.9rem 1.4rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.roadtrip-form-wrap .price-preview--inline .price-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.9rem 1.4rem;
}

/* Compact price in inline mode */
.roadtrip-form-wrap .price-preview--inline .price-label {
    white-space: nowrap;
    margin-bottom: 0.15rem;
}

.roadtrip-form-wrap .price-preview--inline .price-amount {
    font-size: 1.6rem;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Breakdown as horizontal row that can wrap to 2×2 */
.roadtrip-form-wrap .price-preview--inline .price-breakdown {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.2rem;
    margin: 0;
    padding: 0;
    border-top: none;
}

.roadtrip-form-wrap .price-preview--inline .price-breakdown li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    margin-bottom: 0;
}

.roadtrip-form-wrap .price-preview--inline .price-breakdown li span:first-child {
    font-size: 0.78rem;
    opacity: 0.65;
    font-weight: 400;
}

.roadtrip-form-wrap .price-preview--inline .price-breakdown li span:last-child {
    font-size: 0.95rem;
}

.roadtrip-form-wrap .price-preview--inline .price-meta {
    border-top: none;
    padding-top: 0;
    text-align: center;
    font-size: 0.82rem;
}

/* On wide screens, the inline bar has room to spare: put the trip summary
   next to the breakdown instead of on its own line below. */
@container mrtf-form (min-width: 601px) {
    .roadtrip-form-wrap .price-preview--inline .price-right {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.4rem;
    }

    .roadtrip-form-wrap .price-preview--inline .price-meta {
        text-align: left;
        padding-left: 1.4rem;
        border-left: 1px solid rgba(255,255,255,0.2);
    }
}

/* --------------------------------------------------------------------------
   Price preview — compact mode (very narrow, e.g. iPhone)
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .price-preview--compact .price-preview-content {
    flex-direction: column;
    gap: 0;
    padding: 0.8rem 1.1rem;
}

.roadtrip-form-wrap .price-preview--compact .price-left {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0 0 0.6rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 0.5rem;
}

.roadtrip-form-wrap .price-preview--compact .price-right {
    padding: 0;
    gap: 0.25rem;
}

.roadtrip-form-wrap .price-preview--compact .price-label {
    margin-bottom: 0;
    font-size: 0.72rem;
}

.roadtrip-form-wrap .price-preview--compact .price-amount {
    font-size: 1.35rem;
    white-space: nowrap;
}

/* Breakdown as single inline text line with · separators */
.roadtrip-form-wrap .price-preview--compact .price-breakdown {
    display: block;
    margin: 0;
    padding: 0;
    border-top: none;
    line-height: 1.5;
    font-size: 0.78rem;
    opacity: 0.85;
    text-align: center;
}

.roadtrip-form-wrap .price-preview--compact .price-breakdown li {
    display: inline;
    flex-direction: unset;
}

.roadtrip-form-wrap .price-preview--compact .price-breakdown li + li::before {
    content: ' · ';
    opacity: 0.6;
}

.roadtrip-form-wrap .price-preview--compact .price-breakdown li span:first-child {
    font-size: 0.78rem;
    opacity: 0.75;
    font-weight: 400;
}

.roadtrip-form-wrap .price-preview--compact .price-breakdown li span:first-child::after {
    content: '\00a0'; /* non-breaking space between label and value */
}

.roadtrip-form-wrap .price-preview--compact .price-breakdown li span:last-child {
    font-size: 0.78rem;
    font-weight: 600;
}

.roadtrip-form-wrap .price-preview--compact .price-meta {
    border-top: none;
    padding-top: 0;
    text-align: center;
    font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Success message
   -------------------------------------------------------------------------- */
.roadtrip-form-wrap .success-message {
    text-align: center;
    padding: 3.5rem 2rem;
    background: var(--ivoire);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(44, 62, 80, 0.07);
    animation: mrtf-slide-in 0.5s var(--ease-smooth) both;
}

.roadtrip-form-wrap .success-icon {
    font-size: 4.5rem;
    color: var(--vert-foret);
    margin-bottom: 1.2rem;
    animation: mrtf-pop-in 0.5s var(--ease-spring) both;
}

.roadtrip-form-wrap .quote-result h2 {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bleu-fjord);
    margin-bottom: 1.2rem;
}

.roadtrip-form-wrap .quote-details {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--gris-route);
    max-width: 560px;
    margin: 0 auto 2rem;
}

.roadtrip-form-wrap .quote-details strong {
    color: var(--bleu-fjord);
}

.roadtrip-form-wrap .success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* (No additional mobile overrides needed for the sidebar:
   the @media (max-width: 1260px) rule above already switches it to static/inline) */

/* Layout rules react to .roadtrip-form-wrap's own width (container query)
   rather than the viewport, since the theme can shrink it well below the
   viewport width at any breakpoint. */
@container mrtf-form (max-width: 600px) {
    .roadtrip-form-wrap .form-wizard {
        padding: 1.8rem 1.2rem;
    }

    .roadtrip-form-wrap .radio-cards,
    .roadtrip-form-wrap .checkbox-cards {
        grid-template-columns: 1fr;
    }

    .roadtrip-form-wrap .form-navigation {
        flex-direction: column-reverse;
    }

    .roadtrip-form-wrap .form-navigation .btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }

    .roadtrip-form-wrap .form-navigation .btn:only-child {
        margin-left: 0;
    }

    .roadtrip-form-wrap .success-actions {
        flex-direction: column;
        align-items: center;
    }

    .roadtrip-form-wrap .progress-step span {
        display: none;
    }
}

@container mrtf-form (max-width: 420px) {
    .roadtrip-form-wrap {
        padding: 1.5rem 1rem 2rem;
    }

    .roadtrip-form-wrap .form-step h2 {
        font-size: 1.4rem;
    }
}

/* iOS zooms in on input focus when font-size < 16px — a device/viewport
   concern, not tied to the component's own width, so this stays a
   viewport media query. */
@media (max-width: 680px) {
    .roadtrip-form-wrap .form-control {
        font-size: 16px;
    }
}