:root {
    --newForm-blue: #333f80;
    --newForm-hover: #051494;
    --newForm-light: #f6f9ff;
    --newForm-gray: #D9D9D9;
    --newForm-border: #eee;
    --newForm-red: #dc3545;
    --newForm-text: #333;
    --newForm-radius: 28px;
    --newForm-radius-sm: 14px;
}
.demo-login-switch { position: fixed; top: 40px; left: 40px; background: white; padding: 15px 25px; border-radius: 12px; z-index: 1001; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; font-weight: bold; color: #333; }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .toggle-slider { background-color: #198754; }
input:checked + .toggle-slider:before { transform: translateX(24px); }
.mock-web-container { width: 100%; cursor: pointer; position: relative; }
.mock-web-img { width: 100%; display: block; }
.click-overlay { position: fixed; top: 40px; right: 40px; background: var(--newForm-blue); color: white; padding: 18px 35px; border-radius: 50px; font-weight: bold; z-index: 1000; animation: pulse 2s infinite; font-family: system-ui; box-shadow: 0 4px 15px rgba(7, 27, 190, 0.3); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.nf-helper-link {position: absolute;top: -2.6rem; right: 0;font-size: 1.2rem;color: var(--newForm-blue);font-weight: 600;cursor: pointer;text-decoration: none;display: inline-flex;align-items: center;gap: 5px;transition: opacity 0.2s;}
.nf-helper-link:hover { opacity: 0.8; text-decoration: underline; }
.nf-image-modal {display: none; position: fixed; z-index: 2000;left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(4px);animation: fadeIn 0.3s;}
.nf-image-modal-content {margin: auto;display: block;max-width: 90%;max-height: 90vh;border-radius: 8px;box-shadow: 0 0 20px rgba(0,0,0,0.5);position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.nf-image-close {position: absolute;top: 20px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;cursor: pointer;z-index: 2001;}
.nf-image-close:hover, .nf-image-close:focus {color: #bbb;text-decoration: none;cursor: pointer;}
.nf-file-error-msg {background-color: #fff5f5; color: #e03131; border: 1px solid #ffc9c9;padding: 8px 12px; border-radius: 8px; font-size: 0.9rem;margin-top: 10px; display: none; align-items: center; gap: 8px; animation: fadeIn 0.3s ease;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.newForm-card { width: 100%; display: flex; flex-direction: column; position: relative; pointer-events: auto; }
.newForm-body { flex: 1; display: flex; flex-direction: column; padding-bottom: 90px; overflow-y: auto; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; }
.newForm-body::-webkit-scrollbar { display: none; }
.newForm-safe-area { height: 20px;width: 100%;}
.newForm-progress-bg { height: 6px; background-color: #e9ecef; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.newForm-progress-bar { background-color: var(--newForm-blue); height: 100%; width: 0; transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.newForm-footer { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 50; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(2px); display: flex; justify-content: center; padding: 2rem; border-top: 1px solid rgba(0,0,0,0.05);  }
@media (max-width: 768px) { .newForm-card { height: 100dvh; border-radius: 0;  } .newForm-body { padding: 1.5rem; padding-bottom: 90px; } .newForm-footer { padding: 1.5rem; } }
.newForm-title { font-weight: 600; color: #212529; font-size: 2.8rem; margin-top: 0; margin-bottom: 2.4rem; }
.newForm-btn-back { background: none; border: none; color: #6c757d; padding: 0; margin-bottom: 1.6rem; cursor: pointer; font-family: inherit; font-size: 1.6rem; text-decoration: none; display: inline-flex; align-items: center; }
.newForm-btn-back:hover { color: var(--newForm-blue); }
.newForm-options-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 768px) { .newForm-options-grid { grid-template-columns: repeat(2, 1fr); } }
.newForm-option-btn { text-align: left; padding: 14px 25px; border: 1px solid #edf0f5; border-radius: 18px; background: white; transition: all 0.2s ease; display: flex; align-items: center; cursor: pointer; }
.newForm-icon-box { width: 46px; height: 46px; background: var(--newForm-light); color: var(--newForm-blue); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 2.25rem; transition: 0.3s; flex-shrink: 0; }
.newForm-option-btn span { font-weight: 500; color: #333; flex: 1; font-size: 1.52rem; line-height: 1.2; }
.newForm-option-btn:hover { border-color: var(--newForm-blue); background: #fdfdff; transform: translateY(-3px); }
.newForm-option-btn:hover .newForm-icon-box { background: var(--newForm-blue); color: white; }
.nf-link-btn {background: none;border: none;color: var(--newForm-blue);font-weight: 600;font-size: 1.4rem;cursor: pointer;display: inline-flex;align-items: center;padding: 5px 0;transition: opacity 0.2s;}
.nf-link-btn:hover { opacity: 0.7; text-decoration: underline; }
.nf-link-btn:disabled { color: #999; cursor: default; text-decoration: none; opacity: 1; }
.nf-delete-btn { background: none;border: none;color: var(--newForm-red);font-size: 1.8rem;margin-left: 10px;cursor: pointer;transition: color 0.2s, transform 0.2s;display: flex;align-items: center;}
.nf-delete-btn:hover { color: #bd2130; transform: scale(1.1); }
.nf-control { display: block; width: 100%; padding: 10px 15px; font-family: inherit; font-size: 1.6rem; color: #212529; background-color: #fff; border: 1px solid var(--newForm-border);border-radius:10px; transition: border-color .15s ease-in-out; }
.nf-control:focus { border-color: var(--newForm-blue); outline: 0; }
.nf-control::placeholder {color:var(--newForm-gray);}
.nf-control[readonly] { background-color: #e9ecef; cursor: not-allowed; }
.nf-label { display: block; font-weight: 700; font-size: 1.36rem; color: #444; margin-bottom: 5px; margin-top: 0; }
.nf-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 16px 12px; }
.newForm-btn-primary { background-color: var(--newForm-blue); border: 1px solid var(--newForm-blue); color: white; padding: 14px 50px; border-radius: 14px; font-weight: 700; transition: 0.3s; cursor: pointer; font-size: 1.6rem; width: 100%; }
.newForm-btn-primary:hover { background-color: var(--newForm-hover); transform: scale(1.02); }
.newForm-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }
.newForm-btn-error { background-color: var(--newForm-red); color: white; }
textarea.nf-control {min-height: 0 !important;height: auto !important; }
@media (min-width: 768px) { .newForm-btn-primary { width: auto; } }
.nf-file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.nf-file-item { display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 8px 12px; font-size: 0.95rem; }
.nf-file-info { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.nf-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; font-weight: 500; }
.nf-file-size { font-size: 0.8rem; color: #6c757d; }
.nf-file-remove { color: var(--newForm-red); cursor: pointer; padding: 4px; transition: color 0.2s; font-size: 1.1rem; }
.nf-file-remove:hover { color: #a71d2a; }
#stepContainer { flex: 1; display: flex; flex-direction: column; }
.newForm-options-grid { margin-top: 1.6rem; margin-bottom: auto; }
@media (min-width: 768px) { #inp_file, #fileListContainer {max-width: 60%;} #inp_file + .form-text, .nf-col-md-12 > div[style*="background:#fff3cd"] { max-width: 60%;} }
.nf-list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); overflow: hidden; background-color: #fff; border: 1px solid #eee; }
.nf-list-item { position: relative; display: block; padding: 1.6rem 1.6rem; color: #212529; text-decoration: none; background-color: #fff; border-bottom: 1px solid #eee; text-align: left; width: 100%; cursor: pointer; }
.nf-list-item:hover { background-color: #f8f9fa; color: var(--newForm-blue); }
.nf-list-item:last-child {border-bottom: 0;}
.nf-d-none { display: none !important; }
.nf-text-center { text-align: center; }
.nf-text-muted { color: #6c757d; }
.nf-text-primary { color: var(--newForm-blue) !important; }
.newForm-legal-details { width: 100%; margin-top: 2.4rem; margin-bottom: 1.6rem; border: none; background: transparent; }
.newForm-legal-details summary { padding: 0; cursor: pointer; font-size: 1.28rem; font-weight: 600; color: var(--newForm-blue); display: flex; align-items: center; justify-content: flex-start;gap: 0.5rem;list-style: none; transition: opacity 0.2s;user-select: none;}
.newForm-legal-details summary:hover { opacity: 0.7; }
.newForm-legal-details summary::-webkit-details-marker { display: none; }
.newForm-legal-details summary .bi-chevron-down { transition: transform 0.3s ease; font-size: 1.12rem; -webkit-text-stroke: 0.05rem currentColor; font-weight: 900;}
.newForm-legal-details[open] summary .bi-chevron-down { transform: rotate(180deg); }
.newForm-legal-content { padding-top: 1.6rem; padding-bottom: 0.8rem;font-size: 1.12rem; color: #888; line-height: 1.4; text-align: justify; border: none; }
.newForm-legal-content a { color: var(--newForm-blue); text-decoration: underline; font-weight: 600; }
.newForm-toggle-row { display: flex; align-items: flex-start; margin-bottom: 1.6rem; gap: 15px; }
.newForm-toggle-label { font-size: 1.2rem; color: #666; line-height: 1.4; flex: 1; cursor: pointer; }
.newForm-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.newForm-switch input { opacity: 0; width: 0; height: 0; }
.newForm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.newForm-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.newForm-switch input:checked + .newForm-slider { background-color: var(--newForm-blue); }
.newForm-switch input:checked + .newForm-slider:before { transform: translateX(20px); }
.nf-row { display: flex; flex-wrap: wrap; margin-top: calc(-1 * 0.8rem); margin-right: calc(-1 * 0.8rem); margin-left: calc(-1 * 0.8rem); }
.nf-row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 0.8rem; padding-left: 0.8rem; margin-top: 0.8rem; }
.nf-row.g-2 { margin-top: -0.8rem; margin-right: -0.8rem; margin-left: -0.8rem; }
.nf-row.g-2 > * { padding-right: 0.8rem; padding-left: 0.8rem; margin-top: 0.8rem; }
.nf-col-2 { flex: 0 0 auto; width: 16.66666667%; }
.nf-col-3 { flex: 0 0 auto; width: 25%; }
.nf-col-4 { flex: 0 0 auto; width: 33.33333333%; }
.nf-col-5 { flex: 0 0 auto; width: 41.66666667%; }
.nf-col-6 { flex: 0 0 auto; width: 50%; }
.nf-col-8 { flex: 0 0 auto; width: 66.66666667%; }
.nf-col-9 { flex: 0 0 auto; width: 75%; }
.nf-col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) {
    .nf-col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .nf-col-md-3 { flex: 0 0 auto; width: 25%; }
    .nf-col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .nf-col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .nf-col-md-6 { flex: 0 0 auto; width: 50%; }
    .nf-col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .nf-col-md-9 { flex: 0 0 auto; width: 75%; }
    .nf-col-md-12 { flex: 0 0 auto; width: 100%; }
}
.nf-mt-1 { margin-top: 0.4rem; }
.nf-mt-2 { margin-top: 0.8rem; }
.nf-mt-3 { margin-top: 1.6rem; }
.nf-mt-4 { margin-top: 2.4rem; }
.nf-mb-1 { margin-bottom: 0.4rem; }
.nf-mb-2 { margin-bottom: 0.8rem; }
.nf-mb-4 { margin-bottom: 2.4rem; }
.nf-me-1 { margin-right: 0.4rem; }
.nf-me-2 { margin-right: 0.8rem; }
.nf-py-2 { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.nf-py-5 { padding-top: 4.8rem; padding-bottom: 4.8rem; }
.nf-px-5 { padding-left: 4.8rem; padding-right: 4.8rem; }
.nf-is-invalid { border-color: var(--newForm-red) !important; }
.nf-spinner-border { display: inline-block; width: 1.6rem; height: 1.6rem; vertical-align: -0.125em; border: 0.2em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: .75s linear infinite nf-spinner-animation; }
@keyframes nf-spinner-animation { to { transform: rotate(360deg); } }
.animate__animated { animation-duration: 0.5s; animation-fill-mode: both; }
.animate__fadeIn { animation-name: fadeIn; }
.animate__fadeInUp { animation-name: fadeInUp; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.nf-help-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); overflow: auto; }
.nf-help-content { background-color: #fefefe; margin: 2% auto; padding: 0; border: none; width: 95%; max-width: 900px; border-radius: var(--newForm-radius); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); animation: slideInUp 0.3s ease-out; overflow: hidden; }
.nf-help-header { background: linear-gradient(135deg, var(--newForm-blue) 0%, var(--newForm-hover) 100%); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.nf-help-title { font-size: 2rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; color: white !important; }
.nf-help-close { color: white; font-size: 3rem; font-weight: bold; cursor: pointer; transition: 0.2s; line-height: 1; }
.nf-help-close:hover { opacity: 0.8; transform: scale(1.1); }
.nf-help-body { padding: 15px 30px 30px 30px; }
.nf-help-select-wrapper { margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; }
.nf-help-label { display: block; margin-bottom: 12px; color: var(--newForm-blue); font-weight: 700; font-size: 1.5rem;}
.nf-help-select { width: auto; min-width: 350px; max-width: 90%; padding: 12px 20px; font-size: 1.5rem; border: 2px solid #e2e8f0; border-radius: 12px; background-color: #f8fafc; color: #334155; font-weight: 600; cursor: pointer; transition: all 0.2s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23334155'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.5rem center; background-size: 1.2em; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.nf-help-select:focus { outline: none; border-color: var(--newForm-blue); box-shadow: 0 0 0 3px rgba(7, 27, 190, 0.1); }
.nf-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.nf-help-img-container { background: #fff; border: none; border-radius: 24px; padding: 20px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 15px rgba(0, 0, 0, 0.03); display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.nf-help-img-container:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.18); }
.nf-help-img-label { display: block; margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--newForm-blue); }
.nf-help-img { display: block; object-fit: contain; }
#helpImgInterior { max-height: 435px; width: auto; max-width: 100%; }
#helpImgExterior { width: 265px; height: auto; }
.nf-help-tips { background: #f0f4ff; border-radius: 16px; padding: 10px 25px; border-left: 5px solid var(--newForm-blue); margin-top: 2rem;}
.nf-help-tips h5 { color: var(--newForm-blue); font-weight: 700; margin-bottom: 15px; font-size: 1.5rem; }
.nf-help-list { list-style: none; padding: 0; margin: 0; }
.nf-help-list li { position: relative; padding-left: 25px; margin-bottom: 12px; color: #475569; font-size: 1.3rem; line-height: 1.5; }
.nf-help-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--newForm-blue); font-weight: bold; font-size: 1.1rem;}
.nf-help-tabs-wrapper { display: none; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; animation: fadeIn 0.3s ease; }
.nf-help-tab { mbackground: #f1f5f9; color: #64748b; border: none; padding: 10px 20px; border-radius: 25px; font-weight: 600; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.nf-help-tab:hover { background: #e2e8f0; color: #334155; transform: translateY(-1px); }
.nf-help-tab.active { background: var(--newForm-blue); color: white; box-shadow: 0 4px 12px rgba(7, 27, 190, 0.2); border-color: var(--newForm-blue); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .nf-help-img { max-height: 200px; }
    .nf-help-select { min-width: 100%; }
    #helpImgInterior { max-height: 250px; }
    #helpImgExterior { width: 100%; max-width: 200px; }
    .nf-help-grid { grid-template-columns: 1fr; }
}
@keyframes slideInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.nf-guest-selector { display: flex; background: #f1f5f9; width: calc(100% - 1.6rem);margin-inline:0.8rem;padding: 5px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #e2e8f0; }
.nf-guest-option { flex: 1; text-align: center; padding: 12px; border-radius: 9px; font-size: 1.6rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; color: #64748b;}
.nf-guest-option:hover { color: var(--newForm-blue); background: rgba(255,255,255,0.5); }
.nf-guest-option.active { background: white; color: var(--newForm-blue); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: scale(1.02); }
.nf-section-title { color: var(--newForm-blue); font-size: 1.1rem; font-weight: 700; margin-inline: 0.8rem;margin-bottom: 15px; margin-top: 10px; display: flex; align-items: center; gap: 8px;}
.nf-section-title::before { content: ''; display: block; width: 4px; height: 18px; background: var(--newForm-blue); border-radius: 2px; }
#stepContainer .custom-icon-main {
    font-size: 4rem
}
#stepContainer .custom-text-h2{
    font-size: 30px;
    display: block;
    margin: 10px 0 24px;
}