/* ======================================================
   CONTACT US — Card Styling + Hover Animations
   ====================================================== */

/* Base card styling */
.contact-info,
.contact-form-card {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: all 0.35s ease;
}

/* Desktop hover animation only */
@media (min-width: 768px) {
    .contact-info:hover,
    .contact-form-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Optional improvements (looks much cleaner) */
.contact-info h3 {
    margin-bottom: 0.8rem;
}

.contact-info p {
    margin: 0.35rem 0;
}


/* Add spacing so the form card sits lower */
.contact-form-card {
    margin-top: 1.2rem; /* adjust higher/lower as needed */
}



/* Container that will type lines sequentially */
.typewriter-block > * {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    animation: typing 1.6s steps(40, end) forwards;
}


.typewriter-block > * {
    opacity: 0;
    animation: fadeLine 0.8s ease forwards;
    animation-delay: calc(var(--order) * 0.25s);
}

@keyframes fadeLine {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        text-shadow: 0 0 6px rgba(255,255,255,0.3);
    }
}


/* Reduce width of all input controls inside the contact form card */
.contact-form-card form input,
.contact-form-card form textarea,
.contact-form-card form select {
    max-width: 90%;       /* reduce width */
    margin: 0.4rem auto;  /* center them */
    display: block;       /* ensures proper centering */
}


/* Stronger default shadow for the entire form card */
.contact-form-card {
    background: rgba(255, 255, 255, 0.90);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); /* darker shadow */
    transition: all 0.35s ease;
}

/* Hover animation for desktop */
@media (min-width: 768px) {
    .contact-form-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); /* deeper & smoother */
        background: rgba(255, 255, 255, 0.97);      /* slightly brighter on hover */
    }
}


/* INNER container (the white box with inputs) */
.contact-form-card form {
    background: rgba(255, 255, 255, 0.96);
    padding: 2rem;
    border-radius: 12px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);  /* darker shadow */
    transition: all 0.35s ease;
}

/* Hover animation for the inner container */
@media (min-width: 768px) {
    .contact-form-card form:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);  /* deeper shadow on hover */
        background: rgba(255, 255, 255, 0.99);        /* brighten on hover */
    }
}


/* INNER form container */
.contact-form-card form {
    background: rgba(255, 255, 255, 0.96);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: all 0.35s ease;
}

/* Hover effect — lift + yellow highlight */
@media (min-width: 768px) {
    .contact-form-card form:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
        background: #fff9d6;  /* light yellow */
    }
}


/* Animation for each input, select, and textarea */
.contact-form-card form input,
.contact-form-card form select,
.contact-form-card form textarea {
    transition: all 0.25s ease;
    background: #ffffff;
}

/* Hover animation for each field */
.contact-form-card form input:hover,
.contact-form-card form select:hover,
.contact-form-card form textarea:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    background: #fffaf0; /* light warm tint */
    border-color: #e61e29;
}


/* Hover animation + hand cursor for each field */
.contact-form-card form input:hover,
.contact-form-card form select:hover,
.contact-form-card form textarea:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    background: #fffaf0;
    border-color: #e61e29;
    cursor: pointer;    /* hand pointer */
}


/* Base button style (you already have this, but keep transition for animation) */
.contact-form-card form button {
    margin-top: 1.5rem;
    padding: 0.8rem 2rem;
    background-color: #e61e29;
    color: white;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover animation — smooth, premium */
.contact-form-card form button:hover {
    transform: translateY(-4px) scale(1.03);
    background-color: #ff2e3a; /* brighter berry-red */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.visit-card {
    margin-top: 25px;
    background: rgba(255,255,255,0.92);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
    overflow: hidden;
}

.visit-label {
    font-size: 0.95rem;
    letter-spacing: 2px;
    color: #888;
}

.visit-assemble {
    display: inline-flex;
    gap: 2px;
    font-size: 3.2rem;
    font-weight: 800;
    color: #e61e29;
    margin: 10px 0;
    position: relative;
}

.visit-piece {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0.4);
    animation:
        assemble 1.2s ease-out forwards,
        disassemble 1.2s ease-in forwards;
    animation-delay:
        var(--delay),
        calc(var(--delay) + 3.5s);
}

/* Assemble animation */
@keyframes assemble {
    to {
        opacity: 1;
        transform: translate(0,0) scale(1);
    }
}

/* Disassemble animation */
@keyframes disassemble {
    to {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.4);
    }
}


.visit-dashboard {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    background: rgba(255,255,255,0.85);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    flex-wrap: wrap;
}

/* LEFT TOTAL BOX */
.visit-total-box {
    min-width: 220px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: inset 0 0 0 2px #e61e29;
}

.visit-title {
    letter-spacing: 2px;
    color: #777;
    font-size: 0.85rem;
}

.visit-number {
    font-size: 3rem;
    font-weight: 800;
    color: #e61e29;
    margin: 6px 0;
}

.visit-sub {
    font-size: 0.85rem;
    color: #999;
}

/* RIGHT BLOCKS */
.visit-block {
    flex: 1;
    min-width: 180px;
}

.visit-block h4 {
    margin: 6px 0;
    font-size: 0.95rem;
    color: #e61e29;
}

/* ROW ALIGNMENT FIX */
.visit-row {
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    font-size: 0.85rem;
    padding: 3px 0;
    color: #444;
}

.visit-label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-count-text {
    text-align: right;
    font-weight: 600;
    color: #000;
}



.visit-dashboard {
    display: flex;
    gap: 24px;
    margin-top: 30px;
    background: rgba(255,255,255,0.85);
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    flex-wrap: wrap;
}

/* LEFT BOX (UNCHANGED FEEL) */
.visit-total-box {
    min-width: 230px;
    background: #fff;
    border-radius: 22px;
    padding: 22px;
    text-align: center;
    box-shadow: inset 0 0 0 2px #e61e29;
}

/* TABLE WRAPPER */
.visit-table-wrapper {
    flex: 1;
    overflow-x: auto;
}

/* TABLE */
.visit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.visit-table thead th {
    text-align: left;
    font-weight: 600;
    color: #e61e29;
    padding: 10px 12px;
    border-bottom: 2px solid rgba(230,30,41,0.2);
}

.visit-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: #444;
}

/* Right-aligned count */
.count-col {
    text-align: right;
    font-weight: 700;
    color: #000;
}

/* Smooth hover */
.visit-table tbody tr:hover {
    background: rgba(230,30,41,0.06);
}

/* Rounded corners illusion */
.visit-table tbody tr:last-child td {
    border-bottom: none;
}


.visit-table-wrapper {
    flex: 1;
    overflow-x: auto;
}

.visit-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.visit-compare-table thead th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
    color: #e61e29;
    border-bottom: 2px solid rgba(230,30,41,0.25);
}

.visit-compare-table tbody td {
    padding: 10px 12px;
    color: #444;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: top;
}

.visit-compare-table tbody tr:hover {
    background: rgba(230,30,41,0.06);
}

.visit-compare-table span {
    color: #000;
    font-weight: 600;
}







/* =========================
   MOBILE RESPONSIVE FIX
========================= */

/* Hide mobile groups by default (desktop) */
.visit-mobile-groups {
    display: none;
}

/* Mobile layout */
@media (max-width: 768px) {

    /* Stack dashboard vertically */
    .visit-dashboard {
        flex-direction: column;
    }

    /* Hide desktop comparison table */
    .visit-table-wrapper {
        display: none;
    }

    /* Show mobile stacked groups */
    .visit-mobile-groups {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 20px;
    }

    .visit-mobile-box {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    .visit-mobile-box h4 {
        margin-bottom: 10px;
        color: #e61e29;
        font-size: 0.95rem;
    }
}






.visit-divider {
    height: 1px;
    background: rgba(230,30,41,0.2);
    margin: 14px 0;
}

.visit-unique {
    margin-top: 6px;
}

.visit-unique-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
}

.visit-unique-label {
    font-size: 0.8rem;
    color: #777;
    letter-spacing: 0.5px;
}




/* Count column */
.count-col {
    text-align: right;
    font-weight: 700;
    color: #000;
    width: 70px;
}

/* Desktop only */
.desktop-only {
    display: block;
}

/* Hide desktop table on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}



/* Desktop analytics table */
.visit-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Header cells */
.visit-compare-table thead th {
    padding: 12px;
    font-weight: 600;
    color: #e61e29;
    border-bottom: 2px solid rgba(230,30,41,0.25);
    border-right: 1px solid rgba(0,0,0,0.12);
}

/* Body cells */
.visit-compare-table tbody td {
    padding: 10px 12px;
    color: #444;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    border-right: 1px solid rgba(0,0,0,0.12);
    vertical-align: top;
}

/* Remove right border on last column */
.visit-compare-table thead th:last-child,
.visit-compare-table tbody td:last-child {
    border-right: none;
}

/* Count column styling */
.count-col {
    text-align: right;
    font-weight: 700;
    color: #000;
    width: 70px;
}

/* Subtle hover */
.visit-compare-table tbody tr:hover {
    background: rgba(230,30,41,0.05);
}


/* Whole card hover */
.visit-dashboard {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.visit-dashboard:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.22);
}


/* Left summary box hover */
.visit-total-box {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.visit-dashboard:hover .visit-total-box {
    box-shadow:
        inset 0 0 0 2px #e61e29,
        0 10px 30px rgba(230,30,41,0.35);
    transform: scale(1.02);
}


/* Table row hover */
.visit-compare-table tbody tr {
    transition: background 0.25s ease, transform 0.25s ease;
}

.visit-compare-table tbody tr:hover {
    background: rgba(230,30,41,0.08);
    transform: translateX(2px);
}



/* Column group emphasis */
.visit-compare-table td,
.visit-compare-table th {
    transition: background-color 0.25s ease;
}

.visit-compare-table td:hover,
.visit-compare-table th:hover {
    background-color: rgba(0,0,0,0.03);
}



/* =========================
   MINI PROGRESS BARS
========================= */
.count-col {
    position: relative;
}

/* Mini bar base */
.mini-bar {
    margin-top: 6px;
    height: 4px;
    background: rgba(230,30,41,0.15);
    border-radius: 4px;
    overflow: hidden;
}

/* Bar fill starts collapsed */
.mini-bar-fill {
    height: 100%;
    width: 0%;
    background: #e61e29;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* Animate to target width when the card is hovered */
.visit-dashboard:hover .mini-bar-fill {
    width: var(--bar-w);
}

/* Optional: slight emphasis on row hover */
.visit-compare-table tbody tr:hover .mini-bar-fill {
    filter: brightness(1.1);
}


/* Disable hover animations on touch devices */
@media (hover: none) {
    .visit-dashboard:hover .mini-bar-fill {
        width: var(--bar-w);
    }
}



.mini-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: 0%;
    background: #e61e29;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Animate bar width using CSS variables */
.count-col[data-value][data-max] .mini-bar::after {
    width: calc(100% * (attr(data-value number) / attr(data-max number)));
}

/* =========================
   COUNT EMPHASIS ON HOVER
========================= */
.visit-compare-table tbody tr:hover .count-col {
    animation: countPulse 0.6s ease;
}

@keyframes countPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* =========================
   TOP RANK HIGHLIGHT (#1)
========================= */
.visit-compare-table td[data-rank="1"],
.visit-compare-table th[data-rank="1"] {
    background: linear-gradient(
        to right,
        rgba(230,30,41,0.10),
        rgba(230,30,41,0.02)
    );
    font-weight: 600;
}

/* =========================
   ROW & COLUMN HOVER POLISH
========================= */
.visit-compare-table tbody tr {
    transition: background 0.25s ease, transform 0.25s ease;
}

.visit-compare-table tbody tr:hover {
    background: rgba(230,30,41,0.08);
    transform: translateX(2px);
}

/* =========================
   KEYBOARD ACCESSIBILITY
========================= */
.visit-compare-table td:focus-visible {
    outline: 2px solid #e61e29;
    outline-offset: -2px;
}

/* =========================
   DISABLE HOVER ON TOUCH
========================= */
@media (hover: none) {
    .visit-compare-table tbody tr:hover,
    .visit-dashboard:hover {
        transform: none;
        box-shadow: none;
        animation: none;
    }
}



.mini-bar-fill { transition-delay: 0.05s; }
.visit-compare-table tbody tr:nth-child(2) .mini-bar-fill { transition-delay: 0.10s; }
.visit-compare-table tbody tr:nth-child(3) .mini-bar-fill { transition-delay: 0.15s; }



.mini-bar { opacity: 0; }
.visit-dashboard:hover .mini-bar { opacity: 1; transition: opacity 0.2s ease; }

.visit-table-wrapper {
    overflow-x: hidden;
}




/* Desktop: scrollable comparison table body */
.desktop-only .visit-compare-table {
    table-layout: fixed;
}

/* Make tbody scroll */
.desktop-only .visit-compare-table tbody {
    display: block;
    max-height: 240px;   /* ~4 rows */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Keep header aligned with body */
.desktop-only .visit-compare-table thead,
.desktop-only .visit-compare-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Optional: nicer scrollbar (WebKit browsers) */
.desktop-only .visit-compare-table tbody::-webkit-scrollbar {
    width: 8px;
}

.desktop-only .visit-compare-table tbody::-webkit-scrollbar-thumb {
    background: rgba(230,30,41,0.4);
    border-radius: 4px;
}

.desktop-only .visit-compare-table tbody::-webkit-scrollbar-track {
    background: transparent;
}