/* DNDB review form fields, shared with the reviews page modal.
   =========================================================================
   Generated from index.html: every top-level .contacts-input /
   .contacts-textarea / .contacts-select / .contacts-field / button rule, plus
   the shine treatment scoped to .contacts-submit-btn. Rules that live inside
   the homepage's media queries are deliberately NOT taken: those are its
   layout, not the field look, and copying them here would drag the contact
   column's grid into a modal that has its own.

   The modal reuses the contact form's class names on purpose, so the fields
   are the same component and cannot drift into a lookalike.

   Regenerate rather than hand-edit if the contact form's fields change. */


@property --gradient-angle        { syntax:"<angle>";      initial-value:0deg;  inherits:false; }

.contacts-input:focus,
.contacts-textarea:focus {
    background: rgba(255,255,255,0.7);
    box-shadow:
        -173.226px 154.326px 172px rgba(72,63,86,0.16),
        -101.996px 90.8674px 89.7152px rgba(72,63,86,0.115712),
        -52.3836px 46.6683px 42.1056px rgba(72,63,86,0.089856),
        -21.0643px 18.7661px 18.4384px rgba(72,63,86,0.070144),
        -4.71175px 4.19768px 7.9808px rgba(72,63,86,0.044288);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.contacts-input,
.contacts-textarea {
    box-sizing: border-box;
    padding: 12px 16px;
    background: linear-gradient(190.57deg, rgba(255,255,255,0.09) 19.25%, rgba(255,255,255,0.071) 54.39%, rgba(255,255,255,0.087) 90.02%);
    box-shadow: 50px 38px 102.371px rgba(120,118,148,0.14);
    border: none;
    border-radius: 10px;
    font-family: 'Roboto',sans-serif;
    font-size: 13px;
    color: var(--m1);
    outline: none;
}

.contacts-input { width: 305px; height: 60px; flex: 1; transition: background 0.25s ease;
}

.contacts-textarea { width: 100%; height: 120px; resize: none; font-family: 'Roboto',sans-serif; transition: background 0.25s ease;
}

.contacts-input::placeholder,
.contacts-textarea::placeholder { color: var(--m1); opacity: 1;
}

.contacts-input:-webkit-autofill,
.contacts-input:-webkit-autofill:hover,
.contacts-input:-webkit-autofill:focus,
.contacts-textarea:-webkit-autofill,
.contacts-textarea:-webkit-autofill:hover,
.contacts-textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(235,236,242,0.85) inset,
                        50px 38px 102.371px rgba(120,118,148,0.14);
    box-shadow: 0 0 0 1000px rgba(235,236,242,0.85) inset,
                50px 38px 102.371px rgba(120,118,148,0.14);
    -webkit-text-fill-color: #6A6D7C;
    background: transparent !important;
    transition: background-color 9999s ease, color 9999s ease;
}

.contacts-select-wrap {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;   /* a flex item defaults to min-content, and the longest option would otherwise force the field wider than its half of the row */
}

.contacts-select {
    width: 100%;
    /* Room for the chevron: the badge is 12px wide and sits 16px in from
       the right edge, matching the field's own left padding. */
    padding-right: 44px;
    -webkit-appearance: none; appearance: none;
    cursor: pointer;
}

.contacts-select.is-chosen {
    background: linear-gradient(190.57deg, rgba(255,255,255,0.45) 19.25%, rgba(255,255,255,0.355) 54.39%, rgba(255,255,255,0.435) 90.02%);
    color: #6A6D7C;
}

.contacts-select option { background: #EBECF2; color: #6A6D7C;
}

.contacts-select option[value=""] { color: var(--m1);
}

.contacts-select-arrow {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.contacts-select--error { border: 1px solid #D90808 !important;
}

.contacts-submit-btn {
    flex: 0 0 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: linear-gradient(96.58deg, #71B5C9 -17.37%, var(--t1) 57.3%);
    border: none;
    border-radius: 10px;
    font-family: 'SF Pro Text',-apple-system,sans-serif;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.contacts-submit-btn:hover { opacity: 0.9; transform: translateY(-2px);
}

.contacts-schedule-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    height: 36px;
    background: transparent;
    filter: drop-shadow(0px 22px 62px rgba(12,12,32,0.07)) drop-shadow(0px 4.4px 10.075px rgba(12,12,32,0.035));
    border-radius: 10px;
    font-family: 'SF Pro Text',-apple-system,sans-serif;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--m1);
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.contacts-schedule-btn:hover { opacity: 0.7; transform: translateY(-2px);
}

.contacts-field { position: relative; flex: 1;
}

.contacts-field .contacts-input { width: 100%; box-sizing: border-box;
}

.contacts-field--area .contacts-err { top: auto; bottom: 10px; transform: none;
}

.contacts-input--error { border: 1px solid #D90808 !important;
}

.contacts-textarea--error { border: 1px solid #D90808 !important;
}

.contacts-submit-btn::before,
.contacts-submit-btn::after {
    content: ""; pointer-events: none; position: absolute;
    left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
    animation: var(--sc-anim) var(--sc-dur);
}

.contacts-submit-btn::before {
    width: calc(100% - 6px); height: calc(100% - 6px);
    background: radial-gradient(circle at 2px 2px, #fff 0.5px, transparent 0) padding-box;
    background-size: 4px 4px; background-repeat: space;
    mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
    border-radius: inherit; opacity: .4;
}

.contacts-submit-btn::after {
    --sc-anim: shimmer linear infinite;
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, var(--sc-hi), transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: .55;
}

.contacts-submit-btn:hover {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--sc-hi-sub);
}

.contacts-submit-btn {
    --sc-bg: #0d0d16;
    --sc-bg-subtle: #1a1818;
    --sc-hi: #67e8f9;
    --sc-hi-sub: #06b6d4;
    --sc-anim: gradient-angle linear infinite;
    --sc-dur: 3s;
    isolation: isolate; position: relative; overflow: hidden;
    border: 1px solid transparent !important;
    color: #fff !important;
    background:
        linear-gradient(var(--sc-bg), var(--sc-bg)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--sc-hi) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--sc-hi) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        ) border-box !important;
    box-shadow: inset 0 0 0 1px var(--sc-bg-subtle);
    transition:
        --gradient-angle-offset 800ms cubic-bezier(0.25,1,0.5,1),
        --gradient-percent 800ms cubic-bezier(0.25,1,0.5,1),
        --gradient-shine 800ms cubic-bezier(0.25,1,0.5,1),
        opacity .2s, transform .2s;
    animation: var(--sc-anim) var(--sc-dur);
}

.contacts-submit-btn::before,
.contacts-submit-btn::after {
    content: ""; pointer-events: none; position: absolute;
    left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
    animation: var(--sc-anim) var(--sc-dur);
}

.contacts-submit-btn::before {
    width: calc(100% - 6px); height: calc(100% - 6px);
    background: radial-gradient(circle at 2px 2px, #fff 0.5px, transparent 0) padding-box;
    background-size: 4px 4px; background-repeat: space;
    mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
    border-radius: inherit; opacity: .4;
}

.contacts-submit-btn::after {
    --sc-anim: shimmer linear infinite;
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, var(--sc-hi), transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: .55;
}

.contacts-submit-btn:hover {
    --gradient-percent: 20%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--sc-hi-sub);
}