/* ==========================================================================
   Contact page redesign — adent.io
   Scoped accents:
     - Steps 1 & 2: blue #2D4FFF
     - Step 3:      site purple #6A15E0 / #4a00e0
   ========================================================================== */

:root {
    --adent-blue: #2D4FFF;
    --adent-blue-hover: #1f3edb;
    --adent-blue-soft: #EEF1FF;
    --adent-purple: #6A15E0;
    --adent-purple-soft: #F2EBFF;
    --adent-ink: #0E1530;
    --adent-mute: #6B7488;
    --adent-line: #E5E7EB;
}

/* ----- Layout -------------------------------------------------------------- */
.contact-redesign-section {
    background: linear-gradient(180deg, #F5F7FF 0%, #FFFFFF 100%);
    padding: 5rem 0 4rem;
}

.contact-redesign-section .lead-headline {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--adent-ink);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.text-blue-2d4fff { color: var(--adent-blue) !important; }

.contact-redesign-section .lead-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--adent-mute);
    max-width: 36rem;
    margin-bottom: 2rem;
}

/* ----- Bullet checks ------------------------------------------------------- */
.bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}
@media (max-width: 575px) {
    .bullet-list { grid-template-columns: 1fr; }
}
.bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--adent-ink);
    font-weight: 600;
    line-height: 1.35;
}
.bullet-check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--adent-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--adent-blue);
    margin-top: 2px;
}
.bullet-check svg { width: 12px; height: 12px; }

/* ----- Trust line + review badges ----------------------------------------- */
.trust-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--adent-ink);
    font-weight: 700;
    margin: 1.25rem 0 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--adent-line);
}
.trust-shield {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--adent-blue-soft);
    color: var(--adent-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 520px;
}
@media (max-width: 480px) {
    .review-badges { grid-template-columns: 1fr; }
}
.review-badge-card {
    background: #fff;
    border: 1px solid var(--adent-line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 4px 16px rgba(53, 27, 90, .04);
}
.review-badge-card .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}
.review-badge-card .logo {
    font-weight: 800;
    color: var(--adent-ink);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.review-badge-card .logo .reviews-io-logo {
    height: 18px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.review-badge-card .stars {
    color: #FFB400;
    letter-spacing: 1px;
    font-size: .9rem;
}
.review-badge-card .meta {
    display: flex;
    justify-content: space-between;
    color: var(--adent-mute);
    font-size: .85rem;
}
.review-badge-card .score { color: var(--adent-blue); font-weight: 700; }

/* ----- Form card / stage --------------------------------------------------- */
#contact-stage {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 18px 48px rgba(53, 27, 90, .08), 0 2px 6px rgba(53, 27, 90, .04);
    padding: 1.75rem 1.85rem;
    position: relative;
    overflow: hidden;
}
@media (max-width: 575px) {
    #contact-stage { padding: 1.25rem; }
}

.contact-step {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.contact-step.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.contact-step.d-none { display: none !important; }
.contact-step:focus { outline: none; }

/* ----- Inputs (icon-prefixed) --------------------------------------------- */
.input-icon-group {
    margin-bottom: .85rem;
}
.input-icon-group .input-label {
    display: block;
    font-weight: 700;
    color: var(--adent-ink);
    font-size: .9rem;
    margin-bottom: .3rem;
}

/* Inner wrapper that holds the icon + control. Absolute positioning is now
   relative to JUST the input row so it can never drift onto the label. */
.input-icon-group .input-control {
    position: relative;
}
.input-icon-group .input-control .leading-icon {
    position: absolute;
    left: 1rem;
    top: 1.05rem;
    color: var(--adent-mute);
    pointer-events: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.input-icon-group .input-control.input-control-textarea .leading-icon {
    top: .9rem;
}

/* Validation error styling */
.input-icon-group label.error,
.input-icon-group .invalid-feedback {
    display: block;
    color: #C0392B;
    font-size: .8rem;
    margin-top: .35rem;
}

.input-icon-group .form-control,
.input-icon-group .form-select,
.input-icon-group .dropdown-select {
    width: 100%;
    padding: .7rem 1rem .7rem 2.75rem;
    border: 1px solid var(--adent-line);
    border-radius: 10px;
    font-size: .95rem;
    background: #fff;
    color: var(--adent-ink);
    transition: border-color .15s, box-shadow .15s;
}
/* Phone field has no leading icon — intl-tel-input adds its own flag/dial-code */
.input-icon-group .input-control.no-leading-icon .form-control {
    padding-left: 1rem;
}
.input-icon-group .form-control:focus,
.input-icon-group .dropdown-select:focus {
    outline: none;
    border-color: var(--adent-blue);
    box-shadow: 0 0 0 3px var(--adent-blue-soft);
}
.input-icon-group textarea.form-control {
    min-height: 84px;
    resize: vertical;
    padding-top: .7rem;
}

/* product dropdown reset (high specificity to defeat any cascading button styles) */
.input-icon-group .input-control .dropdown-select,
.input-icon-group button.dropdown-select {
    text-align: left;
    color: var(--adent-mute);
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3e%3cpath d='M1 1l6 6 6-6' stroke='%236B7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat right 1rem center;
    padding: .7rem 2.5rem .7rem 2.75rem !important;
    border: 1px solid var(--adent-line);
    border-radius: 10px;
    width: 100%;
    font-size: .95rem;
}
/* Suppress any inherited ::after caret (Bootstrap dropdown-toggle / site CSS) */
.input-icon-group .dropdown-select::after,
.input-icon-group button.dropdown-select::after,
.input-icon-group .dropdown-select::before,
.input-icon-group button.dropdown-select::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
/* Suppress the global .dropdown::after rotated-square caret defined in
   default.min.css:845 (used by site nav menus). Scoped to our form only. */
.input-icon-group .dropdown::after,
.input-icon-group .dropdown::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
.input-icon-group .dropdown-select.has-value { color: var(--adent-ink); }
.input-icon-group .dropdown-menu { width: 100%; border-radius: 10px; border: 1px solid var(--adent-line); padding: .35rem; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.input-icon-group .dropdown-item { border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; }
.input-icon-group .dropdown-item:hover { background: var(--adent-blue-soft); color: var(--adent-blue); }

/* intl-tel-input integration — let the library's flag container sit cleanly
   inside our rounded border and not collide with our :focus glow */
.input-icon-group .iti { width: 100%; }
.input-icon-group .iti--separate-dial-code .iti__selected-flag {
    background: transparent;
    border-radius: 10px 0 0 10px;
}
.input-icon-group .iti--separate-dial-code .form-control {
    padding-left: 90px;
}

/* ----- Privacy line ------------------------------------------------------- */
.privacy-line {
    display: flex;
    gap: .6rem;
    color: var(--adent-mute);
    font-size: .8rem;
    line-height: 1.45;
    margin: .5rem 0 .85rem;
}
.privacy-line a { color: var(--adent-blue); font-weight: 600; }
.privacy-line .lock-icon { flex-shrink: 0; color: var(--adent-mute); margin-top: 2px; }

/* ----- Buttons ------------------------------------------------------------ */
.btn-blue-2d4fff {
    background: var(--adent-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .8rem 1.25rem;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background-color .15s, transform .05s;
    cursor: pointer;
}
.btn-blue-2d4fff:hover { background: var(--adent-blue-hover); color: #fff; }
.btn-blue-2d4fff:active { transform: translateY(1px); }
.btn-blue-2d4fff:disabled { opacity: .65; cursor: not-allowed; }

.btn-blue-pill {
    background: var(--adent-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .65rem 1.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s;
}
.btn-blue-pill:hover { background: var(--adent-blue-hover); color: #fff; }
.btn-blue-pill:disabled { opacity: .65; cursor: not-allowed; }

.btn-text-link {
    background: none;
    border: none;
    color: var(--adent-mute);
    font-weight: 600;
    cursor: pointer;
    padding: .65rem .75rem;
}
.btn-text-link:hover { color: var(--adent-ink); }

.submit-footer {
    text-align: center;
    color: var(--adent-mute);
    font-size: .8rem;
    margin-top: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.submit-footer strong { color: var(--adent-blue); }

/* ----- Step 2 -------------------------------------------------------------- */
.contact-step-rep-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.contact-step-rep-avatar {
    width: 76px;
    height: 76px;
    border-radius: 18px;
    flex-shrink: 0;
    background-color: var(--adent-blue-soft);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--adent-blue);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .02em;
    user-select: none;
}
.contact-step-rep-avatar .rep-initials {
    line-height: 1;
}
.contact-step-rep-text h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--adent-ink);
    margin: 0 0 .35rem 0;
    line-height: 1.15;
}
.contact-step-rep-text .sub {
    color: var(--adent-ink);
    font-weight: 600;
    margin: 0 0 .35rem 0;
}
.contact-step-rep-text .role {
    color: var(--adent-mute);
    font-size: .95rem;
    margin: 0;
}
.contact-step-2-body {
    color: var(--adent-ink);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.contact-step-2-body strong { font-weight: 800; }
.contact-step-2-question {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--adent-ink);
    line-height: 1.3;
    margin-bottom: 1.25rem;
}
.contact-step-2-search-input {
    width: 100%;
    padding: .85rem 0;
    border: none;
    border-bottom: 1px solid var(--adent-line);
    font-size: 1rem;
    background: transparent;
    color: var(--adent-ink);
}
.contact-step-2-search-input:focus {
    outline: none;
    border-bottom-color: var(--adent-blue);
}
.contact-step-2-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}
#step2-error {
    color: #C0392B;
    font-size: .9rem;
    margin-top: .5rem;
}

/* ----- Step 2 -------------------------------------------------------------- */
.contact-step-2 { text-align: center; }
.contact-step-2-check {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--adent-purple-soft);
    color: var(--adent-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .65rem;
    position: relative;
}
.contact-step-2-check svg { width: 22px; height: 22px; }
.contact-step-2-check::before, .contact-step-2-check::after,
.contact-step-2-check .confetti-1, .contact-step-2-check .confetti-2 {
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
}
.contact-step-2-check::before { top: -3px; left: 6px; background: #FFB400; }
.contact-step-2-check::after { top: 4px; right: -2px; background: #6A15E0; }
.contact-step-2 h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--adent-ink);
    margin: 0 0 .35rem 0;
    line-height: 1.2;
}
.contact-step-2 .sub-line {
    color: var(--adent-mute);
    margin: 0;
    font-size: .9rem;
    line-height: 1.4;
}
.contact-step-2 .divider {
    height: 1px;
    background: var(--adent-line);
    margin: 1rem auto;
    max-width: 320px;
}
.contact-step-2-q-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--adent-purple);
    color: var(--adent-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem;
    font-weight: 800;
}
.contact-step-2-q-icon svg { width: 15px; height: 15px; }
.contact-step-2 h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--adent-ink);
    margin: 0 0 .25rem 0;
    line-height: 1.25;
}
.contact-step-2 .helper {
    color: var(--adent-mute);
    font-size: .85rem;
    margin: 0 0 .2rem 0;
    line-height: 1.4;
}
.contact-step-2 .optional-tag {
    color: var(--adent-mute);
    font-style: italic;
    font-size: .8rem;
    margin-bottom: .75rem;
}

#source-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    margin: 0 0 .75rem 0;
}
@media (max-width: 991px) { #source-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { #source-card-grid { grid-template-columns: 1fr; } }

.source-card {
    background: #fff;
    border: 1px solid var(--adent-line);
    border-radius: 12px;
    padding: .75rem .4rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .05s;
    color: var(--adent-ink);
    font-weight: 600;
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    line-height: 1.2;
    min-height: 92px;
}
.source-card .source-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    text-align: center;
}
.source-card:hover:not(:disabled) {
    border-color: var(--adent-purple);
    box-shadow: 0 4px 16px rgba(106, 21, 224, .1);
}
.source-card:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.source-card.is-selected {
    border-color: var(--adent-purple);
    background: var(--adent-purple-soft);
    opacity: 1;
}
.source-card .source-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.source-card .source-icon img,
.source-card .source-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#source-skip {
    color: var(--adent-purple);
    font-weight: 700;
    background: none;
    border: none;
    padding: .5rem 1rem;
    cursor: pointer;
}
#source-skip:hover { color: #4a00e0; }
#source-skip:disabled { opacity: .55; cursor: not-allowed; }

#source-thanks {
    color: var(--adent-purple);
    font-weight: 700;
    margin: .55rem 0;
    font-size: .9rem;
}

.contact-step-2-footer {
    color: var(--adent-mute);
    font-size: .8rem;
    margin-top: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/* ----- Override: hide old contact-card-right shadow if any cascade ------- */
.contact-redesign-section .row.justify-content-between {
    align-items: center;
}

/* ----- Fix: 4 contact cards (Product Comparison / Support Ticket / Income
   Hacks / Where to Find Us) — the global .animated-arrow:hover sets color and
   shaft to #fff, which disappears on the white card. Keep the text + arrow
   in brand blue and visible on hover. ------------------------------------- */
.icon-hover-border .animated-arrow,
.icon-hover-border .animated-arrow .text {
    color: #2d4fff;
}
.icon-hover-border .animated-arrow:hover,
.icon-hover-border .animated-arrow:hover .text {
    color: #2d4fff;
}
.icon-hover-border .animated-arrow .the-arrow > .shaft,
.icon-hover-border .animated-arrow .the-arrow > .shaft::before,
.icon-hover-border .animated-arrow .the-arrow > .shaft::after {
    background-color: #2d4fff;
}
.icon-hover-border .animated-arrow:hover .the-arrow > .shaft,
.icon-hover-border .animated-arrow:hover .the-arrow > .shaft::before,
.icon-hover-border .animated-arrow:hover .the-arrow > .shaft::after {
    background-color: #2d4fff;
}