/* ============================================
   ONLINE CHECK-IN PAGE STYLES
   ============================================ */

.container-body-layout {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checkin-page-wrapper {
    min-height: 100vh;
    background-color: var(--bg-secondary);
    padding-bottom: var(--px-76);
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Header */
.checkin-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--px-16) var(--px-24);
    max-width: var(--px-800);
    margin: 0 auto;
    width: 100%;
}

.btn-back-checkin {
    display: flex;
    align-items: center;
    gap: var(--px-4);
    color: var(--hotel-primary-light);
    background: none;
    border: none;
    font: var(--s-14);
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

    .btn-back-checkin:hover {
        color: var(--hotel-primary-dark);
    }

.back-icon-checkin {
    width: var(--px-20);
    height: var(--px-20);
}

/* Content */
.checkin-content {
    max-width: var(--px-800);
    margin: 0 auto;
    padding: var(--px-20) var(--px-16);
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.checkin-title {
    font: normal normal 600 var(--s-24);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--px-24);
}

/* Reservation Details Card */
.reservation-details-card {
    background: var(--hotel-pearl);
    border-radius: var( --radius-lg);
    padding: var( --px-24);
    margin-bottom: var( --px-32);
}

.details-card-title {
    font: normal normal 600 var(--s-18);
    font-weight: 600;
    color: var(--hotel-primary);
    margin-bottom: var(--px-16);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
    margin-bottom: var(--px-16);
}

.detail-item-checkin {
    display: flex;
    flex-direction: column;
}

.detail-label-checkin {
    font: var(--s-14);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--px-4);
}

.detail-value-checkin {
    font: var(--s-14);
    color: var(--text-primary);
    font-weight: 500;
}

.assistance-notice {
    padding-top: var(--px-16);
    border-top: 1px solid #bfdbfe;
}

.assistance-text {
    font: var(--s-14);
    color: var(--hotel-primary);
    line-height: 1.5;
}

.assistance-label {
    font-weight: 600;
}

.assistance-link {
    color: var(--hotel-primary-light);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

    .assistance-link:hover {
        color: var(--hotel-primary-dark);
    }

/* Reserved Guests Section */
.reserved-guests-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.guests-section-title {
    font: var(--s-18);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--px-4);
}

.guests-section-subtitle {
    font: var(--s-14);
    color: var(--text-secondary);
    margin-bottom: var(--px-16);
}

.guests-list {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
}

/* Guest Card */
.guest-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    transition: box-shadow var(--transition-fast);
}

    .guest-card:hover {
        box-shadow: var(--shadow-soft);
    }

.guest-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-16);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    user-select: none;
}

    .guest-card-header:hover {
        background-color: var(--bg-hover);
    }

.guest-header-left {
    display: flex;
    align-items: center;
    gap: var(--px-16);
    flex: 1;
}

.guest-avatar {
    width: var(--px-48);
    height: var(--px-48);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guest-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.guest-avatar-text {
    color: var(--hotel-primary);
    font-weight: 700;
    font: var(--s-18);
}

.guest-info {
    flex: 1;
    min-width: 0;
}

.guest-name {
    font: var(--s-16);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--px-6) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-badges {
    display: flex;
    align-items: center;
    gap: var(--px-8);
    flex-wrap: wrap;
    margin-top: 8px;
}

.guest-status-badge {
    padding: var(--px-4) var(--px-10);
    border-radius: var(--radius-lg);
    font: var(--s-12);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--px-4);
}

.status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.status-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.guest-type-badges {
    display: flex;
    gap: var(--px-6);
    flex-wrap: wrap;
}

.guest-type-badge {
    padding: var(--px-4) var(--px-8);
    border-radius: var(--radius-md);
    font: var(--s-11);
    font-weight: 500;
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.primary-badge {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: var(--hotel-primary) !important;
    font-weight: 600 !important;
}

.guest-expand-icon {
    width: var(--px-24);
    height: var(--px-24);
    color: var(--text-secondary);
    transition: transform var(--transition-smooth);
    flex-shrink: 0;
}

.guest-card.expanded .guest-expand-icon {
    transform: rotate(180deg);
}

/* Guest Card Body */
.guest-card-body {
    border-top: 1px solid var(--border-color);
    padding: 0;
    display: none;
    background-color: #fafafa;
}

.guest-card.expanded .guest-card-body {
    display: block;
    padding: var(--px-20) var(--px-16);
}

/* Required mark */
.required-mark {
    color: var(--color-error);
    margin-left: var(--px-2);
    font-weight: 600;
}

/* ID Upload Section */
.id-upload-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
    margin-bottom: var(--px-24);
}

.id-upload-box {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    min-height: var(--px-200);
    background-color: var(--bg-primary);
    overflow: hidden;
}

    .id-upload-box:hover:not(.has-file):not(.loading) {
        background-color: var(--bg-hover);
        border-color: var(--text-disabled);
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft);
    }

    .id-upload-box.has-file {
        border-color: var(--color-green);
        border-style: solid;
        background-color: #ecfdf5;
        padding: var(--px-8);
    }

    .id-upload-box.loading {
        border-color: var(--hotel-primary-light);
        background-color: #eff6ff;
        cursor: wait;
    }

        .id-upload-box.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: var(--px-40);
            height: var(--px-40);
            margin: calc(var(--px-20) * -1) 0 0 calc(var(--px-20) * -1);
            border: 4px solid #dbeafe;
            border-top-color: var(--hotel-primary-light);
            border-radius: var(--radius-full);
            animation: spin 0.8s linear infinite;
        }

        .id-upload-box.loading .id-upload-icon,
        .id-upload-box.loading .id-upload-label,
        .id-upload-box.loading .id-upload-hint {
            opacity: 0.3;
        }

.id-upload-icon {
    width: var(--px-40);
    height: var(--px-40);
    color: var(--text-disabled);
    margin-bottom: var(--px-12);
    transition: all var(--transition-smooth);
}

.id-upload-box:hover:not(.has-file):not(.loading) .id-upload-icon {
    color: var(--text-secondary);
    transform: scale(1.1);
}

.id-upload-box.has-file .id-upload-icon {
    display: none;
}

.id-upload-label {
    font: var(--s-13);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--px-6);
    display: block;
}

.id-upload-hint {
    font: var(--s-12);
    color: var(--text-disabled);
    display: block;
}

.id-upload-box.has-file .id-upload-label,
.id-upload-box.has-file .id-upload-hint {
    display: none;
}

.id-upload-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--bg-primary);
}

.id-upload-box.has-file .id-upload-preview {
    display: flex;
}

.id-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.id-upload-input {
    display: none !important;
}

/* Remove image button */
.btn-remove-image {
    position: absolute;
    top: var(--px-12);
    right: var(--px-12);
    width: var(--px-32);
    height: var(--px-32);
    border-radius: var(--radius-full);
    background-color: rgba(220, 38, 38, 0.95);
    border: 2px solid var(--bg-primary);
    color: var(--bg-primary);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
    padding: 0;
    box-shadow: var(--shadow-soft);
}

    .btn-remove-image svg {
        width: var(--px-18);
        height: var(--px-18);
    }

    .btn-remove-image:hover {
        background-color: rgba(185, 28, 28, 1);
        transform: scale(1.15);
        box-shadow: var(--shadow-md);
    }

    .btn-remove-image:active {
        transform: scale(0.95);
    }

/* Show remove button when box has file */
.id-upload-box.has-file .btn-remove-image {
    display: flex;
}

/* Contact Information Section */
.contact-info-section {
    margin-top: var(--px-24);
}

.contact-info-title {
    font: var(--s-15);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--px-16);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    grid-template-columns: 1fr 1fr;
    display: grid;
}

.form-field-checkin {
    display: flex;
    flex-direction: column;
}

.form-label-checkin {
    display: block;
    font: var(--s-14);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--px-8);
}

.form-input-checkin,
.form-select-checkin {
    width: 100%;
    padding: var(--px-10) var(--px-14);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font: normal normal 500 var(--s-14);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
}

    .form-input-checkin:hover,
    .form-select-checkin:hover {
        border-color: var(--text-disabled);
    }

    .form-input-checkin:focus,
    .form-select-checkin:focus {
        outline: none;
        border-color: var(--hotel-primary-light);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-input-checkin::placeholder {
        color: var(--text-disabled);
    }

    .form-input-checkin:disabled,
    .form-select-checkin:disabled {
        background-color: var(--bg-hover);
        cursor: not-allowed;
    }

/* Textarea */
textarea.form-input-checkin {
    resize: vertical;
    min-height: var(--px-80);
    line-height: 1.5;
}

/* Actions Section */
.checkin-actions-section {
    border-top: 1px solid var(--border-color);
    padding-top: var(--px-24);
    margin-top: var(--px-32);
}

.btn-continue-checkin {
    width: 100%;
    padding: var(--px-14) var(--px-24);
    background: var(--bg-btn);
    color: var(--txt-btn);
    border: none;
    border-radius: var(--radius-md);
    font: normal normal 600 var(--s-16);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
    font-weight: 600;
}

    .btn-continue-checkin:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
    }

    .btn-continue-checkin:active {
        transform: translateY(0);
    }

    .btn-continue-checkin:disabled {
        background: var(--text-disabled);
        cursor: not-allowed;
        box-shadow: none;
    }

.resort-info-link-wrapper {
    text-align: center;
    margin: var(--px-20) 0;
    margin-top: 4px;
}

.btn-resort-info {
    background: none;
    border: none;
    font: var(--s-14);
    font-weight: 600;
    color: var(--hotel-primary-light);
    cursor: pointer;
    transition: color var(--transition-fast);
    text-decoration: underline;
    padding: var(--px-8);
}

    .btn-resort-info:hover {
        color: var(--hotel-primary-dark);
    }

/* Loading states */
.loading-spinner {
    display: inline-block;
    width: var(--px-20);
    height: var(--px-20);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    border-top-color: var(--bg-primary);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ID scan guide */
.id-scan-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 60%;
    border: 3px solid rgba(37, 99, 235, 0.8);
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: 5;
}

    .id-scan-guide::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border: 2px dashed rgba(37, 99, 235, 0.5);
        border-radius: var(--radius-lg);
        animation: dash 20s linear infinite;
    }

    .id-scan-guide::after {
        content: 'Position ID card within frame';
        position: absolute;
        bottom: calc(var(--px-32) * -1);
        left: 50%;
        transform: translateX(-50%);
        font: var(--s-11);
        color: var(--hotel-primary-light);
        font-weight: 600;
        white-space: nowrap;
        background-color: var(--bg-primary);
        padding: var(--px-4) var(--px-12);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
    }

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}

/* Corner markers for ID scan guide */
.id-scan-corner {
    position: absolute;
    width: var(--px-20);
    height: var(--px-20);
    border: 3px solid var(--hotel-primary-light);
}

    .id-scan-corner.top-left {
        top: -3px;
        left: -3px;
        border-right: none;
        border-bottom: none;
    }

    .id-scan-corner.top-right {
        top: -3px;
        right: -3px;
        border-left: none;
        border-bottom: none;
    }

    .id-scan-corner.bottom-left {
        bottom: -3px;
        left: -3px;
        border-right: none;
        border-top: none;
    }

    .id-scan-corner.bottom-right {
        bottom: -3px;
        right: -3px;
        border-left: none;
        border-top: none;
    }

/* ============================================
   REGISTRATION FORM MODAL STYLES
   ============================================ */

.registration-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    padding: var(--px-20);
}

    .registration-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.registration-modal-container {
    background-color: var(--bg-primary);
    border-radius: var(--radius-xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform var(--transition-smooth);
}

.registration-modal-overlay.show .registration-modal-container {
    transform: scale(1);
}

.registration-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-20) var(--px-24);
    border-bottom: 1px solid var(--border-color);
    background: #06718226;
    padding-top: var(--px-36);
}

.registration-modal-title {
    font: var(--s-20);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.btn-close-registration {
    width: var(--px-32);
    height: var(--px-32);
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
    border: none;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-close-registration svg {
        width: var(--px-20);
        height: var(--px-20);
    }

    .btn-close-registration:hover {
        background-color: rgba(220, 38, 38, 0.2);
        transform: scale(1.1);
        color: var(--bg-primary);
    }

.registration-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--px-24);
}

/* Hotel Header */
.registration-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--px-20);
    margin-bottom: var(--px-24);
    padding-bottom: var(--px-20);
    border-bottom: 2px solid var(--border-color);
}

    .registration-header .hotel-logo {
        width: unset;
    }

.hotel-logo img {
    max-width: var(--px-80);
    min-height: var(--px-80);
    object-fit: cover;
    border-radius: var(--radius-full);
    border: 3px solid var(--hotel-gold);
    height: 100%;
    width: 100%;
}

.hotel-details {
    flex: 1;
    text-align: right;
}

    .hotel-details h3 {
        font: var(--s-18);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--px-4) 0;
    }

    .hotel-details p {
        font: var(--s-13);
        color: var(--text-secondary);
        margin: var(--px-2) 0;
    }

/* Registration Details Grid */
.registration-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
    margin-bottom: var(--px-24);
}

.detail-col {
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
}

    .detail-col.col-span-2 {
        grid-column: span 2;
    }

    .detail-col h4 {
        font: var(--s-13);
        font-weight: 500;
        color: var(--text-secondary);
        margin: 0;
    }

    .detail-col p {
        font: var(--s-14);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

/* Policies Section */
.registration-policies {
    margin-bottom: var(--px-24);
    padding: var(--px-20);
    background-color: var(--bg-hover);
    border-radius: var(--radius-lg);
}

    .registration-policies h3 {
        font: var(--s-16);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--px-16) 0;
    }

.policy-section {
    background-color: var(--bg-primary);
    padding: var(--px-16);
    border-radius: var(--radius-md);
    margin-bottom: var(--px-12);
}

    .policy-section:last-child {
        margin-bottom: 0;
    }

    .policy-section h4 {
        font: var(--s-14);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--px-12) 0;
    }

.policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .policy-list li {
        font: var(--s-12);
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: var(--px-6);
        padding-left: var(--px-16);
        position: relative;
    }

        .policy-list li::before {
            content: '-';
            position: absolute;
            left: 0;
            color: var(--text-disabled);
            font-weight: 700;
        }

        .policy-list li strong {
            color: var(--hotel-primary-light);
            font-weight: 600;
        }

/* Agreement Section */
.agreement-section {
    background-color: var(--hotel-accent);
    padding: var(--px-16);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--hotel-gold);
    margin-top: var(--px-12);
}

    .agreement-section h4 {
        font: var(--s-14);
        font-weight: 700;
        color: #92400e;
        margin: 0 0 var(--px-12) 0;
    }

    .agreement-section p {
        font: var(--s-12);
        line-height: 1.6;
        margin-bottom: var(--px-8);
        color: #78350f;
    }

.text-english {
    font-style: italic;
}

.text-vietnamese {
    font-weight: 500;
}

/* Signature Section */
.signature-section {
    margin-bottom: var(--px-24);
}

    .signature-section h3 {
        font: var(--s-16);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--px-8) 0;
    }

.signature-subtitle {
    font: var(--s-13);
    color: var(--text-secondary);
    margin: 0 0 var(--px-20) 0;
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--px-16);
}

.signature-box {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--px-16);
}

    .signature-box h4 {
        font: var(--s-14);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 var(--px-4) 0;
    }

.signature-desc {
    font: var(--s-12);
    color: var(--text-secondary);
    margin: 0 0 var(--px-12) 0;
}

.signature-pad-container {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 150px;
    cursor: crosshair;
    touch-action: none;
    border-radius: var(--radius-sm);
}

.btn-clear-signature {
    position: absolute;
    top: var(--px-8);
    right: var(--px-8);
    display: flex;
    align-items: center;
    gap: var(--px-4);
    padding: var(--px-6) var(--px-10);
    background-color: rgba(220, 38, 38, 0.9);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-sm);
    font: var(--s-11);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

    .btn-clear-signature svg {
        width: var(--px-14);
        height: var(--px-14);
    }

    .btn-clear-signature:hover {
        background-color: rgba(185, 28, 28, 1);
        transform: scale(1.05);
    }

/* Registration Actions */
.registration-actions {
    display: flex;
    gap: var(--px-12);
    justify-content: flex-end;
    padding-top: var(--px-20);
    border-top: 1px solid var(--border-color);
}

.btn-back-registration {
    padding: var(--px-10) var(--px-20);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font: var(--s-14);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-back-registration:hover {
        background-color: var(--bg-hover);
        border-color: var(--text-disabled);
    }

.btn-confirm-checkin {
    padding: var(--px-10) var(--px-24);
    background: linear-gradient(135deg, var(--hotel-primary-light) 0%, var(--hotel-primary-dark) 100%);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    font: var(--s-14);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

    .btn-confirm-checkin:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
    }

    .btn-confirm-checkin:disabled {
        background: var(--text-disabled);
        cursor: not-allowed;
        box-shadow: none;
    }

/* ============================================
   CHECK-IN SUCCESS PAGE STYLES
   ============================================ */

.checkin-success-wrapper {
    min-height: 100dvh;
    background-color: var(--bg-secondary);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.checkin-success-container {
    max-width: 672px;
    margin: 0 auto;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Success Header */
.success-header {
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
}

.success-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-16) var(--px-24);
}

.success-title {
    font: var(--s-20);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-home-success {
    display: flex;
    align-items: center;
    gap: var(--px-4);
    color: var(--hotel-primary-light);
    background: none;
    border: none;
    font: var(--s-14);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-home-success svg {
        width: var(--px-20);
        height: var(--px-20);
    }

    .btn-home-success:hover {
        color: var(--hotel-primary-dark);
    }

/* Success Content */
.success-content {
    padding: var(--px-20) var(--px-24) var(--px-40);
}

/* Success Animation */
.success-animation {
    display: flex;
    justify-content: center;
    margin-bottom: var(--px-32);
}

.success-circle-wrapper {
    position: relative;
    width: var(--px-96);
    height: var(--px-96);
}

.success-circle-bg {
    position: absolute;
    inset: 0;
    background-color: #dcfce7;
    border-radius: var(--radius-full);
    animation: scaleIn 0.5s ease-out;
}

.success-check-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .success-check-icon svg {
        width: var(--px-64);
        height: var(--px-64);
        color: var(--color-green);
    }

.check-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkDraw 0.7s ease-in-out 0.3s forwards;
}

.success-circle-ping {
    position: absolute;
    inset: 0;
    background-color: var(--color-green);
    opacity: 0.3;
    border-radius: var(--radius-full);
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Success Message */
.success-message {
    text-align: center;
    margin-bottom: var(--px-28);
}

.success-welcome {
    font: var(--s-24);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--px-8) 0;
}

.success-subtitle {
    font: var(--s-14);
    color: var(--text-secondary);
    margin: 0;
}

/* QR Code Section */
.qr-code-section {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--px-24);
    margin-bottom: var(--px-24);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-instruction {
    font: normal normal 400 var(--s-14);
    color: var(--text-secondary);
    margin: 0 0 var(--px-16) 0;
    text-align: center;
}

.qr-code-wrapper {
    background-color: var(--bg-primary);
    padding: var(--px-12);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--px-8);
    display: inline-block;
}

#qrCodeCanvas {
    width: var(--px-180);
    height: var(--px-180);
}

.qr-hint {
    font: var(--s-12);
    color: var(--text-disabled);
    margin: 0;
}

/* Booking Details Success */
.booking-details-success {
    background: #06718212;
    border-radius: var(--radius-lg);
    padding: var(--px-24);
    margin-bottom: var(--px-24);
}

.details-title {
    font: var(--s-18);
    font-weight: 600;
    color: var(--hotel-primary);
    margin: 0 0 var(--px-16) 0;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
}

.checkin-success-container .detail-item .detail-label {
    font: normal normal 500 var(--s-12);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.checkin-success-container .detail-item .detail-value {
    font: normal normal 600 var(--s-14);
    color: var(--text-primary);
    margin: 0;
}

/* Information Dropdown */
.info-dropdown-wrapper {
    position: relative;
    margin-bottom: var(--px-24);
}

.btn-toggle-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    padding: var(--px-12) var(--px-16);
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font: var(--s-14);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-toggle-info:hover {
        background-color: var(--bg-hover);
        border-color: var(--text-disabled);
    }

.toggle-icon {
    width: var(--px-20);
    height: var(--px-20);
    transition: transform var(--transition-smooth);
}

.btn-toggle-info.active .toggle-icon {
    transform: rotate(180deg);
}

.info-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--px-8));
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    z-index: 20;
}

    .info-dropdown-menu.show {
        max-height: 300px;
        opacity: 1;
        visibility: visible;
    }

.info-menu-item {
    width: 100%;
    text-align: left;
    padding: var(--px-12) var(--px-16);
    font: var(--s-14);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: none;
    border-bottom: 1px solid var(--bg-hover);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .info-menu-item:last-child {
        border-bottom: none;
    }

    .info-menu-item:hover {
        background-color: var(--bg-hover);
        color: var(--text-primary);
    }

/* Inclusions Section */
.inclusions-section {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--px-24);
    margin-bottom: var(--px-32);
}

.inclusions-title {
    font: var(--s-18);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--px-16) 0;
}

.inclusions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
}

.inclusion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--px-8);
}

.inclusion-icon {
    width: var(--px-20);
    height: var(--px-20);
    flex-shrink: 0;
    margin-top: var(--px-2);
}

    .inclusion-icon.check {
        color: var(--color-green);
    }

    .inclusion-icon.info {
        color: var(--hotel-primary-light);
    }

.inclusion-text {
    font: var(--s-14);
    color: var(--text-primary);
    line-height: 1.5;
}

    .inclusion-text.policy-title {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--px-4);
    }

.policy-subitems {
    list-style: none;
    padding-left: var(--px-20);
    margin-top: var(--px-4);
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
}

    .policy-subitems li {
        font: var(--s-12);
        color: var(--text-secondary);
        line-height: 1.4;
    }

/* Success Actions */
.success-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
}

.btn-back-folio {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--px-12) var(--px-16);
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font: var(--s-14);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-back-folio:hover {
        background-color: var(--bg-hover);
        border-color: var(--text-disabled);
    }

.btn-order-food {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    padding: var(--px-12) var(--px-16);
    background: linear-gradient(135deg, var(--hotel-primary-light) 0%, var(--hotel-primary-dark) 100%);
    border: none;
    border-radius: var(--radius-md);
    font: var(--s-14);
    font-weight: 600;
    color: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

    .btn-order-food svg {
        width: var(--px-20);
        height: var(--px-20);
    }

    .btn-order-food:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
    }

/* ============================================
   IMAGE SLIDER MODAL STYLES
   ============================================ */

.image-slider-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
}

    .image-slider-modal.show {
        opacity: 1;
        visibility: visible;
    }

.image-slider-container {
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 90vh;
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform var(--transition-smooth);
}

.image-slider-modal.show .image-slider-container {
    transform: scale(1);
}

.image-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-16) var(--px-20);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}

.image-slider-title {
    font: var(--s-18);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-close-slider {
    width: var(--px-36);
    height: var(--px-36);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-hover);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-close-slider:hover {
        background-color: var(--border-color);
        color: var(--text-primary);
    }

    .btn-close-slider svg {
        width: var(--px-20);
        height: var(--px-20);
    }

.image-slider-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.slider-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-images {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translateX(100%);
}

    .slider-image.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .slider-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        user-select: none;
    }

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--px-48);
    height: var(--px-48);
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

    .slider-nav:hover {
        background-color: var(--bg-primary);
        transform: translateY(-50%) scale(1.1);
    }

    .slider-nav svg {
        width: var(--px-24);
        height: var(--px-24);
    }

.slider-prev {
    left: var(--px-20);
}

.slider-next {
    right: var(--px-20);
}

.slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    padding: var(--px-16);
    background-color: rgba(0, 0, 0, 0.5);
}

.slider-dot {
    width: var(--px-8);
    height: var(--px-8);
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-smooth);
    padding: 0;
}

    .slider-dot.active {
        width: var(--px-24);
        background-color: var(--bg-primary);
        border-radius: var(--radius-sm);
    }

.slider-counter {
    position: absolute;
    bottom: var(--px-60);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--bg-primary);
    padding: var(--px-8) var(--px-16);
    border-radius: var(--px-20);
    font: var(--s-14);
    font-weight: 500;
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Tablet Landscape & Desktop (1024px and up) - default styles above */

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) {
    .checkin-header,
    .success-header-content {
        padding: var(--px-14) var(--px-20);
    }

    .checkin-content,
    .success-content {
        padding: var(--px-18) var(--px-16);
    }

    .registration-modal-container {
        max-width: 95%;
    }

    .registration-details-grid,
    .signature-grid {
        gap: var(--px-14);
    }
}

/* Mobile Landscape & Small Tablets (640px - 767px) */
@media (max-width: 767px) {
    .checkin-header,
    .success-header-content {
        padding: var(--px-12) var(--px-16);
    }

    .checkin-content,
    .success-content {
        padding: var(--px-16) var(--px-12);
    }

    .checkin-title {
        font: normal normal 600 var(--s-20);
        margin-bottom: var(--px-20);
    }

    .reservation-details-card,
    .booking-details-success {
        padding: var(--px-16);
        margin-bottom: var(--px-24);
    }

    .details-grid {
        gap: var(--px-12);
    }

    .id-upload-section {
        grid-template-columns: 1fr;
        gap: var(--px-12);
    }

    .id-upload-box {
        min-height: var(--px-180);
    }

    .guest-card-body {
        padding: var(--px-16) var(--px-12);
    }

    .guest-avatar {
        width: var(--px-40);
        height: var(--px-40);
    }

    .guest-avatar-text {
        font: var(--s-16);
    }

    .guest-name {
        font: var(--s-15);
    }

    .btn-continue-checkin,
    .btn-confirm-checkin,
    .btn-order-food {
        padding: var(--px-12) var(--px-20);
        font: normal normal 600 var(--s-16);
    }

    /* Registration Modal */
    .registration-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }

    .registration-modal-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .registration-details-grid,
    .signature-grid {
        gap: var(--px-12);
    }

    .detail-col.col-span-2 {
        grid-column: span 1;
    }

    .registration-header {
        flex-direction: column;
        text-align: center;
    }

    .hotel-details {
        text-align: center;
    }

    .registration-actions {
        flex-direction: column-reverse;
    }

    .btn-back-registration,
    .btn-confirm-checkin {
        width: 100%;
    }

    /* Success Page */
    .success-title {
        font: normal normal 600 var(--s-18);
    }

    .success-welcome {
        font: var(--s-20);
    }

    .success-actions {
        grid-template-columns: 1fr;
        gap: var(--px-12);
    }

    .btn-back-folio,
    .btn-order-food {
        width: 100%;
    }

    /* Image Slider */
    .image-slider-container {
        max-height: 100vh;
        border-radius: 0;
    }

    .slider-nav {
        width: var(--px-40);
        height: var(--px-40);
    }

        .slider-nav svg {
            width: var(--px-20);
            height: var(--px-20);
        }

    .slider-prev {
        left: var(--px-12);
    }

    .slider-next {
        right: var(--px-12);
    }

    .image-slider-title {
        font: var(--s-16);
    }

    /* Camera hint for mobile */
    .id-upload-hint::after {
        content: ' or tap to take photo';
    }
}

/* Small Mobile (480px - 639px) */
@media (max-width: 639px) {
    .checkin-header,
    .success-header-content {
        padding: var(--px-20);
        padding-top: var(--px-40);
    }

    .checkin-title {
        font: normal normal 600 var(--s-18);
        margin-bottom: var(--px-16);
    }

    .reservation-details-card,
    .booking-details-success {
        padding: var(--px-12);
        margin-bottom: var(--px-16);
        border-radius: var(--radius-md);
    }

    .details-card-title,
    .details-title,
    .guests-section-title {
        font: normal normal 600 var(--s-16);
    }

    .guest-avatar {
        width: var(--px-36);
        height: var(--px-36);
    }

    .guest-avatar-text {
        font: var(--s-14);
    }

    .guest-name {
        font: var(--s-14);
    }

    .id-upload-box {
        min-height: var(--px-160);
    }

    .id-upload-icon {
        width: var(--px-32);
        height: var(--px-32);
        margin-bottom: var(--px-8);
    }

    .btn-remove-image {
        width: var(--px-28);
        height: var(--px-28);
        top: var(--px-8);
        right: var(--px-8);
    }

        .btn-remove-image svg {
            width: var(--px-16);
            height: var(--px-16);
        }

    .form-input-checkin,
    .form-select-checkin {
        padding: var(--px-8) var(--px-12);
        font: normal normal 500 var(--s-13);
    }

    .btn-continue-checkin {
        padding: var(--px-10) var(--px-16);
        font: normal normal 600 var(--s-14);
    }

    .success-circle-wrapper {
        width: var(--px-80);
        height: var(--px-80);
    }

    .success-check-icon svg {
        width: var(--px-52);
        height: var(--px-52);
    }

    .success-welcome {
        font: var(--s-18);
    }

    #qrCodeCanvas {
        width: var(--px-160);
        height: var(--px-160);
    }

    .registration-modal-header,
    .image-slider-header {
        padding: var(--px-12) var(--px-16);
        padding-top: var(--px-36);
    }

    .slider-nav {
        width: var(--px-36);
        height: var(--px-36);
    }

    .slider-counter {
        bottom: var(--px-48);
        font: var(--s-12);
        padding: var(--px-6) var(--px-12);
    }
}

/* Extra Small Mobile (320px - 479px) */
@media (max-width: 479px) {
    .checkin-content,
    .success-content {
        padding: var(--px-12) var(--px-20);
        padding-top: var(--px-32);
        flex: 1;
        overflow: auto;
        padding-bottom: var(--px-96);
    }

    .checkin-title {
        font: normal normal 600 var(--s-16);
        margin-bottom: var(--px-12);
    }

    .reservation-details-card,
    .booking-details-success {
        padding: var(--px-12);
        margin-bottom: var(--px-16);
        border-radius: var(--radius-md);
    }

    .details-grid {
        gap: var(--px-10);
    }

    .guest-header-left {
        gap: var(--px-12);
    }

    .guest-avatar {
        width: var(--px-32);
        height: var(--px-32);
    }

    .guest-avatar-text {
        font: var(--s-12);
    }

    .guest-name {
        font: var(--s-13);
    }

    .guest-status-badge {
        padding: var(--px-2) var(--px-8);
        font: var(--s-10);
    }

    .guest-type-badge {
        padding: var(--px-2) var(--px-6);
        font: var(--s-10);
    }

    .id-upload-section {
        gap: var(--px-10);
    }

    .id-upload-box {
        min-height: var(--px-140);
        padding: var(--px-12);
    }

    .id-upload-icon {
        width: var(--px-28);
        height: var(--px-28);
        margin-bottom: var(--px-6);
    }

    .id-upload-label {
        font: var(--s-11);
        margin-bottom: var(--px-4);
    }

    .id-upload-hint {
        font: var(--s-10);
    }

    .btn-remove-image {
        width: var(--px-24);
        height: var(--px-24);
        top: var(--px-6);
        right: var(--px-6);
    }

        .btn-remove-image svg {
            width: var(--px-14);
            height: var(--px-14);
        }

    .contact-form {
        gap: var(--px-12);
    }

    .form-label-checkin {
        font: var(--s-12);
        margin-bottom: var(--px-6);
    }

    .form-input-checkin,
    .form-select-checkin {
        padding: var(--px-8) var(--px-10);
        font: normal normal 500 var(--s-13);
    }

    textarea.form-input-checkin {
        min-height: var(--px-68);
    }

    .btn-continue-checkin {
        padding: var(--px-10) var(--px-14);
        font: normal normal 600 var(--s-16);
    }

    .success-circle-wrapper {
        width: var(--px-72);
        height: var(--px-72);
    }

    .success-check-icon svg {
        width: var(--px-44);
        height: var(--px-44);
    }

    .success-welcome {
        font: normal normal 600 var(--s-16);
        margin-bottom: 6px;
    }

    .success-subtitle {
        font: normal normal 400 var(--s-14);
    }

    #qrCodeCanvas {
        width: var(--px-140);
        height: var(--px-140);
    }

    .qr-code-wrapper {
        padding: var(--px-8);
    }

    .inclusions-section,
    .qr-code-section {
        padding: var(--px-16);
    }

    .slider-nav {
        width: var(--px-32);
        height: var(--px-32);
    }

        .slider-nav svg {
            width: var(--px-16);
            height: var(--px-16);
        }

    .slider-prev {
        left: var(--px-8);
    }

    .slider-next {
        right: var(--px-8);
    }

    .slider-counter {
        bottom: var(--px-40);
        font: var(--s-10);
        padding: var(--px-4) var(--px-10);
    }

    .registration-modal-body {
        padding: var(--px-16);
    }

    .registration-policies {
        padding: var(--px-14);
    }

    .policy-section {
        padding: var(--px-12);
    }

    .signature-canvas {
        height: 120px;
    }
}

/* Landscape Orientation for Mobile Devices */
@media (max-height: 500px) and (orientation: landscape) {
    .checkin-page-wrapper {
        padding-bottom: var(--px-16);
    }

    .checkin-content,
    .success-content {
        padding: var(--px-12) var(--px-16);
    }

    .reservation-details-card,
    .booking-details-success {
        margin-bottom: var(--px-16);
    }

    .success-circle-wrapper {
        width: var(--px-60);
        height: var(--px-60);
    }

    .success-check-icon svg {
        width: var(--px-40);
        height: var(--px-40);
    }

    .id-upload-box {
        min-height: var(--px-120);
    }

    .registration-modal-container {
        max-height: 95vh;
    }

    .signature-canvas {
        height: 100px;
    }
}

/* Print styles */
@media print {
    .checkin-header,
    .checkin-actions-section,
    .success-header,
    .registration-actions {
        display: none;
    }

    .checkin-page-wrapper,
    .checkin-success-wrapper {
        background-color: var(--bg-primary);
    }

    .guest-card-body {
        display: block !important;
    }

    .registration-modal-container {
        box-shadow: none;
    }
}

/* ============================================
   REGISTRATION FORM STYLES (IF NEEDED)
   ============================================ */

/* Example styles for a registration form - modify as needed */
.registration-form {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--px-24);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

    .registration-form h2 {
        font: var(--s-22);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--px-16);
        text-align: center;
    }

    .registration-form .form-field {
        margin-bottom: var(--px-16);
    }

    .registration-form .form-label {
        font: var(--s-14);
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--px-8);
        display: block;
    }

    .registration-form .form-input {
        width: 100%;
        padding: var(--px-12) var(--px-14);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-md);
        font: var(--s-14);
        color: var(--text-primary);
        background-color: var(--bg-input);
        transition: all var(--transition-fast);
    }

        .registration-form .form-input:focus {
            outline: none;
            border-color: var(--hotel-primary-light);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

    .registration-form .form-button {
        width: 100%;
        padding: var(--px-12) var(--px-16);
        background: linear-gradient(135deg, var(--hotel-primary-light) 0%, var(--hotel-primary-dark) 100%);
        color: var(--bg-primary);
        border: none;
        border-radius: var(--radius-md);
        font: var(--s-16);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-smooth);
    }

        .registration-form .form-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
        }

.checkin-success-container #qrCodeCanvas img {
    max-width: var(--px-140);
    width: var(--px-140);
    height: var(--px-140);
    max-height: var(--px-140);
}

.checkin-success-container #qrCodeCanvas {
    max-width: var(--px-140);
    width: var(--px-140);
    height: var(--px-140);
    max-height: var(--px-140);
}

    .checkin-success-container #qrCodeCanvas canvas {
        max-width: var(--px-140);
        width: var(--px-140);
        height: var(--px-140);
        max-height: var(--px-140);
    }