/* =========================================================
   DEVICE REQUEST FORM
   MODERN ORANGE THEME
   COMPLETE FINAL CSS
========================================================= */


/* =========================================================
   MAIN WRAPPER
========================================================= */

.drf-form-wrapper {
    width: 100% !important;
    max-width: 760px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   MAIN FORM CARD
========================================================= */

.drf-form-card {
    width: 100% !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 1px solid #e1e5ea !important;
    border-radius: 16px !important;

    padding: 30px !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}


/* =========================================================
   SECTION
========================================================= */

.drf-section {
    width: 100% !important;
    margin-bottom: 30px !important;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.drf-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    margin-bottom: 24px !important;
}


.drf-section-number {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #fff1eb !important;
    color: #f97316 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


.drf-section-title h3 {
    margin: 0 0 4px !important;

    color: #111827 !important;

    font-size: 21px !important;
    font-weight: 600 !important;
}


.drf-section-title p {
    margin: 0 !important;

    color: #7b8492 !important;

    font-size: 13px !important;
}


/* =========================================================
   FIELD
========================================================= */

.drf-field {
    width: 100% !important;
    margin-bottom: 20px !important;
}


.drf-field label {
    display: block !important;

    margin: 0 0 8px !important;

    color: #20252d !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


/* =========================================================
   TWO COLUMN ROW
========================================================= */

.drf-row {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.drf-input-wrapper {
    position: relative !important;

    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ICON
========================================================= */

.drf-input-icon {
    position: absolute !important;

    left: 15px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;

    color: #f97316 !important;

    font-size: 16px !important;

    pointer-events: none !important;
}


/* =========================================================
   ALL INPUTS
========================================================= */

.drf-input-wrapper input,
.drf-input-wrapper select,
.drf-input-wrapper textarea {

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #18202b !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    outline: none !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}


/* =========================================================
   SELECT BOXES
========================================================= */

#drf-device-type,
#drf-brand,
#drf-model,
#drf-storage {

    display: block !important;

    width: 100% !important;

    height: 48px !important;

    min-height: 48px !important;

    margin: 0 !important;

    padding: 0 42px 0 15px !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 10px !important;

    background-color: #ffffff !important;

    color: #18202b !important;

    font-family: inherit !important;

    font-size: 14px !important;

    line-height: 48px !important;

    outline: none !important;

    box-shadow: none !important;

    cursor: pointer !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    background-image: linear-gradient(45deg, transparent 50%, #9aa3af 50%), linear-gradient(135deg, #9aa3af 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) 21px, calc(100% - 11px) 21px !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}


/* =========================================================
   SELECT DISABLED
========================================================= */

#drf-brand:disabled,
#drf-model:disabled,
#drf-storage:disabled {

    background: #f8f9fb !important;

    color: #aeb5bf !important;

    border-color: #e2e6eb !important;

    cursor: not-allowed !important;

    opacity: 1 !important;
}


/* =========================================================
   SELECT FOCUS
========================================================= */

#drf-device-type:focus,
#drf-brand:focus,
#drf-model:focus,
#drf-storage:focus {

    border-color: #f97316 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}


/* =========================================================
   INPUT
========================================================= */

.drf-input-wrapper input {

    height: 48px !important;

    min-height: 48px !important;

    padding: 0 15px 0 44px !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.drf-input-wrapper textarea {

    min-height: 110px !important;

    padding: 13px 15px 13px 44px !important;

    resize: vertical !important;
}


/* =========================================================
   TEXTAREA ICON
========================================================= */

.drf-textarea-wrapper .drf-textarea-icon {

    top: 17px !important;

    transform: none !important;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.drf-input-wrapper input::placeholder,
.drf-input-wrapper textarea::placeholder {

    color: #a1a9b5 !important;

    opacity: 1 !important;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.drf-input-wrapper input:focus,
.drf-input-wrapper textarea:focus {

    border-color: #f97316 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}


/* =========================================================
   CONDITION SECTION
========================================================= */

.drf-condition-section {

    width: 100% !important;

    background: #ffffff !important;

    border: 1px solid #e1e5ea !important;

    border-radius: 16px !important;

    padding: 25px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.035) !important;
}


/* =========================================================
   CONDITION PLACEHOLDER
========================================================= */

.drf-condition-placeholder {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 18px !important;

    border: 1px solid #e1e5ea !important;

    border-radius: 10px !important;

    background: #ffffff !important;
}


.drf-placeholder-icon {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    background: #fff1eb !important;

    color: #f97316 !important;
}


.drf-condition-placeholder p {

    margin: 0 !important;

    color: #7b8492 !important;

    font-size: 13px !important;
}


/* =========================================================
   QUESTION PROGRESS
========================================================= */

.drf-question-progress {
    margin-bottom: 18px !important;
}


.drf-progress-top {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 8px !important;

    color: #6b7280 !important;

    font-size: 13px !important;
}


.drf-progress-top strong {

    color: #f97316 !important;

    font-weight: 600 !important;
}


.drf-progress-bar {

    width: 100% !important;

    height: 5px !important;

    background: #f1f3f5 !important;

    border-radius: 20px !important;

    overflow: hidden !important;
}


.drf-progress-bar span {

    display: block !important;

    height: 100% !important;

    background: #f97316 !important;

    border-radius: 20px !important;

    transition: width 0.3s ease !important;
}


/* =========================================================
   QUESTION CARD
========================================================= */

.drf-question-card {

    width: 100% !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 15px !important;

    padding: 25px !important;

    margin-top: 18px !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.035) !important;
}


/* =========================================================
   QUESTION NUMBER
========================================================= */

.drf-question-number {

    width: 38px !important;
    height: 38px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-bottom: 18px !important;

    border-radius: 50% !important;

    background: #fff1eb !important;

    color: #f97316 !important;

    font-size: 14px !important;

    font-weight: 700 !important;
}


/* =========================================================
   QUESTION TITLE
========================================================= */

.drf-question-title {

    margin: 0 0 10px !important;

    color: #111827 !important;

    font-size: 21px !important;

    line-height: 1.4 !important;

    font-weight: 600 !important;
}


/* =========================================================
   QUESTION REQUIRED
========================================================= */

.drf-question-required {

    margin: 0 0 18px !important;

    color: #7b8492 !important;

    font-size: 13px !important;
}


.drf-question-required-error {

    color: #dc2626 !important;
}


/* =========================================================
   QUESTION OPTIONS
========================================================= */

.drf-question-options {

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;
}


/* =========================================================
   OPTION
========================================================= */

.drf-option {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    min-height: 46px !important;

    padding: 0 15px !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease !important;
}


.drf-option:hover {

    border-color: #f7b08a !important;

    background: #fffaf7 !important;
}


/* =========================================================
   RADIO
========================================================= */

.drf-option input[type="radio"] {

    position: absolute !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


.drf-radio {

    width: 18px !important;

    height: 18px !important;

    min-width: 18px !important;

    margin-right: 12px !important;

    border: 2px solid #cbd3dd !important;

    border-radius: 50% !important;

    position: relative !important;

    box-sizing: border-box !important;
}


.drf-option input[type="radio"]:checked + .drf-radio {

    border-color: #f97316 !important;
}


.drf-option input[type="radio"]:checked + .drf-radio::after {

    content: "" !important;

    position: absolute !important;

    width: 8px !important;

    height: 8px !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    background: #f97316 !important;
}


.drf-option:has(input[type="radio"]:checked) {

    border-color: #f7b08a !important;

    background: #fffaf7 !important;

    box-shadow:
        0 0 0 2px rgba(249, 115, 22, 0.06) !important;
}


.drf-option-text {

    color: #26303c !important;

    font-size: 14px !important;
}


/* =========================================================
   QUESTION NAVIGATION
========================================================= */

.drf-question-navigation {

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 10px !important;

    margin-top: 25px !important;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.drf-question-back {

    min-height: 42px !important;

    padding: 0 18px !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    color: #4b5563 !important;

    font-size: 14px !important;

    cursor: pointer !important;

    transition: 0.2s ease !important;
}


.drf-question-back:hover {

    border-color: #f97316 !important;

    color: #f97316 !important;
}


/* =========================================================
   NEXT BUTTON
========================================================= */

.drf-question-next {

    min-height: 42px !important;

    padding: 0 18px !important;

    border: 1px solid #f97316 !important;

    border-radius: 8px !important;

    background: #ffffff !important;

    color: #f97316 !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease !important;
}


.drf-question-next:hover {

    background: #f97316 !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 16px rgba(249, 115, 22, 0.20) !important;
}


/* =========================================================
   SUBMIT SECTION
========================================================= */

.drf-submit-section {

    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    margin-top: 30px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.drf-submit-button {

    width: 100% !important;

    min-height: 50px !important;

    padding: 0 22px !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: linear-gradient(
        135deg,
        #f97316,
        #ea580c
    ) !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    box-shadow: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


.drf-submit-button:hover {

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 20px rgba(249, 115, 22, 0.25) !important;
}


.drf-submit-button:disabled {

    opacity: 0.65 !important;

    cursor: not-allowed !important;

    transform: none !important;
}


/* =========================================================
   SUBMIT NOTE
========================================================= */

.drf-submit-note {

    order: 2 !important;

    margin: 10px 0 0 !important;

    text-align: center !important;

    color: #7b8492 !important;

    font-size: 12px !important;
}


/* =========================================================
   CUSTOMER / SUBMIT VISIBILITY
========================================================= */

.drf-details-hidden {
    display: none !important;
}

.drf-submit-hidden {
    display: none !important;
}

.drf-details-visible {
    display: block !important;
}

.drf-submit-visible {
    display: flex !important;
}


/* =========================================================
   CUSTOMER DETAILS
========================================================= */

.drf-customer-section {

    width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CUSTOMER ROW
========================================================= */

.drf-customer-section .drf-row {

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   CUSTOMER FIELD
========================================================= */

.drf-customer-section .drf-field {

    width: 100% !important;

    margin: 0 0 20px !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CUSTOMER LABEL
========================================================= */

.drf-customer-section .drf-field > label {

    display: block !important;

    width: 100% !important;

    margin: 0 0 8px !important;

    padding: 0 !important;

    color: #20252d !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;
}


/* =========================================================
   CUSTOMER INPUT WRAPPER
========================================================= */

.drf-customer-section .drf-input-wrapper {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CUSTOMER INPUT
========================================================= */

.drf-customer-section
.drf-input-wrapper
input[type="text"],
.drf-customer-section
.drf-input-wrapper
input[type="tel"],
.drf-customer-section
.drf-input-wrapper
input[type="email"] {

    display: block !important;

    width: 100% !important;

    height: 48px !important;

    min-height: 48px !important;

    max-height: 48px !important;

    margin: 0 !important;

    padding: 0 15px 0 44px !important;

    box-sizing: border-box !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #18202b !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: normal !important;

    outline: none !important;

    box-shadow: none !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}


/* =========================================================
   CUSTOMER INPUT PLACEHOLDER
========================================================= */

.drf-customer-section
.drf-input-wrapper
input::placeholder {

    color: #a1a9b5 !important;

    opacity: 1 !important;
}


/* =========================================================
   CUSTOMER INPUT FOCUS
========================================================= */

.drf-customer-section
.drf-input-wrapper
input:focus {

    border-color: #f97316 !important;

    background: #ffffff !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}


/* =========================================================
   CUSTOMER ICON
========================================================= */

.drf-customer-section
.drf-input-icon {

    position: absolute !important;

    left: 15px !important;

    top: 50% !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: translateY(-50%) !important;

    z-index: 5 !important;

    color: #f97316 !important;

    font-size: 16px !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


/* =========================================================
   CUSTOMER TEXTAREA
========================================================= */

.drf-customer-section
.drf-input-wrapper
textarea {

    display: block !important;

    width: 100% !important;

    min-height: 110px !important;

    margin: 0 !important;

    padding: 13px 15px 13px 44px !important;

    box-sizing: border-box !important;

    border: 1px solid #dfe3e8 !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #18202b !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    outline: none !important;

    box-shadow: none !important;

    resize: vertical !important;

    appearance: none !important;

    -webkit-appearance: none !important;
}


/* =========================================================
   CUSTOMER TEXTAREA FOCUS
========================================================= */

.drf-customer-section
.drf-input-wrapper
textarea:focus {

    border-color: #f97316 !important;

    background: #ffffff !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}


/* =========================================================
   CUSTOMER TEXTAREA ICON
========================================================= */

.drf-customer-section
.drf-textarea-wrapper
.drf-textarea-icon {

    position: absolute !important;

    left: 15px !important;

    top: 17px !important;

    transform: none !important;

    z-index: 5 !important;

    color: #f97316 !important;

    font-size: 16px !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


/* =========================================================
   SUCCESS / ERROR MESSAGE
   ONLY MESSAGE STYLING
========================================================= */

#drf-main-form .drf-submit-section .drf-form-message {

    position: static !important;

    inset: auto !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

    left: auto !important;

    float: none !important;

    clear: both !important;

    transform: none !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 0 !important;

    box-sizing: border-box !important;

    margin: 20px 0 0 0 !important;

    padding: 0 !important;

    border-radius: 14px !important;

    font-family: inherit !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    z-index: 1 !important;

    overflow: visible !important;

}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

#drf-main-form
.drf-submit-section
.drf-form-message.success {

    display: flex !important;

    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 82px !important;

    box-sizing: border-box !important;

    margin: 20px 0 0 0 !important;

    padding: 20px 22px 20px 22px !important;

    background: #f0fdf4 !important;

    border: 1px solid #bbf7d0 !important;

    border-left: 5px solid #22c55e !important;

    border-radius: 14px !important;

    color: #166534 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    gap: 7px !important;

    text-align: left !important;

    box-shadow:
        0 5px 18px rgba(34, 197, 94, 0.10) !important;

    opacity: 1 !important;

    visibility: visible !important;

    overflow: hidden !important;

}


/* =========================================================
   SUCCESS TITLE
========================================================= */

#drf-main-form
.drf-submit-section
.drf-form-message.success strong {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #15803d !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1.5 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow: visible !important;

}


/* =========================================================
   SUCCESS DESCRIPTION
========================================================= */

#drf-main-form
.drf-submit-section
.drf-form-message.success span {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #166534 !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.6 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow: visible !important;

}


/* =========================================================
   ERROR MESSAGE
========================================================= */

#drf-main-form
.drf-submit-section
.drf-form-message.error {

    display: flex !important;

    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: 70px !important;

    box-sizing: border-box !important;

    margin: 20px 0 0 0 !important;

    padding: 18px 22px !important;

    background: #fff1f2 !important;

    border: 1px solid #fecdd3 !important;

    border-left: 5px solid #ef4444 !important;

    border-radius: 14px !important;

    color: #be123c !important;

    font-family: inherit !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    gap: 5px !important;

    text-align: left !important;

    box-shadow:
        0 5px 18px rgba(239, 68, 68, 0.08) !important;

    opacity: 1 !important;

    visibility: visible !important;

    overflow: hidden !important;

}


/* =========================================================
   ERROR TEXT
========================================================= */

#drf-main-form
.drf-submit-section
.drf-form-message.error span {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #9f1239 !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    line-height: 1.6 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow: visible !important;

}


/* =========================================================
   MOBILE MESSAGE
========================================================= */

@media (max-width: 768px) {

    #drf-main-form
    .drf-submit-section
    .drf-form-message.success {

        min-height: 76px !important;

        margin-top: 16px !important;

        padding: 17px 18px !important;

        border-radius: 11px !important;

        border-left-width: 4px !important;

        gap: 6px !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.success strong {

        font-size: 14px !important;

        line-height: 1.5 !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.success span {

        font-size: 13px !important;

        line-height: 1.55 !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.error {

        min-height: 64px !important;

        margin-top: 16px !important;

        padding: 16px 18px !important;

        border-radius: 11px !important;

        border-left-width: 4px !important;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    #drf-main-form
    .drf-submit-section
    .drf-form-message.success {

        min-height: 74px !important;

        margin-top: 14px !important;

        padding: 15px 16px !important;

        border-radius: 10px !important;

        gap: 5px !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.success strong {

        font-size: 14px !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.success span {

        font-size: 12.5px !important;

    }


    #drf-main-form
    .drf-submit-section
    .drf-form-message.error {

        min-height: 62px !important;

        margin-top: 14px !important;

        padding: 15px 16px !important;

        border-radius: 10px !important;

    }

}
/* =========================================================
   FINAL OVERRIDES - CLEAN FORM
   ========================================================= */

/* No icons inside text inputs/selects. */
.drf-input-icon {
    display: none !important;
}

.drf-input-wrapper input,
.drf-input-wrapper textarea {
    padding-left: 15px !important;
}

/*
 * Use exactly one custom dropdown arrow.
 * The native browser arrow and the old double-chevron background
 * are both removed, so Windows / Chrome / Safari / iOS use the same
 * visible arrow inside the form.
 */
#drf-main-form .drf-input-wrapper select,
#drf-main-form #drf-device-type,
#drf-main-form #drf-brand,
#drf-main-form #drf-model,
#drf-main-form #drf-storage {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-left: 15px !important;
    padding-right: 42px !important;
}

#drf-main-form .drf-select-wrapper {
    position: relative !important;
}

#drf-main-form .drf-select-wrapper::after {
    content: "⌄" !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-56%) !important;
    color: #9aa3af !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

#drf-main-form .drf-select-wrapper select:disabled + * {
    pointer-events: none !important;
}

/* The device type is a fixed Mobile Phone option. */
#drf-main-form #drf-device-type {
    cursor: default !important;
}

/* Keep customer fields clean after removing their icons. */
#drf-main-form .drf-customer-section .drf-input-wrapper input,
#drf-main-form .drf-customer-section .drf-input-wrapper textarea {
    padding-left: 15px !important;
}

#drf-main-form .drf-customer-section .drf-input-icon,
#drf-main-form .drf-textarea-icon {
    display: none !important;
}

/* =========================================================
   MOBILE RESPONSIVE FIX
========================================================= */

@media (max-width: 767px) {

    /* Main wrapper */
    .drf-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }


    /* Main card */
    .drf-form-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }


    /* All sections */
    .drf-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Section heading */
    .drf-section-title {
        gap: 10px !important;
        margin-bottom: 18px !important;
        align-items: center !important;
    }


    .drf-section-number {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 12px !important;
    }


    .drf-section-title h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }


    .drf-section-title p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }


    /* Every field full width */
    .drf-field {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
    }


    /* Customer two-column fields become one column */
    .drf-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
    }


    .drf-col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* Labels */
    .drf-field label {
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }


    /* Input / select / textarea */
    .drf-input-wrapper,
    .drf-select-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    .drf-input-wrapper input,
    .drf-input-wrapper select,
    .drf-input-wrapper textarea,
    #drf-main-form #drf-device-type,
    #drf-main-form #drf-brand,
    #drf-main-form #drf-model,
    #drf-main-form #drf-storage {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* Select height */
    #drf-main-form .drf-input-wrapper select,
    #drf-main-form #drf-device-type,
    #drf-main-form #drf-brand,
    #drf-main-form #drf-model,
    #drf-main-form #drf-storage {
        height: 48px !important;
        min-height: 48px !important;
        padding-left: 14px !important;
        padding-right: 40px !important;
        font-size: 14px !important;
    }


    /* Single dropdown arrow */
    #drf-main-form .drf-select-wrapper::after {
        right: 13px !important;
        font-size: 18px !important;
    }


    /* Customer inputs */
    #drf-main-form .drf-customer-section
    .drf-input-wrapper input {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }


    /* Customer textarea */
    #drf-main-form .drf-customer-section
    .drf-input-wrapper textarea {
        width: 100% !important;
        min-height: 100px !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
    }


    /* Question container */
    #drf-questions-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* Question cards */
    #drf-questions-container > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Question text */
    #drf-questions-container h1,
    #drf-questions-container h2,
    #drf-questions-container h3,
    #drf-questions-container h4 {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        line-height: 1.35 !important;
    }


    /* Answer options */
    #drf-questions-container label,
    #drf-questions-container button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Question navigation buttons */
    #drf-questions-container .drf-question-navigation,
    #drf-questions-container .drf-question-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Buttons */
    #drf-main-form button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Submit section */
    #drf-main-form .drf-submit-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Submit button */
    #drf-main-form .drf-submit-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }


    /* Success / error message */
    #drf-main-form .drf-form-message {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }


    #drf-main-form .drf-form-message strong,
    #drf-main-form .drf-form-message span {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .drf-form-wrapper {
        padding: 0 7px !important;
        margin: 10px auto !important;
    }


    .drf-form-card {
        padding: 15px 11px !important;
        border-radius: 12px !important;
    }


    .drf-section-title h3 {
        font-size: 17px !important;
    }


    .drf-section-title p {
        font-size: 11.5px !important;
    }


    .drf-section-number {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }


    #drf-main-form .drf-input-wrapper select,
    #drf-main-form #drf-device-type,
    #drf-main-form #drf-brand,
    #drf-main-form #drf-model,
    #drf-main-form #drf-storage {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 13px !important;
    }


    #drf-main-form .drf-customer-section
    .drf-input-wrapper input {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 13px !important;
    }


    #drf-main-form .drf-submit-button {
        min-height: 46px !important;
        font-size: 13px !important;
    }

}