/*
 * Radian RFQ form presentation layer.
 * Uses the existing theme variables and palette only.
 */

body.radian-rfq-ui-v46 {
    --radian-ui-navy: var(--navy, var(--radian-navy, #062b49));
    --radian-ui-blue: var(--blue, var(--radian-blue, #0b5c7a));
    --radian-ui-teal: var(--teal, var(--radian-teal, #0c8792));
    --radian-ui-orange: var(--orange, var(--radian-orange, #f28b22));
    --radian-ui-ink: var(--ink, var(--radian-ink, #172033));
    --radian-ui-muted: var(--muted, var(--radian-muted, #64748b));
    --radian-ui-line: var(--line, var(--radian-line, #d9e3ec));
    --radian-ui-soft: var(--soft, var(--radian-soft, #f4f7fb));
    --radian-ui-white: var(--white, var(--radian-white, #fff));
}

/* Constrain only the RFQ form section, not the page content around it. */
body.radian-rfq-ui-v46 #radian-short-rfq-form > .radian-container,
body.radian-rfq-ui-v46 #radian-short-rfq-form > .radian-wrap,
body.radian-rfq-ui-v46 .radian-rfq-form-section > .radian-container,
body.radian-rfq-ui-v46 .radian-rfq-form-section > .radian-wrap {
    width: min(100% - 32px, 960px) !important;
    max-width: 960px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Vendor-form-inspired card shell. */
body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel,
body.radian-rfq-ui-v46 .radian-short-rfq-form,
body.radian-rfq-ui-v46 form.radian-short-rfq {
    position: relative;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel {
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: clamp(24px, 4vw, 42px) !important;
    border: 1px solid var(--radian-ui-line) !important;
    border-radius: 24px !important;
    background: var(--radian-ui-white) !important;
    box-shadow:
        0 12px 30px rgba(6, 43, 73, 0.07),
        0 30px 70px rgba(6, 43, 73, 0.08) !important;
    overflow: hidden;
    isolation: isolate;
    animation: radian-rfq-panel-in .68s cubic-bezier(.2,.75,.25,1) both;
}

/* Existing-palette accent line for a premium card edge. */
body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--radian-ui-navy),
        var(--radian-ui-teal),
        var(--radian-ui-orange)
    );
    z-index: -1;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -130px;
    top: -150px;
    border: 38px solid color-mix(in srgb, var(--radian-ui-teal) 9%, transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel > h2 {
    margin: 0 0 8px !important;
    color: var(--radian-ui-navy) !important;
    letter-spacing: -0.025em;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-note {
    color: var(--radian-ui-muted) !important;
    max-width: 700px;
}

/* Structured two-column layout like Vendor Registration. */
body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-grid,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .form-grid,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    align-items: start;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form {
    width: 100% !important;
    max-width: none !important;
    margin: 26px 0 0 !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form label,
body.radian-rfq-ui-v46 #radian-short-rfq-form form p {
    min-width: 0;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form label {
    display: grid !important;
    gap: 7px !important;
    margin: 0 0 17px !important;
    color: var(--radian-ui-navy) !important;
    font-weight: 800 !important;
    line-height: 1.35;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.radian-rfq-ui-v46 #radian-short-rfq-form form select,
body.radian-rfq-ui-v46 #radian-short-rfq-form form textarea {
    width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 13px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    background: var(--radian-ui-white) !important;
    color: var(--radian-ui-ink) !important;
    font: inherit !important;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(6, 43, 73, 0.03) inset;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background-color .22s ease !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form textarea {
    min-height: 132px;
    resize: vertical;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="file"] {
    min-height: auto !important;
    padding: 12px !important;
    border-style: dashed !important;
    background: var(--radian-ui-soft) !important;
    cursor: pointer;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
body.radian-rfq-ui-v46 #radian-short-rfq-form form select:hover,
body.radian-rfq-ui-v46 #radian-short-rfq-form form textarea:hover {
    border-color: color-mix(in srgb, var(--radian-ui-teal) 52%, var(--radian-ui-line)) !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.radian-rfq-ui-v46 #radian-short-rfq-form form select:focus,
body.radian-rfq-ui-v46 #radian-short-rfq-form form textarea:focus {
    outline: none !important;
    border-color: var(--radian-ui-teal) !important;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--radian-ui-teal) 14%, transparent),
        0 8px 20px rgba(6, 43, 73, 0.06) !important;
    transform: translateY(-1px);
}

body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-consent,
body.radian-rfq-ui-v46 #radian-short-rfq-form label:has(> input[type="checkbox"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 15px;
    border: 1px solid var(--radian-ui-line);
    border-radius: 14px;
    background: var(--radian-ui-soft);
    color: var(--radian-ui-ink) !important;
    font-weight: 600 !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin: 2px 0 0 !important;
    accent-color: var(--radian-ui-orange);
}

/* Orange submit button matching the site CTA color. */
body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"],
body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="submit"],
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 190px;
    min-height: 52px;
    margin-top: 4px !important;
    padding: 13px 24px !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: var(--radian-ui-orange) !important;
    color: var(--radian-ui-white) !important;
    font: inherit !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 18px color-mix(in srgb, var(--radian-ui-orange) 24%, transparent),
        0 2px 5px rgba(6, 43, 73, 0.08) !important;
    transform: translateY(0) scale(1);
    transition:
        transform .22s cubic-bezier(.2,.75,.25,1),
        box-shadow .22s ease,
        filter .22s ease !important;
    -webkit-tap-highlight-color: transparent;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"]::before,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary::before,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary::before {
    content: "";
    position: absolute;
    inset: -60% auto -60% -55%;
    width: 42%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transition: left .55s cubic-bezier(.2,.75,.25,1);
    pointer-events: none;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"]:hover,
body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="submit"]:hover,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary:hover,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary:hover {
    transform: translateY(-3px) scale(1.015) !important;
    filter: brightness(1.035);
    box-shadow:
        0 14px 28px color-mix(in srgb, var(--radian-ui-orange) 30%, transparent),
        0 5px 12px rgba(6, 43, 73, 0.12) !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"]:hover::before,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary:hover::before,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary:hover::before {
    left: 118%;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"]:active,
body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="submit"]:active,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary:active,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary:active,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-rfq-pressed {
    transform: translateY(1px) scale(.985) !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--radian-ui-orange) 20%, transparent) !important;
}

body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"]:focus-visible,
body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="submit"]:focus-visible,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary:focus-visible,
body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--radian-ui-orange) 35%, transparent) !important;
    outline-offset: 4px;
}

/* Result notices visually belong to the form card. */
body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-success,
body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-error,
body.radian-rfq-ui-v46 #radian-short-rfq-form [id^="radian-v"] {
    border-radius: 14px !important;
    padding: 15px 17px !important;
    margin: 18px 0 !important;
    animation: radian-rfq-result-in .42s cubic-bezier(.2,.75,.25,1) both;
}

@keyframes radian-rfq-panel-in {
    from { opacity: 0; transform: translateY(20px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes radian-rfq-result-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 780px) {
    body.radian-rfq-ui-v46 #radian-short-rfq-form > .radian-container,
    body.radian-rfq-ui-v46 #radian-short-rfq-form > .radian-wrap {
        width: min(100% - 24px, 960px) !important;
    }

    body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-panel {
        padding: 22px 18px !important;
        border-radius: 20px !important;
    }

    body.radian-rfq-ui-v46 #radian-short-rfq-form .radian-form-grid,
    body.radian-rfq-ui-v46 #radian-short-rfq-form form .form-grid,
    body.radian-rfq-ui-v46 #radian-short-rfq-form form .row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    body.radian-rfq-ui-v46 #radian-short-rfq-form form button[type="submit"],
    body.radian-rfq-ui-v46 #radian-short-rfq-form form input[type="submit"],
    body.radian-rfq-ui-v46 #radian-short-rfq-form form .radian-btn-primary,
    body.radian-rfq-ui-v46 #radian-short-rfq-form form .btn.primary {
        width: 100% !important;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.radian-rfq-ui-v46 #radian-short-rfq-form *,
    body.radian-rfq-ui-v46 #radian-short-rfq-form *::before,
    body.radian-rfq-ui-v46 #radian-short-rfq-form *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
