/* --------------------------------
 FORM CONTROL
--------------------------------- */
.of-start h3 {display: none;}
.oform {margin: 30px 0;}
.of-feat {margin-bottom: 20px; position: relative;}
.of-feat label {font-size: 1.05rem; line-height: 1.3; display: flex; align-items: center; cursor: pointer;}
.of-feat label input {width: 16px; height: 16px; margin-right: 8px;}
.of-box {margin-bottom: 20px; border: 1px solid #ddd; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
.of-sec {padding: 15px 20px; border-bottom: 1px solid #ddd; background: #f8f8f8; border-top-right-radius: 16px; border-top-left-radius: 16px;}
.of-sec h3 {font-size: 1.05rem; line-height: 1.2;}
.of-sec p {font-size: .95rem; line-height: 1.4; color: rgba(0,0,0,.8);}
.of-start {padding: 30px 20px; text-align: center;}
.of-start h2 {font-size: 1.45rem; line-height: 1.2; font-weight: 600; margin-bottom: 8px;}
.of-start p {font-size: 1rem;}
/** Form Field **/
.of-row, .of-radio {padding: 20px 30px;}
.of-row {display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 30px; padding: 20px; border-bottom: 1px solid #ddd;}
.of-row:last-child {border-bottom: none;}
.of-label {margin-bottom: 6px; position: relative;}
.of-label label {font-size: .9rem; line-height: 1.2; font-weight: 600;}
.of-label label span {color: #ff0000;}
.of-label label span.optional {font-weight: 300; color: #333;}
.of-label label em {font-weight: 300; font-style: italic;}
.of-field {position: relative;}
.of-field input, .of-field textarea, .of-field select {font-size: .935rem; line-height: 1.2; padding: 11px 12px; border: 2px solid #d4d8dc; border-radius: 6px;  transition: all 0.2s ease; background: #fff; width: 100%;}
.of-field textarea {line-height: 1.4; margin-bottom: -5px;}
.of-field select {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 8px center; background-repeat: no-repeat; background-size: 20px; padding-right: 30px;}
.of-field input:hover, .of-field textarea:hover, .of-field select:hover {outline: none; border-color: #b3b3b3;}
.of-field input:focus, .of-field textarea:focus, .of-field select:focus {outline: none; border-color: #0073aa;}
.of-radio {background: #f8f8f8; border-bottom: 1px solid #ddd;}
.rs-radio {display: flex; gap: 20px;}
.rs-radio label {display: flex; align-items: center; gap: 5px; cursor: pointer;}
.rs-radio input {margin: 0; padding: 0;}
/** Form Fix **/
.of-row.of-fix {align-items: flex-start;}
.of-row.of-column {display: block; width: 100%;}
.of-row.of-two {display: flex; align-items: flex-start; gap: 25px;}
.of-row.of-two .col {width: 100%;}
.of-row.of-ps {background: #fff;}
.of-title .of-field input {font-size: 1.1rem; font-weight: 500; padding: 14px 14px;}
.of-state {display: flex; gap: 25px;}
.of-state .col {width: 100%;}
.of-flex {padding: 20px; display: grid; gap: 18px; column-gap: 25px;}
.of-flex.of-two {grid-template-columns: repeat(2, 1fr);}
.of-flex .of-row {display: block; padding: 0; border: none;}
.of-row.of-radio {display: flex; flex-direction: column; align-items: flex-start; gap: 0;}
.of-row.of-radio .of-field {width: 100%; max-width: 720px;}
/** Industry **/
.of-inds {border: 2px solid #e1e5e9; border-radius: 6px; pbackground: #fff;}
.of-terms {padding: 15px; max-height: 280px; overflow-y: auto;}
.ofi-row {margin-bottom: 25px; transition: opacity 0.2s ease;}
.ofi-row:last-child {margin-bottom: 0;}
.ofi-row h5 {font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 0 0 10px 0;}
.of-check ul {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px;}
.job-categories.of-check ul {grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.of-check li {margin: 0 0 2px;}
.of-check label {font-size: .95rem; line-height: 1.2; display: flex; align-items: center; gap: 8px; cursor: pointer;}
.of-check label:hover {color: #0e6be6;}
.of-check input[type="checkbox"] {width: 14px; height: 14px; accent-color: #0073aa; margin: 0;}
.ofh-box {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px;}
.ofh-box .of-help {margin-top: 0;}
.ofh-inds {display: flex; align-items: center; gap: 20px;}
.uncheck-all-btn {font-size: .8rem; line-height: 1.4; font-weight: 600; color: #EF0000; cursor: pointer; transition: all 0.2s ease;}
.uncheck-all-btn i {font-size: 0.75rem;}
.industry-counter, .job-categories-counter {font-size: .8rem; color: #666; text-align: right;}
.job-categories-counter.max-reached {color: #ED0C0C; font-weight: 600;}
.industry-counter.max-reached {color: #ED0C0C; font-weight: 600;}
.terms-search-container {padding: 10px 14px; border-bottom: 2px solid #e1e5e9; width: 100%; position: relative;}
.search-input-wrapper {position: relative; display: inline-block; width: 100%;}
.search-input-wrapper input {font-size: .86rem; padding: 9px 40px 9px 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box;}
.search-input-wrapper input:hover {border-color: #b6b6b6;} 
.search-input-wrapper input:focus {border-color: #666;}
.clear-search-btn {font-size: .8rem; color: #ff0000; width: 24px; height: 24px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; opacity: 0; visibility: hidden;}
.clear-search-btn.visible {opacity: 1; visibility: visible;}
.ofi-row.hidden {display: none;}
.no-results-message {padding: 20px 0 55px; font-size: .95rem; line-height: 1.3; text-align: center; color: #666; font-style: italic;}
/** Display Selector */
.display-selector {display: flex; gap: 8px;}
.display-option {width: 50%; padding: 12px 12px 12px 16px; border: 2px solid #d4d8dc; border-radius: 8px; background: #fff; display: flex; cursor: pointer; position: relative; transition: all 0.3s ease;}
.display-icon {min-width: 18px; margin: 2px 8px 0 0;}
.display-icon i {width: 18px; height: 18px; font-size: .6rem; line-height: 1; color: #fff; padding-top: 5px; border-radius: 50%; display: block; text-align: center;}
.display-icon i.fa-check {background: #009b5d;}
.display-icon i.fa-xmark {background: #d63638;}
.display-text {padding-right: 40px;}
.display-one {font-size: .96rem; line-height: 1.2; font-weight: 500; margin-bottom: 2px;}
.display-two {font-size: .83rem; line-height: 1.35; color: rgba(0,0,0,.7);}
.display-option input[type="radio"] {position: absolute; width: 15px; height: 15px; top: 12px; right: 12px; margin: 0;}
.display-option:hover {border-color: #b3b3b3;}
.display-option.selected {border-color: #0073aa;}
/** Employees Selector **/
.employees-selector {display: flex; gap: 15px;}
.employee-option {width: 100%; height: 80px; border: 2px solid #e1e5e9; border-radius: 8px; background: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; padding: 10px;}
.employee-option:hover {border-color: #0073aa; background: #f0f8ff;}
.employee-option.selected {border-color: #0073aa; background: #e6f3ff; box-shadow: 0 2px 8px rgba(0, 115, 170, 0.2);}
.employee-option input[type="radio"] {position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;}
.employee-icon {font-size: 1.2rem; color: #666; margin-bottom: 2px; transition: color 0.3s ease;}
.employee-option:hover .employee-icon,
.employee-option.selected .employee-icon {color: #0073aa;}
.employee-text {font-size: .9rem; line-height: 1.2; font-weight: 500; color: #333; text-align: center;}
.employee-option:hover .employee-text,
.employee-option.selected .employee-text {color: #0073aa;}
/* --------------------------------
 PRODUCTS & SERVICES GRID
--------------------------------- */
.services-repeater {display: flex; flex-direction: column; gap: 15px;}
.service-row {border: 1px solid #babdc0; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: .3s; overflow: hidden;}
.service-row:hover {border-color: #acafb1;}
.service-row-top {padding: 10px 15px 10px 20px; background: #f9fafc; border-bottom: 1px solid #babdc0; display: flex; justify-content: space-between; align-items: center;}
.service-row-title h4 {font-size: .85rem; line-height: 1.2; font-weight: 600;}
.service-row button.remove-service {font-size: 1.05rem; color: #333; ransition: .2s ease; white-space: nowrap; cursor: pointer;}
.service-row button.remove-service:hover {color: #e9030e;}
.service-info {padding: 20px; display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: 30px;}
.service-row .col {position: relative;}
.service-row .col.serv-info {display: flex; flex-direction: column; gap: 15px;}
/* Service Image Section */
.service-row button.service-image-upload-btn {font-size: .8rem; padding: 6px 10px; border: 1px solid #606060; margin-bottom: 4px; border-radius: 3px; display: inline-block;}
.service-row button.service-image-upload-btn:hover {border-color: #222;}
.service-row .serv-img .service-image-preview {position: relative; display: inline-block;}
.service-row .serv-img .service-image-preview img {width: 100%; height: auto; border-radius: 4px;}
.service-row .serv-img .remove-service-image {font-size: .8rem; line-height: 1; width: 24px; height: 24px; background: #ff0000; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 5px; right: 5px; border: none; border-radius: 50%; cursor: pointer;}
.service-row .serv-img .remove-service-image:hover {background: #dc0711;}
.service-row .serv-img .of-label {margin-bottom: 8px;}
.service-row .serv-img .of-help {font-size: 0.8rem; color: #666; margin-top: 5px; line-height: 1.3;}
/* Add More Button */
#add-service {background: #28a745; color: #fff; padding: 8px 15px; border-radius: 4px; font-size: .9rem; font-weight: 500; cursor: pointer; transition: background 0.2s ease; align-self: flex-start; border: none; margin-top: 10px;}
#add-service i {font-size: .75rem; vertical-align: .5px;}
#add-service:hover {background: #218838;}
/* --------------------------------
 FORM OTHER
--------------------------------- */
.word-count {margin-top: 5px; font-size: .8rem; color: #999; text-align: right;}
.of-help {margin-top: 8px; font-size: .82rem; color: #666; line-height: 1.4;}
.of-help a {color: #3a49da; font-weight: 600;}
.of-help a:hover {text-decoration: underline;}
.of-help strong {font-weight: 600;}
.of-gallery .of-help {text-align: center;}
.field-error {margin-top: 5px; color: #ff0000; font-size: .88rem; line-height: 1.3; font-weight: 500; display: none;}
.field-error.show {display: block;}
.form-messages {font-size: .9rem; line-height: 1.3; margin-bottom: 30px; padding: 10px; border-radius: 6px; text-align: center; display: none;}
.form-messages.success {background: #d4edda; color: #155724; border: 1px solid #c3e6cb; display: block;}
.form-messages.error {background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; display: block;}
/* Other Language Field */
.other-language-field {margin-top: 10px;}
/** FREE PLAN **/
.readonly-field {}
.readonly-field .of-label label, .readonly-field label {color: rgba(0,0,0,.5);}
.readonly-field input, .readonly-field select, .readonly-field textarea {border-color: #e9edf0; cursor: not-allowed!important;}
.readonly-field input:hover, .readonly-field select:hover, .readonly-field textarea:hover,
.readonly-field input:focus, .readonly-field select:focus, .readonly-field textarea:focus {border-color: #e9edf0;}
.readonly-field input::placeholder {color: transparent;}
.readonly-field .of-help a {opacity: .5;}
.readonly-field .of-field::after, .of-feat.readonly-field label::after {content: ''; background: url('images/premium-only.svg') no-repeat; width: 113px; height: 18px; top: 11px; left: 12px; background-size: contain; display: block; position: absolute; cursor: not-allowed!important;}
.of-feat.readonly-field label {color: rgba(0,0,0,.4); cursor: not-allowed!important;}
.of-feat.readonly-field label::after {top: 1px; left: 265px;}
.of-feat .premium-only {color: #f57c00; font-size: 12px; font-weight: normal; margin-left: 5px;}
.of-help.of-in a {color: #f57c00;}
.of-serv.readonly-field .service-row, .of-serv.readonly-field .service-row:hover {border-color: #d1d5db!important; box-shadow: none!important;}
.of-serv.readonly-field .service-row-top {background: #f6f6f6; border-color: #d1d5db;}
.of-serv.readonly-field .service-row-top h4 {color: rgba(0,0,0,.6);}
.of-serv.readonly-field .service-info input, .of-serv.readonly-field .service-info textarea {background: #f6f6f6;}
.of-serv.readonly-field .premium-restriction-message {margin-top: 0;}
.of-serv.readonly-field .service-row button.service-image-upload-btn, 
.of-serv.readonly-field .service-row button.service-image-upload-btn:hover {background: #ebebeb; color: rgba(0, 0, 0, .3); border: 1px solid #ebebeb; cursor: not-allowed!important;}
.of-serv.readonly-field .service-row:hover {border-color: #e1e5e9;}
.of-serv.readonly-field .serv-img .of-field::after {top: 65px; left: 0;}
.of-serv.readonly-field button#add-service {background: #ebebeb; color: rgba(0,0,0,.3);}
.of-serv.readonly-field .remove-service {background: transparent; color: rgba(0,0,0,.4);}
.of-serv.readonly-field .remove-service:hover {background: transparent; color: rgba(0,0,0,.4);}
.of-radio.readonly-field .display-selector {opacity: .5;}
.of-radio.readonly-field .display-option {cursor: not-allowed!important;}
.of-radio.readonly-field .display-option.selected, .of-radio.readonly-field .display-option:hover {border-color: #d4d8dc;}
.of-radio.readonly-field .of-field::after {display: none;}
.of-radio.readonly-field .display-icon i {color: #222;}
.of-radio.readonly-field .display-icon i.fa-check {background: #f1f1f1;}
.of-radio.readonly-field .display-icon i.fa-xmark {background: #f1f1f1;}
.drag-drop-box[data-disabled="true"] {cursor: not-allowed; opacity: 0.6; background: #f6f6f6;}
.drag-drop-box[data-disabled="true"]:hover {border-color: #d1d5db; background: #f6f6f6; transform: none;}
.drag-drop-box[data-disabled="true"] .drop-text, 
.drag-drop-box[data-disabled="true"] .drop-text .click-text,
.drag-drop-box[data-disabled="true"] .drop-formats {color: #5c5c5c!important;}
.of-file.readonly-field .drag-drop-box {background: #f0f0f0!important;}
.of-file.readonly-field .drag-drop-box[data-disabled="true"]:hover {background: #f0f0f0;}
.of-file.readonly-field .of-field::after {left: inherit; right: 0;}
.of-row.of-two .col.readonly-field input, .of-row.readonly-field input {background: #f6f6f6;}
/* Premium restriction message */
.premium-restriction-message {}
.premium-restriction-message i {color: #ff9800; font-size: 14px;}
.premium-restriction-message a {color: #f57c00; font-weight: 600;}
.premium-restriction-message a:hover {text-decoration: underline;}
.readonly-field.disabled-options .of-field::after {display: none;}
.premium-restriction-message {margin-top: 8px; position: relative; z-index: 2;}
.restriction-message {padding: 10px 12px; font-size: .8rem; color: #f57c00; background: #fff3e0; border: 1px solid #ffcc80; border-radius: 6px; display: inline-block;}
.restriction-message i {font-size: .75rem; margin-right: 2px;}
.of-gallery .premium-restriction-message {display: flex; justify-content: center;}
.disabled-options .display-selector {background: #f8f9fa; border-radius: 8px; padding: 2px;}
.disabled-options .disabled-option .display-icon i {color: #ccc !important;}
.disabled-options .disabled-option.selected .display-icon i {color: #999 !important;}
.disabled-options .disabled-selector {pointer-events: none!important; position: relative;}
.disabled-options .disabled-option {cursor: not-allowed!important; user-select: none;}
.disabled-options .disabled-option:hover {border-color: #e1e5e9 !important; background-color: transparent !important;}
.disabled-options .disabled-option.selected {border-color: #d4d8dc !important;}
.disabled-options .disabled-option input[type="radio"] {pointer-events: none !important; cursor: not-allowed !important;}
/* Upload Drag & Drop Zone */
.drag-drop-container {width: 100%;}
.drag-drop-box {padding: 15px 20px; border: 2px dashed #d1d5db; border-radius: 8px; background: #fafafa; cursor: pointer; transition: all 0.3s ease; position: relative;}
.drag-drop-box:hover {border-color: #0073aa; background: #f0f8ff;}
.drag-drop-box.drag-over {border-color: #0073aa; background: #e6f3ff; transform: scale(1.02);}
.drop-content {display: flex; flex-direction: row; align-items: flex-start; gap: 15px;}
.drop-icon i {font-size: 1.6rem; line-height: 1.3; color: #6b7280;}
.drop-text {font-size: .9rem; line-height: 1.3; color: #374151; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.drop-hp {display: none;}
.click-text {color: #0073aa;}
.drop-formats {font-size: .76rem; line-height: 1.3; color: #6b7280; margin-top: 3px;}
.drag-drop-box .upload-text {font-size: .85rem; color: #666;}
.drag-drop-box .upload-progress {width: 100%; height: 6px; background: #e1e5e9; margin-top: 8px; border-radius: 50px; position: relative;}
.drag-drop-box .progress-bar {height: 100%; background: #0073aa; border-radius: 4px; width: 0%; transition: width 0.3s ease;}
.drag-drop-box .progress-text {position: absolute; top: -20px; right: 0; font-size: .7rem; color: #666;}
.drag-drop-box.gallery-drop-zone {padding: 25px;}
.drag-drop-box.gallery-drop-zone .drop-content {flex-direction: column; align-items: center;}
/* Gallery Drop Zone States */
#gallery-drop-zone.disabled {cursor: not-allowed;}
#gallery-drop-zone.disabled:hover {border-color: #d1d5db; background: #fafafa; transform: none;}

#gallery-drop-zone.disabled .gallery-item img, #gallery-drop-zone.disabled .gallery-item .file-name,
#gallery-drop-zone.disabled .gallery-item .file-size {opacity: .6;}
/* File Preview */
.file-preview {border: 2px solid #e1e5e9; border-radius: 8px; padding: 15px; background: #fff;}
.file-preview-content {display: flex; align-items: center; gap: 15px;}
.file-preview .file-icon {width: 48px; height: 48px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.file-preview .file-icon i {font-size: 24px; color: #6b7280;}
.file-preview .file-info {flex: 1;}
.file-preview .file-name {font-size: .9rem; line-height: 1.3; font-weight: 500; color: #222; margin-bottom: 4px;}
.file-preview .file-size {font-size: .76rem; color: #6b7280;}
.file-preview .remove-file-btn {background: #f4f4f4; color: #e9030e; font-size: 1.05rem; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; border-radius: 50%; transition: all 0.2s ease;}
.file-preview .remove-file-btn:hover {background: #e9030e; color: #fff;}
/* Image Preview */
.image-preview {margin-top: 6px;}
.image-preview button {padding: 6px 8px; font-size: .8rem; line-height: 1.2; background: #dc3545; color: #fff; border-radius: 4px; top: 0; right: 0; position: absolute; display: block; cursor: pointer; transition: .3s ease;}
.image-preview button:hover {background: #c82333;}
.image-preview .file-info {margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px;}
.image-preview .file-name {font-size: .85rem; font-weight: 500; color: #333; margin-bottom: 3px;}
.image-preview .file-size {font-size: .75rem; color: #666;}
/* Gallery Preview */
.gallery-preview {display: none; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 15px;}
.gallery-preview.has-items {display: grid;}
.gallery-preview.uploading {display: grid;}
.gallery-item {aspect-ratio: 1; position: relative; border: 2px solid #e1e5e9; border-radius: 6px; overflow: hidden; background: #fff;}
.gallery-item.loading {display: flex; align-items: center; justify-content: center; background: #f8f9fa; min-height: 120px;}
.gallery-item img {width: 100%; height: 100%; object-fit: cover; display: block;}
.gallery-item .gallery-info {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; padding: 5px; font-size: 11px;}
.gallery-item .file-name {font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gallery-item .file-size {opacity: 0.8;}
.gallery-remove {font-size: 12px; width: 24px; height: 24px; background: #ff0000; color: #fff; top: 5px; right: 5px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; transition: opacity 0.3s ease; z-index: 2;}
.gallery-remove:hover {background: #dc0711;}
.gallery-loading {display: flex; flex-direction: column; align-items: center; gap: 8px; color: #666;}
.gallery-loading .loading-spinner {width: 24px; height: 24px; border: 2px solid #f3f3f3; border-top: 2px solid #0073aa; border-radius: 50%; animation: spin 1s linear infinite;}
.gallery-loading .loading-text {font-size: .8rem; font-weight: 300;}
.gallery-loading .loading-percent {font-size: .75rem; color: #0073aa; font-weight: 600;}
/* --------------------------------
 UPLOAD PROGRESS
--------------------------------- */
.upload-progress-container {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; border: 2px dashed #e1e5e9; border-radius: 8px; z-index: 10; padding: 15px; min-height: 120px;}
.upload-item {width: 100%; position: relative; display: flex; gap: 15px; transition: all 0.3s ease;}
.upload-item.uploading {}
.upload-item.completed {border-color: #4CAF50;}
.upload-item.failed {border-color: #f44336;}
.upload-item .file-icon {width: 48px; height: 48px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.upload-item .file-icon i {font-size: 24px; color: #666;}
.upload-item .file-icon.pdf-icon {background: #ff4444; border-color: #ff4444;}
.upload-item .file-icon.pdf-icon i {color: #fff;}
.upload-item .file-icon.image-icon {background: #4CAF50; border-color: #4CAF50;}
.upload-item .file-icon.image-icon i {color: #fff;}
.upload-content {flex: 1; min-width: 0;}
.upload-title {font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.upload-size {font-size: 12px; color: #666; margin-bottom: 8px;}
.upload-progress-bar {width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin-bottom: 6px;}
.upload-progress-fill {height: 100%; background: linear-gradient(90deg, #2196F3, #1976D2); border-radius: 3px; transition: width 0.3s ease; width: 0%;}
.upload-item.completed .upload-progress-fill {background: linear-gradient(90deg, #4CAF50, #388E3C);}
.upload-item.failed .upload-progress-fill {background: linear-gradient(90deg, #f44336, #D32F2F); width: 100%;}
.upload-status-row {display: flex; justify-content: space-between; align-items: center;}
.upload-status {font-size: 12px; font-weight: 500;}
.upload-status.uploading {color: #2196F3;}
.upload-status.completed {color: #4CAF50;}
.upload-status.failed {color: #f44336;}
.upload-percentage {font-size: 12px; font-weight: 600; color: #333;}
.upload-close {position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: none; border: none; cursor: pointer; color: #999; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; z-index: 2;}
.upload-close:hover {background: #f0f0f0; color: #666;}
.upload-spinner {position: absolute; top: 10px; right: 35px; width: 16px; height: 16px; border: 2px solid #f3f3f3; border-top: 2px solid #2196F3; border-radius: 50%; animation: spin 1s linear infinite; z-index: 1;}
.upload-item.completed .upload-spinner, .upload-item.failed .upload-spinner {display: none;}
.drag-drop-box.uploading .drop-content {display: none !important;}
.drag-drop-box.uploading .upload-progress-container {display: flex !important;}
.final-upload-preview {width: 100%; background: #fff; border: 2px solid #e1e5e9; border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 15px; min-height: 80px;}
.final-upload-preview .file-icon {width: 48px; height: 48px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.final-upload-preview .file-icon.pdf-icon {background: #ff4444; border-color: #ff4444;}
.final-upload-preview .file-icon.pdf-icon i {color: #fff;}
.final-upload-preview .file-icon.image-icon {background: #4CAF50; border-color: #4CAF50;}
.final-upload-preview .file-icon.image-icon i {color: #fff;}
.final-upload-preview .file-icon i {font-size: 24px; color: #666;}
.final-upload-preview .file-info {flex: 1; min-width: 0;}
.final-upload-preview .file-name {font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.final-upload-preview .file-size {font-size: 12px; color: #666;}
.final-upload-preview .remove-file {font-size: 14px; width: 32px; height: 32px; background: #dc3545; color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0;}
.final-upload-preview .remove-file:hover {background: #c82333;}
/* Image Upload Final Preview (Logo, Banner, Poster) */
.final-image-preview {position: relative;}
.final-image-preview img {width: 100%; height: auto; display: block;}
.final-image-preview.final-logo-preview img {border-radius: 8px; border: 2px solid #e1e5e9;}
.final-image-preview .image-info {margin-top: 8px;}
.final-image-preview .file-name {font-size: .9rem; line-height: 1.3; font-weight: 500; color: #333; margin-bottom: 3px;}
.final-image-preview .file-size {font-size: .8rem; color: #666;}
.final-image-preview .remove-image {font-size: 12px; width: 28px; height: 28px; background: #dc3545; color: #fff; top: 0; right: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; border: none; transition: background 0.2s ease;}
.final-image-preview .remove-image:hover {background: #c82333;}
/* Services Upload */
.service-upload-progress {width: 100%; padding: 12px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; margin-top: 8px; display: none;}
.service-progress-bar {width: 100%; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; margin-bottom: 8px; position: relative;}
.service-progress-fill {height: 100%; background: linear-gradient(90deg, #28a745, #20c997); border-radius: 4px; width: 0%; transition: width 0.3s ease; position: relative;}
.service-progress-fill::after {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 50px 50px; animation: move 2s linear infinite;}
.service-progress-text {font-size: 12px; font-weight: 600; color: #495057; text-align: center;}
.service-upload-progress.uploading .service-progress-text {color: #28a745;}
.service-upload-progress.completed .service-progress-text {color: #28a745;}
.service-upload-progress.failed .service-progress-text {color: #dc3545;}
.service-upload-progress.failed .service-progress-fill {background: linear-gradient(90deg, #dc3545, #c82333);}
/* --------------------------------
 FORM JOBS
--------------------------------- */
.job-categories {border: 2px solid #e1e5e9; border-radius: 6px; background: #fff;}
.job-cat-box {height: 250px; overflow-y: auto; padding: 15px;}
.checkbox {display: flex; gap: 30px;}
.checkbox .of-label {margin-bottom: 12px;}
label.checkbox-label {font-size: .95rem; line-height: 1.3; cursor: pointer;}
label.checkbox-label input {width: 14px; height: 14px; vertical-align: -1.5px; margin: 0 4px 0 0;}
label.checkbox-label:hover {color: #0e6be6;}
/* Business Page Search */
.business-page-search {position: relative;}
.business-page-search input[type="text"] {width: 100%;}
.search-results {position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 100; max-height: 200px; overflow-y: auto;}
.search-result-item {padding: 14px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s;}
.search-result-item:hover {background: #f8f9fa;}
.search-result-item:last-child {border-bottom: none;}
.no-results {padding: 16px 16px; font-size: .95rem; color: #666; font-style: italic; text-align: center;}
.selected-business {padding: 12px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; margin-top: 8px;}
.business-info {display: flex; justify-content: space-between; align-items: center;}
.business-title {font-weight: 500; color: #333;}
.remove-business {background: #dc3545; color: #fff; padding: 4px 8px; font-size: .8rem; border-radius: 4px; cursor: pointer; border: none;}
.remove-business:hover {background: #c82333;}
/* Custom Date Picker */
.custom-date-picker {position: relative; display: inline-block; width: 100%;}
.custom-date-picker input {width: 100%; padding-right: 40px; cursor: pointer;}
.date-picker-icon {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none;}
.date-picker-dropdown {position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 2px solid #0073aa; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; margin-top: 4px;}
.date-picker-header {display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #0073aa; color: white; border-radius: 6px 6px 0 0;}
.date-picker-title {font-weight: 600; font-size: 1rem;}
.date-nav-btn {background: none; border: none; color: white; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.2s;}
.date-nav-btn:hover {background: rgba(255, 255, 255, 0.2);}
.date-picker-calendar {padding: 16px;}
.calendar-grid {display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px;}
.calendar-day-header {text-align: center; font-weight: 600; font-size: 0.8rem; color: #666; padding: 8px 4px;}
.calendar-day {text-align: center; padding: 8px 4px; cursor: pointer; border-radius: 4px; transition: all 0.2s; font-size: 0.9rem;}
.calendar-day:hover {background: #f0f8ff; color: #0073aa;}
.calendar-day.selected {background: #0073aa; color: white;}
.calendar-day.other-month {color: #ccc;}
.calendar-day.today {background: #e6f3ff; color: #0073aa; font-weight: 600;}
.calendar-day.past-date {color: #ccc; cursor: not-allowed;}
.calendar-day.past-date:hover {background: none; color: #ccc;}
/* --------------------------------
 FORM DEALS
--------------------------------- */
.of-row.of-venue {grid-template-columns: 60px 1fr; align-items: start;}
.of-row.of-venue .of-label {padding-top: 10px;}
/* --------------------------------
 FORM END
--------------------------------- */
.of-note {display: flex; flex-direction: column; gap: 3px; font-size: .9rem; line-height: 1.4; background: #f8f9fa; padding: 20px 30px; border-radius: 8px;}
.of-note h4 {font-weight: 600;}
.of-note p {color: rgba(0,0,0,.85);}
.of-note p strong {font-weight: 600;}
.of-term {padding: 18px 30px; text-align: center;}
.of-term label {font-size: .9em; line-height: 1.3; cursor: pointer;}
.of-term label input {width: 14px; height: 14px; margin: 0 3px 0 0; vertical-align: -2px;}
.of-term a {color: #1d32fc;}
.of-term a:hover {text-decoration: underline;}
.of-submit {padding: 25px 30px; background: #f8f9fa; border-top: 1px solid #e1e5e9; border-bottom: 1px solid #e1e5e9; display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center;}
.btn-draft, .btn-submit {font-size: 1rem; line-height: 1.2; font-weight: 600; padding: 18px 24px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-block;}
.btn-draft {background: #6c757d; color: #fff;}
.btn-draft:hover {background: #5a6268; transform: translateY(-1px);}
.btn-submit {background: #0073aa; color: #fff;}
.btn-submit:hover {background: #005a87; transform: translateY(-1px);}
.btn-submit:disabled {background: #ccc; cursor: not-allowed; transform: none;}
/* Form Submission Overlay */
.form-loading-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999;}
.loading-content {text-align: center; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); max-width: 400px; width: 90%;}
.loading-spinner {width: 60px; height: 60px; border: 4px solid #f3f3f3; border-top: 4px solid #0073aa; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto;}
.of-state .loading-spinner {position: absolute; top: 5px; right: 5px; z-index: 3;}
.loading-progress {margin-bottom: 20px;}
.progress-bar-container {width: 100%; height: 8px; background: #e1e5e9; border-radius: 4px; overflow: hidden; margin-bottom: 10px;}
.progress-bar-container .progress-bar {height: 100%; background: linear-gradient(90deg, #0073aa, #00a0d2); width: 0%; transition: width 0.3s ease; border-radius: 4px;}
.loading-progress .progress-text {font-size: 18px; font-weight: 600; color: #0073aa; margin-left: 0;}
.loading-message {margin: 0 0 10px 0; color: #666; font-size: 16px; font-weight: 500;}
.upload-notice {margin: 0; color: #f57c00; font-size: 14px; font-style: italic;}
/* --------------------------------
 EDIT FORM STYLES
--------------------------------- */
.current-image-preview {margin-bottom: 10px;}
.current-image-preview img {display: block; margin-bottom: 10px; border-radius: 4px;}
.current-image-preview .image-info p {font-size: .8rem; color: #666;}
.current-image-preview .remove-current-image {background: #dc3545; color: #fff; font-size: 12px; width: 28px; height: 28px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 0; right: 0;}
.current-image-preview .remove-current-image:hover {background: #c82333;}
#current-logo-preview img {border: .5px solid rgba(0, 0, 0, .2); border-radius: 6px;}
/* File Upload Preview */
.current-file-preview {display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px; border: 2px solid #e1e5e9; border-radius: 8px;}
.current-file-preview .file-icon {width: 60px; height: 60px; background: #ff4444; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.current-file-preview .file-icon i {font-size: 1.8rem; color: #fff;}
.current-file-preview .file-info {flex: 1;}
.current-file-preview .file-name {font-size: .9rem; font-weight: 500; margin-bottom: 4px;}
.current-file-preview .file-name a {color: #222; text-decoration: none;}
.current-file-preview .file-name a:hover {text-decoration: underline;}
.current-file-preview .file-size {font-size: .8rem; color: #666;}
.current-file-preview .remove-current-file {background: #f4f4f4; color: #e9030e; font-size: 1.05rem; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; border-radius: 50%; transition: all 0.2s ease;}
.current-file-preview .remove-current-file:hover {background: #e9030e; color: #fff;}
/* Gallery Actions */
#gallery-upload-container {margin-bottom: 10px;}
.gallery-actions {margin-top: 15px; display: flex; justify-content: center;}
.gallery-actions button {background: #dc3545; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; font-size: 0.85rem; cursor: pointer;}
.gallery-actions button:hover {background: #c82333;}
/* Hide current file preview styling when only undo button is shown */
#current-file-preview:has(.file-preview-content:hidden) {
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

/* Undo button styling */
.undo-remove-file {
    background: #28a745;
    color: #fff;
    padding: 8px 16px;
    font-size: .85rem;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    display: none;
}

.undo-remove-file:hover {
    background: #218838;
}
/* Removed file info display */
.removed-file-info {margin-bottom: 5px;}
.removed-file-text {display: flex; flex-direction: column;}
.removed-file-text strong {font-size: .88rem; font-weight: 600; color: #525252;}
.removed-file-text span {font-size: .8rem; color: #666;}
.current-file-preview.showing-undo {padding: 0; border: none; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 14px;}


.undo-remove-image {background: #28a745; color: #fff; padding: 6px 10px; font-size: .8rem; line-height: 1.2; cursor: pointer; border: none; border-radius: 4px;}
.undo-remove-image {margin-top: 8px;}
.undo-remove-image:hover,
.undo-remove-file:hover,
.undo-remove-gallery:hover,
.undo-remove-all-gallery:hover {background: #218838;}
.current-gallery-preview {margin-bottom: 20px;}
.current-gallery-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 15px;}
.current-gallery-item {position: relative; aspect-ratio: 1; border: 2px solid #e1e5e9; border-radius: 6px; overflow: hidden;}
.current-gallery-item img {width: 100%; height: 100%; object-fit: cover;}
.current-gallery-item .remove-current-gallery {position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background: #ff0000; color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.current-gallery-item .remove-current-gallery:hover {background: #dc0711;}
/* Gallery removed state */
.current-gallery-item.removed {display: none;}
.current-gallery-preview .remove-all-gallery {background: #dc3545; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; font-size: 0.85rem; cursor: pointer;}
.current-gallery-preview .remove-all-gallery:hover {background: #c82333;}
/* Current Service Image (Edit Form) */
.current-service-image {position: relative; display: inline-block; margin-bottom: 10px;}
.current-service-image img {border-radius: 4px; border: 1px solid #e1e5e9;}
.remove-current-service-image {font-size: .8rem; line-height: 1; width: 24px; height: 24px; background: #ff0000; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 5px; right: 5px; border: none; border-radius: 50%; cursor: pointer;}
.remove-current-service-image:hover {background: #dc0711;}
.service-image-upload-btn.current-upload-btn {margin-left: -4px;}



/* Undo buttons styling */
.undo-remove-service-image {
    background: #28a745;
    color: #fff;
    padding: 6px 10px;
    font-size: .8rem;
    line-height: 1.2;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    margin-top: 8px;
    display: none;
}

.undo-remove-service-image:hover {
    background: #218838;
}

/* Gallery removed state - already exists but ensuring it's correct */
.current-gallery-item.removed {
    opacity: 0.4;
    pointer-events: none;
}

.current-gallery-item.removed .remove-current-gallery {
    display: none !important;
}

.current-gallery-item.removed .undo-remove-gallery {
    display: flex !important;
    opacity: 1;
    pointer-events: all;
}

.undo-remove-gallery {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: none;
    z-index: 3;
}

.undo-remove-gallery:hover {
    background: #218838;
}
/* --------------------------------
 ACCOUNT SETTING
--------------------------------- */
.o-sett .row {display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid #ddd;}
.o-sett .row:first-child {padding-top: 0;}
.o-sett .row.acc-img {align-items: start;}
.o-sett .pfi-img {display: flex;}
.o-sett .current-avatar {margin-right: 10px;}
.o-sett .image-upload-controls button {padding: 6px 8px; font-size: .8rem; line-height: 1.2; font-weight: 500; color: #222; border: 1px solid #b7b7b7; background: #fff; border-radius: 3px; display: inline-block; transition: .3s ease;}
.o-sett .image-upload-controls button:hover {border-color: #333;}
.o-sett .of-help {font-size: .82rem; line-height: 1.3; color: rgba(0,0,0,.7); margin-top: 6px;}
.o-sett .row.acc-img .of-help span {display: block;}
.o-sett .row.of-password, .o-sett .row.of-username {align-items: start;}
.o-sett .of-password .of-label {padding-top: 13px;}
.o-sett .of-password .of-field button {top: 13.5px; right: 12px; position: absolute;}
.o-sett .of-password .of-field button i {font-size: 1rem;}
.o-sett #password-indicator {width: 400px; margin-top: 6px;}
.o-sett #password-strength {height: 4px; background: #ddd; border-radius: 2px;}
.o-sett #password-bar {height: 100%; width: 0%; border-radius: 2px; transition: all 0.3s;}
.o-sett #password-text {font-size: .825rem; line-height: 1.2; display: block; margin-top: 4px;}
.o-sett .row.of-username .of-label {padding-top: 13px;}
.o-sett .button {margin-top: 20px; display: flex; justify-content: flex-end;}
.o-sett .button button {font-size: .95rem; line-height: 1.2; font-weight: 500; background: #000; color: #fff; padding: 12px 40px; border-radius: 4px; display: inline-block;}
.o-sett .button button:hover {background: #383838;}
.o-sett input[readonly]:hover, .o-sett input[readonly]:focus {outline: none; box-shadow: none;}
/* --------------------------------
 ANIMATION
--------------------------------- */
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@keyframes move {
 0% {background-position: 0 0;}
 100% {background-position: 50px 50px;}
}

/* ================================
 FORM RESPONSIVE
================================ */
@media (max-width: 1300px) {
.o-title h1 {font-size: 1.6rem;}
.of-start h2 {font-size: 1.4rem;}
}

@media (max-width: 1200px) {
.d-form .box {grid-template-columns: 300px 1fr; gap: 40px;}
}

@media (max-width: 1100px) {
.d-form .box {grid-template-columns: 280px 1fr; gap: 30px;}
.o-title h1 {font-size: 1.5rem;}
.o-title p {font-size: .93rem;}
.of-feat label {font-size: 1rem;}
.of-feat label input {width: 14px; height: 14px;}
.of-start h2 {font-size: 1.3rem;}
.of-start p {font-size: .96rem;}
.employees-selector {gap: 10px;}
}

@media (max-width: 1024px) {
.of-nav li a {font-size: .925rem;}
.of-sec {padding: 14px 18px;}
.of-start {padding: 20px 18px;}
.of-sec h3 {font-size: 1.05rem;}
.of-row {grid-template-columns: 165px 1fr;}
.of-row, .of-flex, .service-info {padding: 18px;}
.of-state, .of-row.of-two, .of-flex {gap: 18px;}
.service-row-top {padding: 10px 12px 10px 18px;}
.of-field input, .of-field textarea, .of-field select {font-size: .925rem; border-radius: 4px;}
.ofi-row h5 {font-size: 1rem;}
.of-check label {font-size: .925rem;}
.employee-icon {font-size: 1.1rem; margin-bottom: 4px;}
.drop-text {font-size: .85rem;}
.drop-formats {font-size: .75rem;}
.of-label label {font-size: .88rem;}
.rs-radio label {font-size: .96rem;}
.of-help, .service-row .serv-img .of-help {font-size: .78rem;}
.of-note {font-size: .85rem; padding: 18px;}
.of-term label {font-size: .88rem;}
.btn-draft, .btn-submit {font-size: 1rem; padding: 16px 0;}
}

@media (max-width: 980px) {
.of-nav {display: none;}
.o-left {padding-bottom: 25px; border-bottom: 1px solid #ddd;}
.o-left .back {margin: 15px 0;}
.o-title {margin-bottom: 0;}
.o-title h1 {font-size: 1.8rem;}
.o-title p {font-size: 1rem;}
.o-title a {font-size: .96rem;}
.d-form .box {display: block; width: 100%;}
.of-start h2 {font-size: 1.4rem;}
.of-start p {font-size: .98rem;}
.of-check li {margin: 0;}
.of-field input, .of-field textarea, .of-field select {font-size: .96rem;}
.of-help, .service-row .serv-img .of-help {font-size: .82rem;}
.btn-draft, .btn-submit {font-size: .96rem;}
}

@media (max-width: 853px) {

}

@media (max-width: 760px) {

}

@media (max-width: 600px) {
.of-start h2, .of-title .of-label {display: none;}
.d-form .box {margin-bottom: 0; padding-bottom: 30px;}
.o-left {padding: 0; border: none;}
.o-left .back {margin: 0;}
.o-right {background: none;}
.back a {font-size: .7rem; line-height: 1.2; padding: 5px 8px; background: #fff;}
.back a i {font-size: .62rem;}
.o-title h1 {font-size: 1.4rem;}
.o-title p, .o-title a {font-size: .95rem;}
.oform {padding-top: 25px; border-top: 1px dashed #c9c9c9; margin: 25px 0 0;}
.of-box {margin-bottom: 14px; border-radius: 8px; background: #fff;}
.of-sec {padding: 14px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.of-sec h3 {font-size: 1rem;}
.of-row {display: flex; flex-direction: column; align-items: flex-start; gap: 0;}
.of-row, .service-info, .of-row.of-state .col, .of-row.of-two .col, .of-flex .of-row {padding: 13px 15px 15px;}
.of-row.of-state, .of-row.of-two {padding: 0; border-bottom: 0; gap: 0}
.of-row.of-state .col, .of-row.of-two .col, .of-flex .of-row {border-bottom: 1px solid #ddd;}
.of-flex {gap: 0; padding: 0;}
.of-flex.of-two {display: flex; flex-direction: column;}
.of-feat {margin-bottom: 15px;}
.of-feat label {font-size: .96rem; font-weight: 500; padding: 12px 15px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; display: inline-block; width: 100%;}
.of-feat label input {width: 12px; height: 12px; margin: 0 2px 0 0; vertical-align: -1px;}
.of-feat.readonly-field label::after {top: 12.5px; left: 250px;}
.of-start {padding: 18px 15px;}
.of-start h3 {font-size: 1.25rem; line-height: 1.2; margin-bottom: 8px; display: block; text-align: left;}
.of-start p {font-size: .95rem; text-align: left; margin: 0 auto;}
.of-label label {font-size: .9rem;}
.rs-radio label {font-size: .95rem;}
.of-row.of-title {padding: 20px 15px;}
.of-title .of-field input {padding: 12px; font-size: 1rem;}
.of-field input, .of-field textarea, .of-field select {font-size: .93rem; border: 1px solid #c5c8cb; padding: 10px;}
.of-field textarea {line-height: 1.5;}
.terms-search-container {padding: 10px;}
.search-input-wrapper input {font-size: .88rem; padding: 8px 10px;}
.search-input-wrapper input:hover {border-color: #ccc;}
.of-terms {padding: 10px;}
.ofi-row h5 {font-size: .96rem; margin-bottom: 10px;}
.of-check label {font-size: .95rem;}
.ofh-box {flex-direction: column; align-items: flex-start; gap: 5px}
.employees-selector {gap: 6px;}
.employee-option {border: 1px solid #c5c8cb;}
.of-row.of-serv {padding-top: 12px;}
.service-info {display: flex; flex-direction: column; gap: 0;}
.service-row .col {width: 100%;}
.service-row .col.serv-info {gap: 14px; margin-top: 14px;}
.of-serv.readonly-field .serv-img .of-field::after {top: 6px; left: 120px;}
.drag-drop-box.gallery-drop-zone {padding: 20px 15px;}
.drop-desk {display: none;}
.drop-hp {display: block;}
.gallery-preview {gap: 6px; grid-template-columns: repeat(3, 1fr);}
#add-service {font-size: .82rem;}
.of-help, .service-row .serv-img .of-help {font-size: .78rem;}
.of-note {flex-direction: column; font-size: .8rem; line-height: 1.3; padding: 12px; gap: 3px;}
.of-term {padding: 14px 10px; line-height: 1.2; text-align: left;}
.of-term label {font-size: .825rem; position: relative;}
.of-term label input {width: 12px; height: 12px; vertical-align: -.5px; margin: 0 1px 0 0;}
.of-submit {display: flex; width: 100%;}
.btn-draft, .btn-submit {font-size: .935rem; padding: 14px 0; width: 100%;}
.of-submit {gap: 8px; padding: 18px 20px;}
/* ACCOUNT SETTING */
.o-sett .row {display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 0 18px;}
.o-sett .row:first-child {padding-top: 18px;}
.o-sett .row.of-username .of-label, .o-sett .of-password .of-label {padding-top: 0}
.o-sett .button button {width: 100%;}
.of-field, .o-sett #password-indicator {width: 100%;} 
}

@media (max-width: 583px) {


}

@media (max-width: 480px) {
.o-title h1 {font-size: 1.25rem;}
.o-title p, .o-title a {font-size: .9rem;}
.o-title p {line-height: 1.3;}
.of-feat label {font-size: .9rem; padding: 12px;}
.of-feat.readonly-field label::after {left: 235px;}
.readonly-field .of-field::after, .of-feat.readonly-field label::after {width: 105px; height: 16px;}
.of-sec {padding: 12px 14px;}
.of-sec h3 {font-size: .97rem;}
.of-start {text-align: left;}
.of-start h3 {font-size: 1.05rem; margin-bottom: 5px;}
.of-start p {font-size: .85rem; max-width: inherit; margin: 0;}
.of-row.of-title {padding: 15px 14px;}
.of-row, .service-info, .of-row.of-state .col, .of-row.of-two .col, .of-flex .of-row {padding: 8px 14px 12px;}
.of-label {margin-bottom: 5px;}
.of-label label {font-size: .865rem;}
.of-label label span {font-size: .75rem;}
.of-field input, .of-field textarea, .of-field select {font-size: .9rem;}
.of-field select {background-position: right 4px center;}
.of-row.of-state {flex-direction: row; flex-wrap: wrap;}
.of-row.of-state .col {}
.of-row.of-state .col:nth-child(2), .of-row.of-state .col:nth-child(3) {width: 50%;}
.of-row.of-state .col:nth-child(2) {padding-right: 5px;}
.of-row.of-state .col:nth-child(3) {padding-left: 5px;}
.of-inds {border: 1px solid #e1e5e9;}
.terms-search-container {border-bottom: 1px solid #e1e5e9;}
.of-terms {height: 220px;}
.ofi-row {margin-bottom: 20px;}
.of-check label {font-size: .9rem;}
.ofh-inds {width: 100%; justify-content: space-between;}
.of-file.readonly-field .of-field::after {top: -28px; right: -14px;}
.display-selector {gap: 6px;}
.display-option {padding: 8px; flex-direction: column; border: 1px solid #d4d8dc;}
.display-icon {min-width: inherit; margin: 0 0 6px;}
.display-icon i {width: 18px; height: 18px; font-size: .66rem;}
.display-text {padding-right: 20px;}
.display-one {font-size: .88rem;}
.display-two {font-size: .7rem;}
.display-option input[type="radio"] {top: 8px; right: 8px;}
.drop-content {gap: 10px;}
.drop-text {font-size: .86rem;}
.drop-formats {font-size: .72rem;}
.of-help {font-size: .75rem;}
.employees-selector {display: grid; grid-template-columns: repeat(2, 1fr);}
.employee-option {height: 70px;}
.employee-icon {font-size: 1rem; margin-bottom: 2px;}
.employee-text {font-size: .86rem;}
.gallery-preview {grid-template-columns: repeat(2, 1fr);}
.drag-drop-box, .file-preview {padding: 14px;}
.drop-icon i, .file-preview .file-icon i {font-size: 1.2rem;}
.file-preview-content {gap: 10px;}
.file-preview .file-icon {width: 36px; height: 36px;}
.file-naem {font-size: .84rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.file-size {font-size: .745rem;}
.file-preview .remove-file-btn {font-size: .96rem; width: 36px; height: 36px;}
.image-preview button {font-size: .78rem;}
.restriction-message {font-size: .7rem; padding: 6px; border-radius: 4px;}
.restriction-message span {display: none;}
.of-term label span {display: none;}
.of-submit {padding: 14px 12px; flex-direction: column-reverse; gap: 5px;}
.btn-draft, .btn-submit {font-size: .92rem; font-weight: 500; padding: 12px 0;}
.o-sett .of-help {font-size: .8rem;}
.o-sett .of-password .of-field button {top: 13px;}
.o-sett .of-password .of-field button i {font-size: .95rem;}
}

@media (max-width: 400px) {

}

@media (max-width: 375px) {

}

@media (max-width: 320px) {

}
/* --------------------------------
 D-FORM LAYOUT (migrated from forbiz-old dashboard.css)
 Two-column: left nav sidebar + right form area
--------------------------------- */
.d-form .control {padding: 40px 0;}
.d-form .box {display: grid; grid-template-columns: 380px 1fr; gap: 50px; position: relative; margin-bottom: 40px;}
.o-left {position: relative;}
.o-right {width: 100%; background: #fff;}
.o-left .s-box {position: sticky; top: 20px; transition: transform 0.3s ease;}
.o-left .back {margin: 30px 0;}
.back a {font-size: .86rem; line-height: 1.1; font-weight: 500; color: #222; border: 1px solid #333; padding: 6px 12px; border-radius: 4px; display: inline-block;}
.back a i {font-size: .65rem; vertical-align: .5px;}
.o-title {margin-bottom: 20px;}
.o-title h1 {font-size: 1.8rem; line-height: 1.2; margin-bottom: 15px;}
.o-title p {font-size: .96rem; line-height: 1.4; color: rgba(0,0,0,.7);}
.o-title a {margin-top: 15px; color: #222; font-size: .92rem; line-height: 1.3; font-weight: 500; display: inline-block;}
.of-nav {padding-top: 15px; border-top: 1px solid #ddd;}
.of-nav ul {max-width: 260px; list-style: none; margin: 0; padding: 0;}
.of-nav li a {padding: 8px 10px; font-size: .95rem; line-height: 1.2; font-weight: 500; color: #222; display: block; text-decoration: none; border-radius: 4px; transition: background .2s ease, color .2s ease;}
.of-nav li a.current {background: #0478d1; color: #fff;}
.of-nav li a:hover:not(.current) {background: #f0f4f8; color: #0478d1;}
.o-right .back {display: none;}
@media (max-width: 980px) {
  .of-nav {display: none;}
  .d-form .box {display: block;}
  .o-left {padding-bottom: 25px; border-bottom: 1px solid #ddd; margin-bottom: 25px;}
  .o-right {background: none;}
}
@media (max-width: 600px) {
  .d-form .control {padding: 20px 0;}
  .o-left .back {margin: 0;}
}