/* ============================================================
               1. BACKGROUND LOGO SETUP
               ============================================================ */
         #bgLogo {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             width: 45vw;
             height: 45vh;
             background-image: url('https://lh3.googleusercontent.com/d/1iPRHJjAzbZhOdGZawQm1w9ZOmamqpfeb');
             background-size: contain;
             background-position: center;
             background-repeat: no-repeat;
             opacity: 1;
             z-index: 1;
             pointer-events: none;
             filter: blur(0px);
         }

         /* Dark overlay to make the glass card pop against the logo */
         body::after {
             content: '';
             position: fixed;
             inset: 0;
             background: radial-gradient(circle at 20% 30%, rgba(115, 133, 174, 0.7), rgba(27, 44, 120, 0.9));
             z-index: 0;
             pointer-events: none;
         }

         /* --- RESET & BASE --- */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }

         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             padding: 24px;
             margin: 0;
             background: #0b1120;
             position: relative;
             z-index: 1;
         }

         /* --- MAIN GLASS CARD --- */
         .wizard-card {
             max-width: 720px;
             width: 100%;
             background: rgba(255, 255, 255, 0.04);
             backdrop-filter: blur(22px);
             -webkit-backdrop-filter: blur(24px);
             border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: 32px;
             padding: 40px 44px 32px;
             box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
             position: relative;
             z-index: 10;
             transition: all 0.3s ease;
         }

         .wizard-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
             border-radius: 32px 32px 0 0;
         }

         /* --- PROGRESS AREA --- */
         .progress-area {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 32px;
         }

         .step-indicator {
             font-size: 13px;
             font-weight: 600;
             color: rgba(255, 255, 255, 0.5);
             background: rgba(255, 255, 255, 0.06);
             padding: 4px 16px;
             border-radius: 40px;
             letter-spacing: 0.3px;
             border: 1px solid rgba(255, 255, 255, 0.04);
         }
         .step-indicator span {
             color: #ffffff;
             font-weight: 700;
         }

         .progress-track {
             width: 160px;
             height: 5px;
             background: rgba(255, 255, 255, 0.08);
             border-radius: 10px;
             overflow: hidden;
         }
         .progress-fill {
             height: 100%;
             width: 0%;
             background: linear-gradient(90deg, #c4ae80, #aa8851, #1a2152);
             border-radius: 10px;
             transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
             box-shadow: 0 0 12px rgba(170, 136, 81, 0.3);
         }

         /* --- Logo on welcome board --- */
         .icon .brand-logo-icon {
             width: 3em;
             height: 3em;
             object-fit: contain;
             display: inline-block;
             vertical-align: middle;
         }
         /* --- STEPS WRAPPER --- */
         .steps-wrapper {
             position: relative;
             min-height: 340px;
         }

         .step {
             display: none;
             animation: fadeSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
         .step.active {
             display: block;
         }

         @keyframes fadeSlide {
             0% {
                 opacity: 0;
                 transform: translateY(18px) scale(0.97);
             }
             100% {
                 opacity: 1;
                 transform: translateY(0) scale(1);
             }
         }

         /* Step header */
         .step-header {
             display: flex;
             align-items: center;
             gap: 16px;
             margin-bottom: 28px;
         }

         .step-icon {
             font-size: 22px;
             background: rgba(255, 255, 255, 0.04);
             width: 48px;
             height: 48px;
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: 16px;
             color: #c4ae80;
             border: 1px solid rgba(255, 255, 255, 0.04);
             backdrop-filter: blur(4px);
         }

         .step-title-group {
             display: flex;
             flex-direction: column;
         }
         .step-title {
             font-size: 20px;
             font-weight: 700;
             color: #ffffff;
             letter-spacing: -0.3px;
         }
         .step-desc {
             color: rgba(255, 255, 255, 0.4);
             font-size: 14px;
             margin-top: 2px;
         }

         /* --- FORM ELEMENTS (Glass) --- */
         .field-group {
             margin-top: 4px;
         }

         .field-group label {
             display: block;
             color: rgba(255, 255, 255, 0.6);
             font-size: 13px;
             font-weight: 600;
             letter-spacing: 0.3px;
             margin-bottom: 6px;
         }

         .field-group input,
         .field-group textarea {
             width: 100%;
             padding: 14px 18px;
             background: rgba(255, 255, 255, 0.04);
             border: 1.5px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             color: #ffffff;
             font-size: 16px;
             transition: 0.25s ease;
             outline: none;
             font-family: inherit;
             backdrop-filter: blur(4px);
         }

         .field-group input:focus,
         .field-group textarea:focus {
             border-color: rgba(196, 174, 128, 0.5);
             background: rgba(255, 255, 255, 0.07);
             box-shadow: 0 0 0 4px rgba(170, 136, 81, 0.08);
         }

         .field-group input::placeholder,
         .field-group textarea::placeholder {
             color: rgba(255, 255, 255, 0.2);
             font-weight: 400;
         }

         .field-group textarea {
             min-height: 100px;
             resize: vertical;
         }

         /* --- PHONE INPUT — FIXED: larger, numeric-friendly --- */
         .phone-input-wrapper {
             display: flex;
             gap: 10px;
             align-items: stretch;
             flex-wrap: wrap;
         }

         .country-code-select {
             padding: 14px 12px;
             background: rgba(255, 255, 255, 0.04);
             border: 1.5px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             color: #ffffff;
             font-size: 15px;
             font-family: inherit;
             outline: none;
             cursor: pointer;
             transition: 0.25s ease;
             backdrop-filter: blur(4px);
             min-width: 130px;
             appearance: none;
             -webkit-appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 12px center;
             padding-right: 32px;
             flex: 0 0 auto;
         }
         .country-code-select:focus {
             border-color: rgba(196, 174, 128, 0.5);
             background-color: rgba(255, 255, 255, 0.07);
             box-shadow: 0 0 0 4px rgba(170, 136, 81, 0.08);
         }
         .country-code-select option {
             background: #1a2340;
             color: #fff;
         }

         /* Phone number input — larger, better touch target */
         .phone-number-input {
             flex: 1 1 180px;
             min-width: 140px;
             padding: 14px 18px;
             background: rgba(255, 255, 255, 0.04);
             border: 1.5px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             color: #ffffff;
             font-size: 16px;
             transition: 0.25s ease;
             outline: none;
             font-family: inherit;
             backdrop-filter: blur(4px);
             letter-spacing: 0.5px;
         }
         .phone-number-input:focus {
             border-color: rgba(196, 174, 128, 0.5);
             background: rgba(255, 255, 255, 0.07);
             box-shadow: 0 0 0 4px rgba(170, 136, 81, 0.08);
         }
         .phone-number-input::placeholder {
             color: rgba(255, 255, 255, 0.2);
             font-weight: 400;
         }

         /* --- ERROR --- */
         .field-error {
             color: #f87171;
             font-size: 13px;
             font-weight: 500;
             margin-top: 8px;
             display: none;
             align-items: center;
             gap: 6px;
         }
         .field-error.show {
             display: flex;
             animation: shake 0.4s ease;
         }
         @keyframes shake {
             0%,
             100% {
                 transform: translateX(0);
             }
             20% {
                 transform: translateX(-6px);
             }
             60% {
                 transform: translateX(6px);
             }
             80% {
                 transform: translateX(-3px);
             }
         }

         /* --- FILE & CAMERA DROP ZONES (Glass) --- */
         .file-grid {
             display: flex;
             flex-direction: column;
             gap: 18px;
         }

         .drop-zone {
             border: 1.5px dashed rgba(255, 255, 255, 0.08);
             border-radius: 18px;
             padding: 24px 20px;
             text-align: center;
             background: rgba(255, 255, 255, 0.02);
             transition: 0.25s ease;
             position: relative;
             cursor: pointer;
             backdrop-filter: blur(4px);
         }
         .drop-zone:hover {
             border-color: rgba(196, 174, 128, 0.3);
             background: rgba(255, 255, 255, 0.05);
         }
         .drop-zone .icon-big {
             font-size: 30px;
             display: block;
             margin-bottom: 4px;
             opacity: 0.8;
         }
         .drop-zone p {
             color: rgba(255, 255, 255, 0.4);
             font-size: 14px;
             pointer-events: none;
         }
         .drop-zone p strong {
             color: rgba(255, 255, 255, 0.7);
         }
         .drop-zone input[type="file"] {
             position: absolute;
             inset: 0;
             opacity: 0;
             cursor: pointer;
         }

         .file-badge {
             display: inline-block;
             background: rgba(196, 174, 128, 0.12);
             color: #c4ae80;
             padding: 4px 16px;
             border-radius: 40px;
             font-size: 13px;
             font-weight: 500;
             margin-top: 10px;
             border: 1px solid rgba(196, 174, 128, 0.1);
             word-break: break-all;
         }

         .drop-zone.optional {
             border-style: solid;
             border-color: rgba(255, 255, 255, 0.04);
             background: rgba(255, 255, 255, 0.01);
         }
         .drop-zone.optional:hover {
             border-color: rgba(255, 255, 255, 0.12);
         }
          
          /* --- CAMERA UPLOAD AREA (match drop-zone style) --- */
          .camera-upload-area {
              border: 1.5px dashed rgba(255, 255, 255, 0.08);
              border-radius: 18px;
              padding: 24px 20px;
              text-align: center;
              background: rgba(255, 255, 255, 0.02);
              transition: 0.25s ease;
              backdrop-filter: blur(4px);
          }
          .camera-upload-area:hover {
              border-color: rgba(196, 174, 128, 0.3);
              background: rgba(255, 255, 255, 0.05);
          }
          .camera-upload-area .icon-big {
              font-size: 30px;
              display: block;
              margin-bottom: 4px;
              opacity: 0.8;
          }
          
          /* Hide the native input completely — the label triggers it */
          .camera-upload-area input[type="file"] {
              display: none;
          }
          
          .camera-btn {
              display: inline-block;
              color: rgba(255, 255, 255, 0.7);
              font-weight: 700;
              font-size: 15px;
              cursor: pointer;
              margin-top: 2px;
          }
          .camera-upload-area:hover .camera-btn {
              color: #ffffff;
          }
          
          .camera-hint {
              color: rgba(255, 255, 255, 0.4);
              font-size: 13px;
              margin-top: 6px;
              pointer-events: none;
          }
          .camera-hint span {
              font-weight: 600;
          }

         /* --- SUMMARY / REVIEW (Glass) --- */
         .summary-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 10px 20px;
             background: rgba(0, 0, 0, 0.2);
             padding: 20px 24px;
             border-radius: 18px;
             border: 1px solid rgba(255, 255, 255, 0.04);
             backdrop-filter: blur(4px);
         }

         .summary-item {
             display: flex;
             flex-direction: column;
         }
         .summary-item.full {
             grid-column: 1 / -1;
         }
         .summary-item .s-label {
             font-size: 11px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             color: rgba(255, 255, 255, 0.25);
             font-weight: 600;
         }
         .summary-item .s-value {
             color: #ffffff;
             font-size: 15px;
             font-weight: 500;
             margin-top: 2px;
             word-break: break-word;
         }
         .summary-item .s-value.na {
             color: rgba(255, 255, 255, 0.3);
             font-weight: 400;
         }

         .confirm-notice {
             margin-top: 18px;
             padding: 12px 16px;
             background: rgba(196, 174, 128, 0.08);
             border-radius: 12px;
             border-left: 4px solid #c4ae80;
             display: flex;
             align-items: center;
             gap: 10px;
             color: #d8c69a;
             font-size: 14px;
             font-weight: 500;
         }

         /* --- NAVIGATION BUTTONS --- */
         .nav-actions {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-top: 32px;
             gap: 16px;
         }

         .btn {
             padding: 12px 28px;
             border: none;
             border-radius: 40px;
             font-weight: 600;
             font-size: 15px;
             cursor: pointer;
             transition: 0.2s ease;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
             letter-spacing: 0.2px;
             background: rgba(255, 255, 255, 0.04);
             color: rgba(255, 255, 255, 0.6);
             border: 1px solid rgba(255, 255, 255, 0.04);
             backdrop-filter: blur(4px);
         }

         .btn:hover:not(:disabled) {
             background: rgba(255, 255, 255, 0.08);
             color: #ffffff;
         }
         .btn:disabled {
             opacity: 0.2;
             cursor: not-allowed;
         }

         .btn-secondary {
             border-color: rgba(255, 255, 255, 0.06);
         }
         .btn-secondary:hover:not(:disabled) {
             border-color: rgba(255, 255, 255, 0.15);
             background: rgba(255, 255, 255, 0.04);
         }

         .btn-primary {
             background: linear-gradient(135deg, #1a2152, #aa8851);
             color: #ffffff;
             box-shadow: 0 4px 20px rgba(26, 33, 82, 0.25);
             border: none;
         }
         .btn-primary:hover:not(:disabled) {
             transform: translateY(-1px);
             box-shadow: 0 8px 30px rgba(26, 33, 82, 0.35);
             background: linear-gradient(135deg, #aa8851, #1a2152);
             color: #fff;
         }

         .btn-success {
             background: linear-gradient(135deg, #aa8851, #c4ae80);
             color: #1a2152;
             box-shadow: 0 4px 20px rgba(170, 136, 81, 0.3);
             border: none;
         }
         .btn-success:hover:not(:disabled) {
             transform: translateY(-1px);
             box-shadow: 0 8px 30px rgba(170, 136, 81, 0.45);
             background: linear-gradient(135deg, #c4ae80, #d8c69a);
             color: #1a2152;
         }

         /* --- STATUS MESSAGE --- */
         #statusMessage {
             margin-top: 18px;
             padding: 12px 18px;
             border-radius: 14px;
             display: none;
             font-weight: 500;
             text-align: center;
             backdrop-filter: blur(8px);
         }
         #statusMessage.success {
             display: block;
             background: rgba(16, 185, 129, 0.1);
             color: #6ee7b7;
             border: 1px solid rgba(16, 185, 129, 0.2);
         }
         #statusMessage.error {
             display: block;
             background: rgba(239, 68, 68, 0.1);
             color: #fca5a5;
             border: 1px solid rgba(239, 68, 68, 0.2);
         }

         /* --- FIREWORKS CANVAS --- */
         #fireworksCanvas {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
             pointer-events: none;
             z-index: 100001;
             display: none;
         }

         /* --- RESPONSIVE --- */
         @media (max-width: 600px) {
             .wizard-card {
                 padding: 24px 18px;
             }
             .step-title {
                 font-size: 18px;
             }
             .summary-grid {
                 grid-template-columns: 1fr;
                 padding: 16px;
             }
             .nav-actions {
                 flex-wrap: wrap;
             }
             .btn {
                 flex: 1;
                 padding: 12px 16px;
                 font-size: 14px;
             }
             .step-icon {
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
             }
             .progress-track {
                 width: 100px;
             }
             body::before {
                 width: 90vw;
                 height: 50vh;
             }
             .phone-input-wrapper {
                 flex-direction: column;
             }
             .country-code-select {
                 flex: 1 1 auto;
                 min-width: 100%;
             }
             .phone-number-input {
                 flex: 1 1 auto;
                 min-width: 100%;
             }
         }

         input[type=number]::-webkit-inner-spin-button,
         input[type=number]::-webkit-outer-spin-button {
             -webkit-appearance: none;
             margin: 0;
         }
         input[type=number] {
             -moz-appearance: textfield;
         }

         /* ============================================================
            INTRO SPLASH SCREEN
            ============================================================ */
         #introSplash {
             position: fixed;
             inset: 0;
             z-index: 99999;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             background: radial-gradient(circle at 20% 30%, rgb(27, 44, 120), rgb(115, 133, 174));
             pointer-events: all;
         }

         #splashLogo {
             width: 150px;
             height: 150px;
             background-image: url('https://lh3.googleusercontent.com/d/1iPRHJjAzbZhOdGZawQm1w9ZOmamqpfeb');
             background-size: contain;
             background-position: center;
             background-repeat: no-repeat;
             animation: logoGrow 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
             opacity: 0;
         }

         @keyframes logoGrow {
             0% {
                 transform: scale(0.02);
                 opacity: 0;
             }
             40% {
                 opacity: 1;
             }
             75% {
                 transform: scale(1.08);
                 opacity: 1;
             }
             88% {
                 transform: scale(0.96);
             }
             100% {
                 transform: scale(2);
                 opacity: 1;
             }
         }

         #splashTagline {
             margin-top: 39px;
             color: rgba(209, 209, 209, 0.995);
             font-size: 25px;
             letter-spacing: 3px;
             text-transform: uppercase;
             font-weight: 400;
             font-family: 'Playfair Display', Georgia, serif;
             font-style: italic;
             opacity: 0;
             animation: fadeInTag 0.6s ease 1.6s forwards;
         }

         @keyframes fadeInTag {
             to {
                 opacity: 1;
             }
         }

         /* ============================================================
            FORM ENTRY — zigzag water drop
            ============================================================ */
         @keyframes waterDrop {
             0% {
                 transform: translateY(-120px) rotate(-3deg);
                 opacity: 0;
             }
             18% {
                 transform: translateY(18px) rotate(2.5deg);
                 opacity: 1;
             }
             34% {
                 transform: translateY(-12px) rotate(-2deg);
             }
             50% {
                 transform: translateY(7px) rotate(1.2deg);
             }
             65% {
                 transform: translateY(-4px) rotate(-0.7deg);
             }
             80% {
                 transform: translateY(2px) rotate(0.3deg);
             }
             100% {
                 transform: translateY(0) rotate(0deg);
                 opacity: 1;
             }
         }

         .wizard-card.drop-in {
             animation: waterDrop 4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
         }

         /* ============================================================
            CONSENT BOX — unified with the rest of the glass theme
            ============================================================ */
         .consent-box {
             margin-top: 4px;
             padding: 20px 22px;
             background: rgba(255, 255, 255, 0.03);
             border: 1.5px solid rgba(255, 255, 255, 0.07);
             border-radius: 18px;
             backdrop-filter: blur(4px);
         }
         .consent-title {
             font-size: 15px;
             font-weight: 700;
             color: #ffffff;
             margin-bottom: 12px;
             letter-spacing: 0.2px;
         }

         /* scrollable terms container — same translucent glass treatment
            as the rest of the inputs, instead of the old flat blue box */
         .consent-text-scroll {
             max-height: 260px;
             overflow-y: auto;
             margin-bottom: 18px;
             padding: 16px 18px;
             background: rgba(255, 255, 255, 0.03);
             border: 1px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             scroll-behavior: smooth;
         }
         .consent-text-scroll::-webkit-scrollbar {
             width: 6px;
         }
         .consent-text-scroll::-webkit-scrollbar-track {
             background: transparent;
         }
         .consent-text-scroll::-webkit-scrollbar-thumb {
             background: rgba(255, 255, 255, 0.15);
             border-radius: 10px;
         }

         .consent-text {
             font-size: 13px;
             color: rgba(255, 255, 255, 0.62);
             line-height: 1.75;
             word-break: break-word;
         }

         /* ------------------------------------------------------------
            PROFESSIONAL T&C TYPOGRAPHY
            Replaces the old flat <br>-separated wall of text with real
            headings, spaced paragraphs, and proper bullet / numbered
            lists — still themed to match the gold/navy glass design.
            ------------------------------------------------------------ */
         .consent-text .tc-doc-title {
             font-family: 'Playfair Display', Georgia, serif;
             font-style: normal;
             font-size: 17px;
             font-weight: 600;
             color: #ffffff;
             letter-spacing: 0.2px;
             line-height: 1.4;
             margin-bottom: 4px;
         }

         .consent-text .tc-meta {
             font-size: 11.5px;
             text-transform: uppercase;
             letter-spacing: 0.6px;
             color: rgba(196, 174, 128, 0.75);
             font-weight: 600;
             margin-bottom: 16px;
         }

         .consent-text p {
             margin: 0 0 12px 0;
         }

         .consent-text h5 {
             font-size: 13.5px;
             font-weight: 700;
             color: #d8c69a;
             letter-spacing: 0.3px;
             margin: 22px 0 8px 0;
             padding-bottom: 6px;
             border-bottom: 1px solid rgba(196, 174, 128, 0.18);
         }

         .consent-text h5:first-of-type {
             margin-top: 18px;
         }

         .consent-text ul,
         .consent-text ol {
             margin: 0 0 14px 0;
             padding-left: 20px;
             display: flex;
             flex-direction: column;
             gap: 8px;
         }

         .consent-text ul {
             list-style: none;
             padding-left: 4px;
         }

         .consent-text ul li {
             position: relative;
             padding-left: 18px;
         }

         .consent-text ul li::before {
             content: '';
             position: absolute;
             left: 0;
             top: 7px;
             width: 6px;
             height: 6px;
             border-radius: 50%;
             background: #c4ae80;
             opacity: 0.85;
         }

         .consent-text ol {
             list-style: none;
             counter-reset: tc-ack;
             padding-left: 4px;
         }

         .consent-text ol li {
             position: relative;
             padding-left: 28px;
             counter-increment: tc-ack;
         }

         .consent-text ol li::before {
             content: counter(tc-ack);
             position: absolute;
             left: 0;
             top: 0;
             width: 19px;
             height: 19px;
             border-radius: 50%;
             background: rgba(196, 174, 128, 0.14);
             border: 1px solid rgba(196, 174, 128, 0.35);
             color: #d8c69a;
             font-size: 10.5px;
             font-weight: 700;
             display: flex;
             align-items: center;
             justify-content: center;
             line-height: 1;
         }

         .consent-text li strong {
             color: #ffffff;
             font-weight: 600;
         }

         .consent-text li em,
         .consent-text p em {
             color: #eadfc4;
             font-style: normal;
             font-weight: 600;
         }

         .consent-text .tc-ack-heading {
             margin-top: 26px;
             border-bottom-color: rgba(196, 174, 128, 0.35);
             color: #ffffff;
         }

         .consent-text .tc-ack-list {
             margin-bottom: 0;
         }

         .consent-check-row {
             display: flex;
             align-items: flex-start;
             gap: 12px;
             padding: 14px 16px;
             background: rgba(255, 255, 255, 0.03);
             border: 1px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             cursor: pointer;
             transition: 0.2s ease;
         }
         .consent-check-row:hover {
             background: rgba(255, 255, 255, 0.06);
             border-color: rgba(196, 174, 128, 0.25);
         }
         .consent-check-row input[type="checkbox"] {
             width: 20px;
             height: 20px;
             min-width: 20px;
             margin-top: 1px;
             accent-color: #c4ae80;
             cursor: pointer;
         }
         .consent-check-row span {
             font-size: 14px;
             color: rgba(255, 255, 255, 0.7);
             line-height: 1.55;
         }
         .consent-check-row span strong {
             color: #ffffff;
         }

         /* ============================================================
            SELECT OVERRIDES
            ============================================================ */
         .field-group select {
             width: 100%;
             padding: 14px 18px;
             background: rgba(255, 255, 255, 0.04);
             border: 1.5px solid rgba(255, 255, 255, 0.06);
             border-radius: 14px;
             color: #ffffff;
             font-size: 16px;
             transition: 0.25s ease;
             outline: none;
             font-family: inherit;
             backdrop-filter: blur(4px);
             cursor: pointer;
             appearance: none;
             -webkit-appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 16px center;
             padding-right: 40px;
         }
         .field-group select:focus {
             border-color: rgba(196, 174, 128, 0.5);
             background-color: rgba(255, 255, 255, 0.07);
             box-shadow: 0 0 0 4px rgba(170, 136, 81, 0.08);
         }
         .field-group select option {
             background: #1a2340;
             color: #fff;
         }

         /* ============================================================
            WELCOME OVERLAY (appears after successful submission)
            — restyled to match the same navy/gold theme as the rest
              of the form, instead of a plain black backdrop/card.
            ============================================================ */
         #welcomeOverlay {
             position: fixed;
             inset: 0;
             z-index: 100000;
             display: none;
             align-items: center;
             justify-content: center;
             background: radial-gradient(circle at 20% 30%, rgba(115, 133, 174, 0.55), rgba(11, 17, 32, 0.92));
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
             pointer-events: all;
             animation: welcomeFadeIn 0.8s ease forwards;
         }

         #welcomeOverlay.show {
             display: flex;
         }

         @keyframes welcomeFadeIn {
             0% {
                 opacity: 0;
                 transform: scale(0.96);
             }
             100% {
                 opacity: 1;
                 transform: scale(1);
             }
         }

         .welcome-card {
             max-width: 600px;
             width: 90%;
             background: linear-gradient(180deg, 
              rgba(115, 133, 174, 0.35) 0%, 
              rgba(115, 133, 174, 0.35) 38%, 
              rgba(26, 33, 82, 0.55) 62%);                                                 
             border: 1px solid rgba(196, 174, 128, 0.25);
             border-radius: 48px;
             padding: 48px 40px 40px;
             text-align: center;
             box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
             backdrop-filter: blur(8px);
             position: relative;
         }

         .welcome-card .icon {
             font-size: 72px;
             margin-bottom: 16px;
             display: block;
             animation: bounceIcon 1.2s infinite alternate;
         }

         @keyframes bounceIcon {
             0% {
                 transform: translateY(0);
             }
             100% {
                 transform: translateY(-12px);
             }
         }

         .welcome-card h1 {
             font-family: 'Playfair Display', Georgia, serif;
             font-size: 2.6rem;
             font-weight: 600;
             color: #ffffff;
             letter-spacing: -0.5px;
             margin-bottom: 8px;
         }

         .welcome-card h1 .highlight {
             background: linear-gradient(135deg, #c4ae80, #aa8851);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }

         .welcome-card .sub {
             color: rgba(255, 255, 255, 0.55);
             font-size: 1.1rem;
             letter-spacing: 2px;
             font-weight: 300;
             margin-top: 8px;
         }

         .welcome-card .brand {
             font-size: 1.8rem;
             font-weight: 700;
             color: #ffffff;
             margin-top: 12px;
             background: linear-gradient(135deg, #c4ae80, #ffffff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             letter-spacing: 1px;
         }

         .welcome-card .btn-close-welcome {
             margin-top: 32px;
             padding: 12px 40px;
             background: linear-gradient(135deg, #1a2152, #aa8851);
             border: none;
             border-radius: 40px;
             color: #fff;
             font-weight: 600;
             font-size: 1rem;
             cursor: pointer;
             transition: 0.3s ease;
             box-shadow: 0 4px 20px rgba(26, 33, 82, 0.3);
         }

         .welcome-card .btn-close-welcome:hover {
             transform: scale(1.04);
             box-shadow: 0 8px 30px rgba(26, 33, 82, 0.5);
         }

         .welcome-card .ref-note {
             margin-top: 20px;
             font-size: 0.85rem;
             color: rgba(255, 255, 255, 0.45);
         }

         /* ============================================================
            MOBILE WELCOME CARD
            ============================================================ */
         @media (max-width: 600px) {
             .welcome-card {
                 border-radius: 32px;
                 padding: 32px 24px 28px;
             }

             .welcome-card h1 {
                 font-size: 1.8rem;
             }

             .welcome-card .icon {
                 font-size: 52px;
             }

             .welcome-card .sub {
                 font-size: 0.95rem;
             }

             .welcome-card .brand {
                 font-size: 1.4rem;
             }

             .welcome-card .btn-close-welcome {
                 padding: 10px 28px;
                 font-size: 0.9rem;
             }
         }

/* --- PHOTO GALLERY (camera photos) --- */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.photo-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remove-photo {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.remove-photo:hover {
    background: rgba(220, 38, 38, 0.85);
}

.photo-count {
    margin-top: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.photo-count .highlight-count {
    color: #c4ae80;
    font-weight: 700;
}

/* ============================================================
   LOCKED STATE — shown once the client hits "Continue" on the
   welcome card. The whole wizard becomes read-only: the Back
   button is visibly blurred + disabled, and a banner explains
   that the submission is final.
   ============================================================ */
.locked-banner {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 18px;
    background: rgba(196, 174, 128, 0.1);
    border: 1px solid rgba(196, 174, 128, 0.3);
    border-radius: 14px;
    color: #d8c69a;
    font-size: 13.5px;
    font-weight: 600;
}
.locked-banner.show {
    display: flex;
}

#prevBtn.locked-btn {
    filter: blur(1.6px);
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    user-select: none;
}

.steps-wrapper.locked {
    pointer-events: none;
    opacity: 0.75;
    filter: saturate(0.7);
}