/* ------------------------------------------------------------------
   3-stage Contact Us
   ------------------------------------------------------------------ */

#contactus .cu-step   { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #999; margin-bottom: 4px; }
#contactus .cu-intro  { font-size: 15px; color: #555; margin-bottom: 22px; }
#contactus .cu-hint   { font-size: 12px; margin-bottom: 10px; }
#contactus fieldset   { margin-bottom: 26px; }
#contactus legend     { font-size: 15px; font-weight: 600; padding-bottom: 6px; }

/* ---- office details panel ---------------------------------------- */
.cu-office {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 28px;
    padding: 22px 10px;
    background: #fafbfc;
    border: 1px solid #e6e9ec;
    border-radius: 8px;
}

.cu-office-col {
    flex: 1 1 240px;
    padding: 4px 20px;
    border-left: 1px solid #e6e9ec;
}

.cu-office-col:first-child { border-left: 0; }

.cu-office-h {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #23a1d1;
}

.cu-office-address {
    margin: 0 0 8px;
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.cu-office-hours {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.55;
    color: #444;
}

.cu-office-map { font-size: 13px; }

.cu-office-icons {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cu-office-icons a { display: inline-block; line-height: 0; margin-right: 10px; }
.cu-office-icons img { transition: transform .15s ease; }
.cu-office-icons a:hover img { transform: scale(1.08); }
.cu-office-email img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
    .cu-office-col {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px solid #e6e9ec;
        padding-top: 16px;
        margin-top: 14px;
    }

    .cu-office-col:first-child { border-top: 0; padding-top: 4px; margin-top: 0; }
}

/* ---- icon grid: 3 across, wraps to as many rows as needed -------- */
.cu-icon-grid {
    --cu-icon-size: 128px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.cu-icon-cell {
    width: 33.3333%;
    padding: 8px;
    box-sizing: border-box;
}

.cu-icon-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 12px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cu-icon-btn:hover,
.cu-icon-btn:focus {
    border-color: #23a1d1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
    outline: none;
}

.cu-icon-btn.cu-active {
    border-color: #23a1d1;
    background: #f2fafd;
    box-shadow: inset 0 0 0 1px #23a1d1;
}

.cu-icon-img {
    display: block;
    width: 128px;                       /* fallback if CSS vars unsupported */
    height: 128px;
    width: var(--cu-icon-size, 128px);
    height: var(--cu-icon-size, 128px);
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 12px;
}

.cu-icon-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #333;
}

/* ---- tooltip: fixed 200px wide, height follows the text ---------- */
.cu-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 60;
    width: 200px;
    margin-left: -100px;
    margin-bottom: 10px;
    padding: 9px 11px;
    background: #2b2b2b;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    pointer-events: none;
}

.cu-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #2b2b2b;
}

.cu-icon-btn:hover .cu-tooltip,
.cu-icon-btn:focus .cu-tooltip,
.cu-icon-btn.cu-touch .cu-tooltip {
    opacity: 1;
    visibility: visible;
}

/* first column opens right, last column opens left, so nothing clips */
.cu-icon-cell:nth-child(3n+1) .cu-tooltip { left: 0;  margin-left: 0; }
.cu-icon-cell:nth-child(3n+1) .cu-tooltip::after { left: 32px; }
.cu-icon-cell:nth-child(3n)   .cu-tooltip { left: auto; right: 0; margin-left: 0; }
.cu-icon-cell:nth-child(3n)   .cu-tooltip::after { left: auto; right: 26px; }

@media (max-width: 991px) {
    .cu-icon-grid { --cu-icon-size: 104px; }
}

@media (max-width: 480px) {
    .cu-icon-cell { width: 50%; }
    .cu-icon-grid { --cu-icon-size: 84px; }
    .cu-icon-img  { height: auto; }
    .cu-icon-cell .cu-tooltip { left: 0; right: auto; margin-left: 0; }
    .cu-icon-label { font-size: 13px; }
}

/* ---- lookahead --------------------------------------------------- */
.cu-autocomplete-wrap { position: relative; }

.cu-suggest {
    display: none;
    position: absolute;
    z-index: 70;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 240px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.cu-suggest li {
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}

.cu-suggest li:hover,
.cu-suggest li.cu-hl { background: #f0f7fb; }

/* ---- rating ------------------------------------------------------ */
.cu-rating { display: flex; flex-wrap: wrap; gap: 6px; }

.cu-rating-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-weight: normal;
    cursor: pointer;
}

.cu-rating-item:hover { border-color: #23a1d1; }
.cu-stars { color: #f0ad4e; letter-spacing: 1px; }
.cu-rating-label { font-size: 12px; color: #666; }

/* ---- verification code box --------------------------------------- */
.cu-code-input {
    max-width: 220px;
    font-size: 22px;
    letter-spacing: .45em;
    text-align: center;
    font-family: Menlo, Consolas, monospace;
}

.cu-verify-form { max-width: 420px; }

/* ---- honeypot: off-screen, not display:none (bots skip those) ----- */
.cu-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}