```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM GLOBAL FORM SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/forms.css
   Full Path:
   /public_html/assets/css/components/forms.css

   Version: 1.0

   Purpose:
   - Contact Forms
   - Product Enquiry Forms
   - Export Enquiry Forms
   - Input / Select / Textarea
   - Floating Labels
   - Checkbox / Radio
   - File Upload
   - Validation States
   - Form Messages
   - Premium / Dark Forms
   - Responsive Forms

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - buttons.css
   ============================================================ */


/* ============================================================
   01. FORM
   ============================================================ */

.form {
    position: relative;

    width: 100%;
}


/* ============================================================
   02. FORM GROUP
   ============================================================ */

.form-group {
    position: relative;

    width: 100%;

    margin-bottom: var(--space-5);
}


/* ============================================================
   03. FORM GROUP LAST
   ============================================================ */

.form-group:last-child {
    margin-bottom: 0;
}


/* ============================================================
   04. FORM ROW
   ============================================================ */

.form-row {
    display: grid;

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

    gap: var(--space-5);
}


/* ============================================================
   05. FORM ROW THREE
   ============================================================ */

.form-row-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* ============================================================
   06. FORM ROW FOUR
   ============================================================ */

.form-row-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ============================================================
   07. FORM COLUMN FULL
   ============================================================ */

.form-col-full {
    grid-column: 1 / -1;
}


/* ============================================================
   08. FORM LABEL
   ============================================================ */

.form-label {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-bottom: 9px;

    color: var(--color-primary-deep);

    font-family: var(--font-ui);

    font-size: 0.6rem;

    font-weight: var(--font-bold);

    line-height: 1.4;

    letter-spacing: 0.025em;
}


/* ============================================================
   09. REQUIRED MARK
   ============================================================ */

.form-required {
    color: var(--color-secondary-dark);

    font-size: 0.66rem;

    line-height: 1;
}


/* ============================================================
   10. OPTIONAL TEXT
   ============================================================ */

.form-optional {
    color: var(--text-muted);

    font-size: 0.52rem;

    font-weight: var(--font-medium);
}


/* ============================================================
   11. INPUT BASE
   ============================================================ */

.form-control {
    display: block;

    width: 100%;
    min-height: 54px;

    padding:
        0
        var(--space-4);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-md);

    outline: none;

    color: var(--color-primary-deep);

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 8px 24px rgba(11, 43, 32, 0.025);

    font-family: var(--font-ui);

    font-size: 0.66rem;

    font-weight: var(--font-medium);

    line-height: 1.5;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   12. INPUT PLACEHOLDER
   ============================================================ */

.form-control::placeholder {
    color:
        rgba(74, 84, 79, 0.58);

    opacity: 1;
}


/* ============================================================
   13. INPUT HOVER
   ============================================================ */

.form-control:hover {
    border-color:
        rgba(183, 138, 61, 0.28);
}


/* ============================================================
   14. INPUT FOCUS
   ============================================================ */

.form-control:focus {
    border-color:
        var(--color-secondary);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(183, 138, 61, 0.08),
        0 12px 30px rgba(11, 43, 32, 0.04);
}


/* ============================================================
   15. INPUT DISABLED
   ============================================================ */

.form-control:disabled,
.form-control[readonly] {
    color: var(--text-muted);

    border-color: var(--border-light);

    background: var(--bg-soft);

    cursor: not-allowed;

    opacity: 0.72;
}


/* ============================================================
   16. TEXTAREA
   ============================================================ */

textarea.form-control {
    min-height: 150px;

    padding:
        var(--space-4);

    line-height: 1.7;

    resize: vertical;
}


/* ============================================================
   17. TEXTAREA SMALL
   ============================================================ */

textarea.form-control.form-control-sm {
    min-height: 110px;
}


/* ============================================================
   18. TEXTAREA LARGE
   ============================================================ */

textarea.form-control.form-control-lg {
    min-height: 190px;
}


/* ============================================================
   19. SELECT
   ============================================================ */

select.form-control {
    padding-right: 48px;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--color-primary) 50%
        ),
        linear-gradient(
            135deg,
            var(--color-primary) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;
}


/* ============================================================
   20. SELECT MULTIPLE
   ============================================================ */

select.form-control[multiple] {
    min-height: 150px;

    padding:
        var(--space-3);

    background-image: none;
}


/* ============================================================
   21. INPUT SMALL
   ============================================================ */

.form-control-sm {
    min-height: 44px;

    padding:
        0
        var(--space-3);

    border-radius:
        var(--radius-sm);

    font-size: 0.6rem;
}


/* ============================================================
   22. INPUT LARGE
   ============================================================ */

.form-control-lg {
    min-height: 62px;

    padding:
        0
        var(--space-5);

    border-radius:
        var(--radius-lg);

    font-size: 0.7rem;
}


/* ============================================================
   23. INPUT PILL
   ============================================================ */

.form-control-pill {
    border-radius:
        var(--radius-pill);
}


/* ============================================================
   24. INPUT WITH ICON
   ============================================================ */

.form-control-wrap {
    position: relative;

    width: 100%;
}


/* ============================================================
   25. LEFT ICON
   ============================================================ */

.form-control-icon {
    position: absolute;

    top: 50%;
    left: var(--space-4);

    z-index: 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--color-secondary-dark);

    font-size: 0.72rem;

    line-height: 1;

    transform:
        translateY(-50%);

    pointer-events: none;
}


/* ============================================================
   26. INPUT WITH LEFT ICON
   ============================================================ */

.form-control-wrap.has-icon
.form-control {
    padding-left: 46px;
}


/* ============================================================
   27. RIGHT ICON
   ============================================================ */

.form-control-icon-right {
    right: var(--space-4);
    left: auto;
}


/* ============================================================
   28. INPUT WITH RIGHT ICON
   ============================================================ */

.form-control-wrap.has-icon-right
.form-control {
    padding-right: 46px;
}


/* ============================================================
   29. TEXTAREA ICON POSITION
   ============================================================ */

.form-control-wrap.has-textarea-icon
.form-control-icon {
    top: var(--space-4);

    transform: none;
}


/* ============================================================
   30. INPUT ACTION
   ============================================================ */

.form-control-action {
    position: absolute;

    top: 50%;
    right: 7px;

    z-index: 4;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: var(--color-primary);

    background: transparent;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        color var(--transition),
        background-color var(--transition);
}

.form-control-action:hover {
    color: var(--color-secondary-dark);

    background: var(--bg-gold-soft);
}


/* ============================================================
   31. INPUT PREFIX / SUFFIX WRAPPER
   ============================================================ */

.input-group {
    position: relative;

    display: flex;

    width: 100%;
}


/* ============================================================
   32. INPUT GROUP CONTROL
   ============================================================ */

.input-group
.form-control {
    position: relative;

    z-index: 1;

    flex: 1 1 auto;

    min-width: 0;
}


/* ============================================================
   33. INPUT GROUP TEXT
   ============================================================ */

.input-group-text {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 52px;

    padding:
        0
        var(--space-4);

    border:
        1px solid var(--border-light);

    color: var(--color-primary);

    background: var(--bg-soft);

    font-family: var(--font-ui);

    font-size: 0.6rem;

    font-weight: var(--font-semibold);

    white-space: nowrap;
}


/* ============================================================
   34. INPUT GROUP LEFT
   ============================================================ */

.input-group >
.input-group-text:first-child {
    border-right: 0;

    border-radius:
        var(--radius-md)
        0
        0
        var(--radius-md);
}

.input-group >
.input-group-text:first-child +
.form-control {
    border-radius:
        0
        var(--radius-md)
        var(--radius-md)
        0;
}


/* ============================================================
   35. INPUT GROUP RIGHT
   ============================================================ */

.input-group >
.form-control:first-child {
    border-radius:
        var(--radius-md)
        0
        0
        var(--radius-md);
}

.input-group >
.form-control +
.input-group-text {
    border-left: 0;

    border-radius:
        0
        var(--radius-md)
        var(--radius-md)
        0;
}


/* ============================================================
   36. FORM HELP
   ============================================================ */

.form-help {
    display: block;

    margin-top: 7px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    line-height: 1.55;
}


/* ============================================================
   37. CHARACTER COUNTER
   ============================================================ */

.form-counter {
    display: block;

    margin-top: 7px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.5rem;

    text-align: right;
}


/* ============================================================
   38. CHECKBOX / RADIO WRAPPER
   ============================================================ */

.form-check {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: var(--space-3);

    cursor: pointer;
}


/* ============================================================
   39. CHECK INPUT
   ============================================================ */

.form-check-input {
    position: relative;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    margin: 1px 0 0;

    border:
        1px solid rgba(11, 43, 32, 0.20);

    outline: none;

    background: #ffffff;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   40. CHECKBOX
   ============================================================ */

.form-check-input[type="checkbox"] {
    border-radius: 5px;
}


/* ============================================================
   41. RADIO
   ============================================================ */

.form-check-input[type="radio"] {
    border-radius:
        var(--radius-circle);
}


/* ============================================================
   42. CHECKBOX CHECKED
   ============================================================ */

.form-check-input[type="checkbox"]:checked {
    border-color:
        var(--color-primary);

    background-color:
        var(--color-primary);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");

    background-position:
        center;

    background-size:
        12px;

    background-repeat:
        no-repeat;
}


/* ============================================================
   43. RADIO CHECKED
   ============================================================ */

.form-check-input[type="radio"]:checked {
    border-color:
        var(--color-primary);

    background:
        radial-gradient(
            circle,
            var(--color-primary) 0 42%,
            #ffffff 45% 100%
        );
}


/* ============================================================
   44. CHECK FOCUS
   ============================================================ */

.form-check-input:focus-visible {
    box-shadow:
        0 0 0 4px rgba(183, 138, 61, 0.10);

    border-color:
        var(--color-secondary);
}


/* ============================================================
   45. CHECK LABEL
   ============================================================ */

.form-check-label {
    color: var(--text-body);

    font-family: var(--font-ui);

    font-size: 0.6rem;

    font-weight: var(--font-medium);

    line-height: 1.6;

    cursor: pointer;
}


/* ============================================================
   46. CHECK LABEL LINK
   ============================================================ */

.form-check-label a {
    color: var(--color-secondary-dark);

    font-weight: var(--font-semibold);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


/* ============================================================
   47. CHECK GROUP
   ============================================================ */

.form-check-group {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-4)
        var(--space-6);
}


/* ============================================================
   48. SWITCH
   ============================================================ */

.form-switch {
    display: inline-flex;

    align-items: center;

    gap: var(--space-3);

    cursor: pointer;
}


/* ============================================================
   49. SWITCH INPUT
   ============================================================ */

.form-switch-input {
    position: relative;

    width: 46px;
    height: 26px;

    flex: 0 0 46px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    outline: none;

    background:
        #e8ece9;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color var(--transition),
        border-color var(--transition);
}


/* ============================================================
   50. SWITCH KNOB
   ============================================================ */

.form-switch-input::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius:
        var(--radius-circle);

    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.15);

    transition:
        transform var(--transition-premium);
}


/* ============================================================
   51. SWITCH CHECKED
   ============================================================ */

.form-switch-input:checked {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary);
}

.form-switch-input:checked::before {
    transform:
        translateX(20px);
}


/* ============================================================
   52. SWITCH LABEL
   ============================================================ */

.form-switch-label {
    color: var(--text-body);

    font-family: var(--font-ui);

    font-size: 0.6rem;

    font-weight: var(--font-medium);
}


/* ============================================================
   53. FILE INPUT
   ============================================================ */

.form-file {
    position: relative;

    width: 100%;
}


/* ============================================================
   54. FILE NATIVE INPUT
   ============================================================ */

.form-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   55. FILE LABEL
   ============================================================ */

.form-file-label {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: var(--space-3);

    min-height: 160px;

    padding:
        var(--space-6);

    border:
        1px dashed rgba(183, 138, 61, 0.38);

    border-radius:
        var(--radius-lg);

    color: var(--text-body);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(183, 138, 61, 0.035)
        );

    cursor: pointer;

    text-align: center;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


/* ============================================================
   56. FILE LABEL HOVER
   ============================================================ */

.form-file-label:hover {
    border-color:
        var(--color-secondary);

    background:
        var(--bg-gold-soft);

    box-shadow:
        0 14px 34px rgba(11, 43, 32, 0.055);

    transform:
        translateY(-2px);
}


/* ============================================================
   57. FILE ICON
   ============================================================ */

.form-file-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border:
        1px solid var(--border-gold);

    border-radius:
        15px;

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.85rem;
}


/* ============================================================
   58. FILE TITLE
   ============================================================ */

.form-file-title {
    color: var(--color-primary-deep);

    font-family: var(--font-ui);

    font-size: 0.66rem;

    font-weight: var(--font-bold);

    line-height: 1.4;
}


/* ============================================================
   59. FILE TEXT
   ============================================================ */

.form-file-text {
    max-width: 380px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.54rem;

    line-height: 1.55;
}


/* ============================================================
   60. FLOATING LABEL GROUP
   ============================================================ */

.form-floating {
    position: relative;
}


/* ============================================================
   61. FLOATING CONTROL
   ============================================================ */

.form-floating
.form-control {
    min-height: 62px;

    padding:
        21px
        var(--space-4)
        7px;
}


/* ============================================================
   62. FLOATING LABEL
   ============================================================ */

.form-floating
.form-label {
    position: absolute;

    top: 50%;
    left: var(--space-4);

    z-index: 3;

    margin: 0;

    color: var(--text-muted);

    font-size: 0.62rem;

    font-weight: var(--font-medium);

    transform:
        translateY(-50%);

    transform-origin:
        left top;

    transition:
        color var(--transition),
        font-size var(--transition),
        transform var(--transition);

    pointer-events: none;
}


/* ============================================================
   63. FLOATING ACTIVE LABEL
   ============================================================ */

.form-floating
.form-control:focus ~
.form-label,

.form-floating
.form-control:not(:placeholder-shown) ~
.form-label {
    color: var(--color-secondary-dark);

    font-size: 0.48rem;

    transform:
        translateY(-19px);
}


/* ============================================================
   64. FLOATING TEXTAREA
   ============================================================ */

.form-floating
textarea.form-control {
    min-height: 160px;

    padding-top: 27px;
}

.form-floating
textarea.form-control ~
.form-label {
    top: 22px;

    transform:
        none;
}

.form-floating
textarea.form-control:focus ~
.form-label,

.form-floating
textarea.form-control:not(:placeholder-shown) ~
.form-label {
    transform:
        translateY(-9px);
}


/* ============================================================
   65. VALID INPUT
   ============================================================ */

.form-control.is-valid {
    border-color:
        rgba(30, 130, 76, 0.48);

    box-shadow:
        0 0 0 4px rgba(30, 130, 76, 0.055);
}


/* ============================================================
   66. INVALID INPUT
   ============================================================ */

.form-control.is-invalid {
    border-color:
        rgba(180, 45, 45, 0.50);

    box-shadow:
        0 0 0 4px rgba(180, 45, 45, 0.055);
}


/* ============================================================
   67. VALID FEEDBACK
   ============================================================ */

.valid-feedback {
    display: block;

    margin-top: 7px;

    color: #17633b;

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   68. INVALID FEEDBACK
   ============================================================ */

.invalid-feedback {
    display: block;

    margin-top: 7px;

    color: #9d2e2e;

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   69. FORM MESSAGE
   ============================================================ */

.form-message {
    display: flex;

    align-items: flex-start;

    gap: var(--space-3);

    margin-bottom:
        var(--space-5);

    padding:
        var(--space-4);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-md);

    font-family: var(--font-ui);

    font-size: 0.58rem;

    font-weight: var(--font-medium);

    line-height: 1.55;
}


/* ============================================================
   70. SUCCESS MESSAGE
   ============================================================ */

.form-message-success {
    color: #17633b;

    border-color:
        rgba(30, 130, 76, 0.15);

    background:
        rgba(30, 130, 76, 0.06);
}


/* ============================================================
   71. ERROR MESSAGE
   ============================================================ */

.form-message-error {
    color: #9d2e2e;

    border-color:
        rgba(180, 45, 45, 0.15);

    background:
        rgba(180, 45, 45, 0.055);
}


/* ============================================================
   72. INFO MESSAGE
   ============================================================ */

.form-message-info {
    color: #285c74;

    border-color:
        rgba(45, 117, 151, 0.15);

    background:
        rgba(45, 117, 151, 0.055);
}


/* ============================================================
   73. WARNING MESSAGE
   ============================================================ */

.form-message-warning {
    color: #805d18;

    border-color:
        rgba(183, 138, 61, 0.20);

    background:
        rgba(212, 175, 104, 0.10);
}


/* ============================================================
   74. FORM CARD
   ============================================================ */

.form-card {
    position: relative;

    padding:
        clamp(1.5rem, 3.5vw, 2.75rem);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-2xl);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 28px 75px rgba(11, 43, 32, 0.085);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   75. FORM CARD GOLD LINE
   ============================================================ */

.form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   76. FORM CARD GLOW
   ============================================================ */

.form-card::after {
    content: "";

    position: absolute;

    right: -170px;
    bottom: -190px;

    z-index: -1;

    width: 380px;
    height: 380px;

    border-radius:
        var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(183, 138, 61, 0.08),
            rgba(183, 138, 61, 0) 70%
        );

    pointer-events: none;
}


/* ============================================================
   77. FORM HEADER
   ============================================================ */

.form-header {
    margin-bottom:
        var(--space-7);
}


/* ============================================================
   78. FORM TITLE
   ============================================================ */

.form-title {
    margin: 0;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size:
        clamp(1.65rem, 2.8vw, 2.35rem);

    font-weight: var(--font-semibold);

    line-height: 1.12;

    letter-spacing: -0.025em;
}


/* ============================================================
   79. FORM DESCRIPTION
   ============================================================ */

.form-description {
    max-width: 620px;

    margin:
        var(--space-3)
        0
        0;

    color: var(--text-body);

    font-size: 0.68rem;

    line-height: 1.7;
}


/* ============================================================
   80. FORM SECTION
   ============================================================ */

.form-section {
    padding:
        var(--space-6)
        0;

    border-bottom:
        1px solid var(--border-light);
}

.form-section:first-child {
    padding-top: 0;
}

.form-section:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


/* ============================================================
   81. FORM SECTION TITLE
   ============================================================ */

.form-section-title {
    margin:
        0
        0
        var(--space-5);

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: var(--font-semibold);

    line-height: 1.3;
}


/* ============================================================
   82. FORM ACTIONS
   ============================================================ */

.form-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top:
        var(--space-6);
}


/* ============================================================
   83. FORM ACTIONS BETWEEN
   ============================================================ */

.form-actions-between {
    justify-content: space-between;
}


/* ============================================================
   84. FORM ACTIONS END
   ============================================================ */

.form-actions-end {
    justify-content: flex-end;
}


/* ============================================================
   85. FORM ACTIONS CENTER
   ============================================================ */

.form-actions-center {
    justify-content: center;
}


/* ============================================================
   86. PREMIUM INPUT
   ============================================================ */

.form-control-premium {
    min-height: 58px;

    border-color:
        rgba(183, 138, 61, 0.18);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(250, 248, 242, 0.80)
        );

    box-shadow:
        0 10px 26px rgba(11, 43, 32, 0.035);
}

.form-control-premium:focus {
    border-color:
        rgba(183, 138, 61, 0.65);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(183, 138, 61, 0.08),
        0 14px 34px rgba(11, 43, 32, 0.05);
}


/* ============================================================
   87. DARK FORM
   ============================================================ */

.form-dark
.form-label {
    color:
        rgba(255, 255, 255, 0.88);
}


/* ============================================================
   88. DARK FORM INPUT
   ============================================================ */

.form-dark
.form-control {
    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow: none;

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   89. DARK FORM PLACEHOLDER
   ============================================================ */

.form-dark
.form-control::placeholder {
    color:
        rgba(255, 255, 255, 0.38);
}


/* ============================================================
   90. DARK FORM FOCUS
   ============================================================ */

.form-dark
.form-control:focus {
    border-color:
        rgba(212, 175, 104, 0.58);

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 4px rgba(212, 175, 104, 0.07);
}


/* ============================================================
   91. DARK FORM HELP
   ============================================================ */

.form-dark
.form-help {
    color:
        rgba(255, 255, 255, 0.40);
}


/* ============================================================
   92. DARK FORM CHECK LABEL
   ============================================================ */

.form-dark
.form-check-label {
    color:
        rgba(255, 255, 255, 0.60);
}


/* ============================================================
   93. DARK FORM CHECK
   ============================================================ */

.form-dark
.form-check-input {
    border-color:
        rgba(255, 255, 255, 0.20);

    background:
        rgba(255, 255, 255, 0.06);
}


/* ============================================================
   94. DARK SELECT ARROW
   ============================================================ */

.form-dark
select.form-control {
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #d4af68 50%
        ),
        linear-gradient(
            135deg,
            #d4af68 50%,
            transparent 50%
        );
}


/* ============================================================
   95. SEARCH FORM
   ============================================================ */

.form-search {
    position: relative;

    width: 100%;
}


/* ============================================================
   96. SEARCH INPUT
   ============================================================ */

.form-search
.form-control {
    min-height: 56px;

    padding-right: 58px;

    border-radius:
        var(--radius-pill);
}


/* ============================================================
   97. SEARCH BUTTON
   ============================================================ */

.form-search-button {
    position: absolute;

    top: 50%;
    right: 6px;

    z-index: 4;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    border-radius:
        var(--radius-circle);

    color: var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        box-shadow var(--transition),
        transform var(--transition-premium);
}

.form-search-button:hover {
    box-shadow:
        0 12px 28px rgba(183, 138, 61, 0.28);

    transform:
        translateY(-50%)
        scale(1.04);
}


/* ============================================================
   98. NEWSLETTER FORM
   ============================================================ */

.form-newsletter {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    padding: 5px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        var(--radius-pill);

    background:
        rgba(255, 255, 255, 0.055);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   99. NEWSLETTER INPUT
   ============================================================ */

.form-newsletter
.form-control {
    min-height: 46px;

    flex: 1 1 auto;

    padding:
        0
        var(--space-4);

    border: 0;

    color: #ffffff;

    background: transparent;

    box-shadow: none;
}

.form-newsletter
.form-control:focus {
    border: 0;

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   100. NEWSLETTER PLACEHOLDER
   ============================================================ */

.form-newsletter
.form-control::placeholder {
    color:
        rgba(255, 255, 255, 0.40);
}


/* ============================================================
   101. FORM DIVIDER
   ============================================================ */

.form-divider {
    width: 100%;
    height: 1px;

    margin:
        var(--space-6)
        0;

    background:
        var(--border-light);
}


/* ============================================================
   102. FORM DIVIDER GOLD
   ============================================================ */

.form-divider-gold {
    background:
        linear-gradient(
            90deg,
            rgba(183, 138, 61, 0),
            rgba(183, 138, 61, 0.45),
            rgba(183, 138, 61, 0)
        );
}


/* ============================================================
   103. LOADING FORM
   ============================================================ */

.form.is-loading {
    pointer-events: none;
}


/* ============================================================
   104. LOADING OVERLAY
   ============================================================ */

.form-loading-overlay {
    position: absolute;

    inset: 0;

    z-index: 50;

    display: none;

    align-items: center;
    justify-content: center;

    border-radius: inherit;

    background:
        rgba(255, 255, 255, 0.78);

    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);
}

.form.is-loading
.form-loading-overlay {
    display: flex;
}


/* ============================================================
   105. LOADING SPINNER
   ============================================================ */

.form-loading-spinner {
    width: 34px;
    height: 34px;

    border:
        3px solid rgba(183, 138, 61, 0.18);

    border-top-color:
        var(--color-secondary);

    border-radius:
        var(--radius-circle);

    animation:
        formSpin 0.75s linear infinite;
}


/* ============================================================
   106. SPINNER ANIMATION
   ============================================================ */

@keyframes formSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   107. HONEYPOT FIELD
   ============================================================ */

.form-honeypot {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ============================================================
   108. CAPTCHA / SECURITY ROW
   ============================================================ */

.form-security {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    margin-top:
        var(--space-5);

    padding:
        var(--space-4);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-md);

    background:
        var(--bg-soft);
}


/* ============================================================
   109. SECURITY TEXT
   ============================================================ */

.form-security-text {
    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    line-height: 1.5;
}


/* ============================================================
   110. AUTOFILL FIX
   ============================================================ */

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-primary-deep);

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ============================================================
   111. DARK AUTOFILL FIX
   ============================================================ */

.form-dark
.form-control:-webkit-autofill,
.form-dark
.form-control:-webkit-autofill:hover,
.form-dark
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #ffffff;

    -webkit-box-shadow:
        0 0 0 1000px var(--color-primary-deep) inset;
}


/* ============================================================
   112. FOCUS VISIBLE
   ============================================================ */

.form-control:focus-visible,
.form-control-action:focus-visible,
.form-search-button:focus-visible,
.form-file-input:focus-visible +
.form-file-label {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   113. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .form-row-3,
    .form-row-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   114. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .form-row,
    .form-row-3,
    .form-row-4 {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .form-row >
    .form-group,

    .form-row-3 >
    .form-group,

    .form-row-4 >
    .form-group {
        margin-bottom:
            var(--space-5);
    }

    .form-control {
        min-height: 52px;
    }

    .form-control-lg {
        min-height: 58px;
    }

    .form-card {
        padding:
            var(--space-6);

        border-radius:
            var(--radius-xl);
    }

    .form-header {
        margin-bottom:
            var(--space-6);
    }

}


/* ============================================================
   115. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .form-card {
        padding:
            var(--space-5);
    }

    .form-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .form-actions
    .btn {
        width: 100%;
    }

    .form-check-group {
        align-items: flex-start;

        flex-direction: column;

        gap:
            var(--space-3);
    }

    .form-file-label {
        min-height: 145px;

        padding:
            var(--space-5);
    }

    .form-security {
        align-items: flex-start;

        flex-direction: column;
    }

    .form-newsletter {
        align-items: stretch;

        flex-direction: column;

        padding:
            6px;

        border-radius:
            var(--radius-lg);
    }

    .form-newsletter
    .form-control {
        width: 100%;
    }

    .form-newsletter
    .btn {
        width: 100%;
    }

}


/* ============================================================
   116. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .form-file-label:hover {
        transform: none;
    }

    .form-search-button:hover {
        transform:
            translateY(-50%);
    }

}


/* ============================================================
   117. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .form-control,
    .form-control-action,
    .form-check-input,
    .form-switch-input,
    .form-switch-input::before,
    .form-file-label,
    .form-floating
    .form-label,
    .form-search-button {
        transition: none;
    }

    .form-file-label:hover {
        transform: none;
    }

    .form-search-button:hover {
        transform:
            translateY(-50%);
    }

    .form-loading-spinner {
        animation-duration:
            1.5s;
    }

}


/* ============================================================
   END OF GLOBAL FORM SYSTEM
   ============================================================ */
```