/* ==========================================================
   Adflipr Support Form
   ========================================================== */

/* ==========================================================
   Variables
   ========================================================== */

:root {

    --adflipr-primary: #5b5ce9;
    --adflipr-primary-dark: #4a4de2;
    --adflipr-primary-light: #eef0ff;

    --adflipr-text: #232323;
    --adflipr-label: #2b2b4d;
    --adflipr-muted: #7b8199;

    --adflipr-border: #d9dcef;
    --adflipr-border-hover: #c6cbeb;

    --adflipr-bg: #ffffff;
    --adflipr-light: #f7f8fc;

    --adflipr-success: #1fa971;
    --adflipr-error: #d93025;

    --adflipr-radius: 14px;

    --adflipr-transition: .25s ease;

}

/* ==========================================================
   Wrapper
   ========================================================== */

.adflipr-support-wrapper {

    max-width: 850px;

    margin: 60px auto;

    padding: 42px;

    background: var(--adflipr-bg);

    border-radius: 24px;

    box-shadow: 0 12px 35px rgba(0,0,0,.05);

    position: relative;

    overflow: hidden;

}

.adflipr-support-wrapper * {

    box-sizing: border-box;

}

/* ==========================================================
   Labels
   ========================================================== */

.adflipr-label {

    display: block;

    margin-bottom: 10px;

    font-size: 15px;

    font-weight: 600;

    color: var(--adflipr-label);

}

.adflipr-required {

    color: #ff3d3d;

    margin-left: 3px;

}

/* ==========================================================
   Form Groups
   ========================================================== */

.adflipr-form-group {

    margin-bottom: 24px;

}

/* ==========================================================
   Query Selector
   ========================================================== */

.adflipr-query-selector {

    display: flex;

    gap: 12px;

    align-items: center;

    margin-top: 12px;

}

.adflipr-query-type-btn {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 11px 18px;

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

    background: #fff;

    color: var(--adflipr-label);

    font-size: 14px;

    font-weight: 600;

    border-radius: 12px;

    cursor: pointer;

    transition: all var(--adflipr-transition);

}

.adflipr-query-type-btn:hover {

    border-color: var(--adflipr-primary);

    color: var(--adflipr-primary);

    transform: translateY(-1px);

}

.adflipr-query-type-btn.active {

    background: linear-gradient(
        135deg,
        var(--adflipr-primary),
        #7072ff
    );

    color: #fff;

    border-color: transparent;

    box-shadow: 0 8px 18px rgba(91,92,233,.20);

}

/* ==========================================================
   Inputs
   ========================================================== */

.adflipr-support-wrapper input[type="text"],
.adflipr-support-wrapper input[type="email"],
.adflipr-support-wrapper input[type="url"],
.adflipr-support-wrapper textarea {

    width: 100%;

    padding: 15px 18px;

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

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

    background: #fff;

    color: var(--adflipr-text);

    font-size: 15px;

    outline: none;

    transition: all var(--adflipr-transition);

}

.adflipr-support-wrapper input::placeholder,
.adflipr-support-wrapper textarea::placeholder {

    color: #9ba2b5;

}

.adflipr-support-wrapper input:hover,
.adflipr-support-wrapper textarea:hover {

    border-color: var(--adflipr-border-hover);

}

.adflipr-support-wrapper input:focus,
.adflipr-support-wrapper textarea:focus {

    border-color: var(--adflipr-primary);

    box-shadow: 0 0 0 4px rgba(91,92,233,.10);

}

.adflipr-support-wrapper textarea {

    min-height: 220px;

    resize: vertical;

    line-height: 1.7;

}

/* ==========================================================
   Upload
   ========================================================== */

#adflipr_attachments {

    display: none;

}

.adflipr-upload-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px 20px;

    border: 2px dashed var(--adflipr-border);

    border-radius: 18px;

    background: #fafbff;

    cursor: pointer;

    transition: all var(--adflipr-transition);

}

.adflipr-upload-box:hover {

    border-color: var(--adflipr-primary);

    background: var(--adflipr-primary-light);

}

.adflipr-upload-box.drag-over {

    border-color: var(--adflipr-primary);

    background: var(--adflipr-primary-light);

    transform: scale(1.01);

}

.upload-icon {

    font-size: 34px;

    margin-bottom: 12px;

}

.upload-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--adflipr-label);

    margin-bottom: 6px;

}

.upload-subtitle {

    font-size: 14px;

    color: var(--adflipr-muted);

    margin-bottom: 6px;

}

.upload-limit {

    font-size: 13px;

    color: #9aa0b5;

}

/* ==========================================================
   Uploaded Files
   ========================================================== */

#adflipr-file-list {

    margin-top: 18px;

}

.adflipr-file-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 15px;

    margin-bottom: 10px;

    border-radius: 12px;

    background: #f6f7ff;

    border: 1px solid #e7e9fb;

}

.adflipr-file-item::before {

    content: "📎";

    font-size: 16px;

}

.file-name {

    flex: 1;

    color: var(--adflipr-label);

    font-size: 14px;

    font-weight: 500;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.file-size {

    font-size: 13px;

    color: var(--adflipr-muted);

    white-space: nowrap;

}

.remove-file {

    width: 28px;

    height: 28px;

    border: none;

    border-radius: 50%;

    background: #eceeff;

    color: #666;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    transition: all .2s ease;

}

.remove-file:hover {

    background: #ffdede;

    color: #d93025;

}

/* ==========================================================
   CAPTCHA
   ========================================================== */

.adflipr-captcha-wrapper {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

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

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

    background: var(--adflipr-light);

    flex-wrap: wrap;

}

.captcha-question {

    font-size: 15px;

    font-weight: 600;

    color: var(--adflipr-label);

    white-space: nowrap;

}

.adflipr-captcha-input-group {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;

}

.adflipr-captcha-wrapper input[type="number"] {

    width: 110px;

    padding: 11px 14px;

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

    border-radius: 10px;

    background: #fff;

    color: var(--adflipr-text);

    font-size: 15px;

    font-weight: 600;

    outline: none;

    transition: all var(--adflipr-transition);

    -moz-appearance: textfield;

}

.adflipr-captcha-wrapper input[type="number"]::-webkit-outer-spin-button,
.adflipr-captcha-wrapper input[type="number"]::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

.adflipr-captcha-wrapper input[type="number"]:focus {

    border-color: var(--adflipr-primary);

    box-shadow: 0 0 0 4px rgba(91,92,233,.10);

}

/* Verified state */

.adflipr-captcha-wrapper input[type="number"].verified {

    border-color: var(--adflipr-success);

    box-shadow: 0 0 0 4px rgba(31,169,113,.10);

    background: #f0fdf8;

}

#adflipr-captcha-verify {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 11px 18px;

    border: none;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        var(--adflipr-primary),
        #7072ff
    );

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all var(--adflipr-transition);

    white-space: nowrap;

    min-width: 90px;

    box-shadow: 0 4px 12px rgba(91,92,233,.20);

}

#adflipr-captcha-verify:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(91,92,233,.28);

}

#adflipr-captcha-verify:active {

    transform: translateY(0);

}

#adflipr-captcha-verify:disabled {

    opacity: .7;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

/* Verified state */

#adflipr-captcha-verify.verified {

    background: linear-gradient(
        135deg,
        var(--adflipr-success),
        #27c983
    );

    box-shadow: 0 4px 12px rgba(31,169,113,.20);

    pointer-events: none;

}

/* Loading state */

#adflipr-captcha-verify.loading .verify-text {

    display: none;

}

#adflipr-captcha-verify.loading::after {

    content: "";

    width: 14px;

    height: 14px;

    border: 2px solid rgba(255,255,255,.45);

    border-top-color: #fff;

    border-radius: 50%;

    animation: adflipr-spin .7s linear infinite;

    display: inline-block;

}

/* ==========================================================
   CAPTCHA Status
   ========================================================== */

#adflipr-captcha-status {

    margin-top: 8px;

    font-size: 13px;

    font-weight: 600;

    min-height: 20px;

}

#adflipr-captcha-status.success {

    color: var(--adflipr-success);

}

#adflipr-captcha-status.error {

    color: var(--adflipr-error);

}

/* ==========================================================
   Submit Area
   ========================================================== */

.adflipr-submit-wrapper {

    margin-top: 32px;

}

#adflipr-submit {

    width: 100%;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    padding: 17px 24px;

    border: none;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        var(--adflipr-primary),
        #7072ff
    );

    color: #fff;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: all var(--adflipr-transition);

    box-shadow: 0 12px 28px rgba(91,92,233,.22);

}

#adflipr-submit:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 18px 35px rgba(91,92,233,.28);

}

#adflipr-submit:active {

    transform: translateY(0);

}

#adflipr-submit:disabled {

    opacity: .5;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

/* ==========================================================
   Loading State
   ========================================================== */

#adflipr-submit.loading {

    pointer-events: none;

}

#adflipr-submit.loading .btn-text {

    opacity: .85;

}

#adflipr-submit.loading::after {

    content: "";

    width: 18px;

    height: 18px;

    margin-left: 10px;

    border: 2px solid rgba(255,255,255,.45);

    border-top-color: #fff;

    border-radius: 50%;

    animation: adflipr-spin .7s linear infinite;

}

@keyframes adflipr-spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}

/* ==========================================================
   Response Messages
   ========================================================== */

#adflipr-response {

    display: none;

    margin-top: 24px;

    padding: 16px 18px;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.6;

}

#adflipr-response.success {

    display: block;

    color: var(--adflipr-success);

    background: #ecfaf4;

    border: 1px solid #b9ead4;

}

#adflipr-response.success::before {

    content: "✓ ";

    font-weight: 700;

}

#adflipr-response.error {

    display: block;

    color: var(--adflipr-error);

    background: #fff3f3;

    border: 1px solid #f5c8c8;

}

#adflipr-response.error::before {

    content: "⚠ ";

}

/* ==========================================================
   Form Notes
   ========================================================== */

.adflipr-form-note {

    margin-top: 8px;

    font-size: 13px;

    color: var(--adflipr-muted);

    line-height: 1.5;

}

/* ==========================================================
   Selection
   ========================================================== */

.adflipr-support-wrapper ::selection {

    background: rgba(91,92,233,.18);

}

/* ==========================================================
   Smooth Transitions
   ========================================================== */

.adflipr-support-wrapper button,
.adflipr-support-wrapper input,
.adflipr-support-wrapper textarea,
.adflipr-upload-box {

    transition: all .25s ease;

}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 768px) {

    .adflipr-support-wrapper {

        margin: 30px 16px;

        padding: 28px;

        border-radius: 20px;

    }

    .adflipr-query-selector {

        flex-direction: column;

        gap: 10px;

    }

    .adflipr-query-type-btn {

        width: 100%;

    }

    .adflipr-support-wrapper textarea {

        min-height: 190px;

    }

    .adflipr-upload-box {

        padding: 24px 18px;

    }

    .upload-icon {

        font-size: 30px;

    }

    .upload-title {

        font-size: 15px;

    }

    #adflipr-submit {

        font-size: 16px;

        padding: 16px 20px;

    }

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 480px) {

    .adflipr-support-wrapper {

        padding: 20px;

        border-radius: 16px;

    }

    .adflipr-form-group {

        margin-bottom: 20px;

    }

    .adflipr-label {

        font-size: 14px;

    }

    .adflipr-query-type-btn {

        padding: 10px 14px;

        font-size: 13px;

    }

    .adflipr-support-wrapper input[type="text"],
    .adflipr-support-wrapper input[type="email"],
    .adflipr-support-wrapper input[type="url"],
    .adflipr-support-wrapper textarea {

        font-size: 14px;

        padding: 14px 16px;

    }

    .adflipr-support-wrapper textarea {

        min-height: 170px;

    }

    .upload-title {

        font-size: 14px;

    }

    .upload-subtitle {

        font-size: 13px;

    }

    .upload-limit {

        font-size: 12px;

    }

    .adflipr-file-item {

        padding: 10px 12px;

        gap: 10px;

    }

    .file-name {

        font-size: 13px;

    }

    .file-size {

        display: none;

    }

    .remove-file {

        width: 26px;

        height: 26px;

        font-size: 16px;

    }

    #adflipr-submit {

        font-size: 15px;

        padding: 15px 18px;

    }

    #adflipr-response {

        font-size: 14px;

        padding: 14px 16px;

    }

    .adflipr-captcha-wrapper {

        gap: 10px;

        padding: 14px 16px;

    }

    .captcha-question {

        font-size: 14px;

        width: 100%;

    }

    .adflipr-captcha-input-group {

        width: 40px;
        align-items:center;

    }

    .adflipr-captcha-wrapper input[type="number"] {

        flex: 1;

        width: auto;

        font-size: 14px;

    }

    #adflipr-captcha-verify {

        font-size: 12px;

        padding: 10px 14px;

    }

}