* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: #1a1a1a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 20px;
            background-image: url('../images/background/hall.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .form-container {
            width: 100%;
            max-width: 720px;
            background: rgba(255, 255, 255, 0.92);
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.35);
            overflow: hidden;
        }
        .form-header {
            /*background: #f0f0f0;*/
            padding: 22px 30px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .form-header h1 {
            font-size: 28px;
            font-weight: 700;
            color: #111;
            letter-spacing: -0.3px;
        }
        .form-body {
            padding: 32px 36px 40px;
        }
        .event-info {
            font-size: 14.5px;
            line-height: 1.55;
            color: #333;
            margin-bottom: 28px;
            text-align: left;
        }
        label{ font-weight: normal}
        /*.form-group {
            margin-bottom: 22px;
        }
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #222;
            margin-bottom: 7px;
        }
        label .required {
            color: #e74c3c;
            margin-left: 2px;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 12px 14px;
            font-size: 15px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
            color: #333;
            transition: border-color 0.2s;
        }*/
        /*input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
        }
        input::placeholder,
        textarea::placeholder {
            color: #999;
        }
        .phone-field {
            display: flex;
            gap: 0;
        }
        .phone-field .country-select {
            width: 70px;
            flex-shrink: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
            background: #f8f8f8;
            padding-left: 10px;
            cursor: pointer;
        }
        .phone-field input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 18px 28px;
            margin-top: 6px;
        }
        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .radio-option input[type="radio"] {
            width: 18px;
            height: 18px;
            accent-color: #4a90e2;
            cursor: pointer;
        }
        .radio-option span {
            font-size: 15px;
            color: #333;
        }
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
            cursor: pointer;
        }
        textarea {
            min-height: 110px;
            resize: vertical;
        }*/

          .camera-box {
             width: 100%;
             max-width: 400px;
             margin: 0 auto;
             border-radius: 8px;
             overflow: hidden;
             background: #000;
             position: relative;
             display: none; /* Hidden by default until initialized */
         }
        #webcam {
            width: 100%;
            height: auto;
            display: block;
            transform: scaleX(-1); /* Mirror effect for natural camera feel */
        }
        /* Oval guide overlay for face precision */
        .oval-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 240px;
            border: 3px dashed rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            pointer-events: none;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        /* Active green styling when criteria are met */
        .oval-overlay.optimal {
            border: 3px solid #198754;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 15px rgba(25, 135, 84, 0.7);
        }
        #snapshot-canvas {
            display: none;
        }
        .quality-indicator {
            font-size: 13px;
            font-weight: 600;
            margin-top: 5px;
        }