/* ============================================================
   customer-link-common.css
   HMH 2026 design - shared stylesheet for the customer-link area.
   Used by: customer-link/index.php, ability-questionnaire/index.php,
            registration-form/index.php, registration-form/thankyou.php.
   Page-specific background image stays inline (dynamic per page).
   (Renamed from new-design.css on 2026-06-03.)
   ============================================================ */

/* ----- dark header bar ----- */
.header-logo {
    position: relative;
    z-index: 1000;
    width: 100%;
    background-color: #313336;
}

/* ----- header: white/grey logo (left) + 1978 Pioneers badge (right) ----- */
.header-row {
    width: 100%;
}

.header-main-logo {
    height: 90px;
    width: auto;
    max-width: 90%;
    margin-left: 10px;
}

.header-badge {
    height: 90px;
    width: auto;
    margin-right: 16px;
}

/* ----- content layout: single centered column ----- */
.container.new-design {
    max-width: 720px;
}

/* ----- semi-transparent white overlay card (same tokens as ability-questionnaire .screen_body) ----- */
/* use either `.container.new-design .card.bg-light` OR `.overlay-card` class directly on a card */
.container.new-design .card.bg-light,
.card.overlay-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    color: #393939;
}

.container.new-design .card .card-body,
.card.overlay-card .card-body {
    padding: 28px 32px;
}

/* participant sub-cards (rendered by JS) - slightly lighter */
#online-checkin-status .card.bg-light {
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none;
}

.checkin-note {
    color: #393939;
    margin-bottom: 16px;
}

/* ----- orange text links (replaces yellow chips) ----- */
.complete-link {
    color: #E8821E;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    padding: 4px 2px;
}

.complete-link:hover,
.complete-link:focus {
    color: #c96c12;
    text-decoration: underline;
}

/* ----- "Please complete HERE" as a tappable button (mobile-friendly) ----- */
.complete-link--btn {
    border: 1px solid #E8821E;
    border-radius: 6px;
    padding: 8px 16px;
    background-color: #fff8f1;
}

.complete-link--btn:hover,
.complete-link--btn:focus {
    background-color: #E8821E;
    color: #fff;
    text-decoration: none;
}

/* ----- completed status badge (green) ----- */
.status-completed {
    display: inline-block;
    background-color: #198754;
    color: #fff;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
}

/* larger tap target for buttons */
#online-checkin-status .btn {
    padding: 8px 16px;
}

/* ----- mobile ----- */
@media screen and (max-width: 768px) {
    .header-main-logo,
    .header-badge {
        height: 56px;
    }

    .container.new-design .card .card-body,
    .card.overlay-card .card-body {
        padding: 20px;
    }
}