/* Discount Code Verifier */

/* Loading state: spinner shown while the code is being verified. */
.fc-discount-btn--loading {
    cursor: progress;
}

.fc-discount-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.6;
    animation: fc-discount-spin 0.7s linear infinite;
}

@keyframes fc-discount-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The verify button fills its column so it matches the field's width.
   Removing "ff-btn-submit" (to avoid the form-submit loader) dropped the
   full-width behavior that class carried, so we restore it explicitly. */
.ff-t-container[data-name="ff_cn_id_1"] .fc-discount-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 24px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    /* Height & radius are set inline with !important from JS so the theme
       can never shrink the box (e.g. while the spinner replaces the label). */
}

/* The verify button always uses the brand green (16,144,64) — the theme's
   button colors (including hover/focus/active) must never change it. */
.ff-t-container[data-name="ff_cn_id_1"] .fc-discount-btn,
.ff-t-container[data-name="ff_cn_id_1"] .fc-discount-btn:hover,
.ff-t-container[data-name="ff_cn_id_1"] .fc-discount-btn:focus,
.ff-t-container[data-name="ff_cn_id_1"] .fc-discount-btn:active {
    background-color: rgba(16, 144, 64, 1) !important;
    color: #fff !important;
}

/* Disable Fluent Forms' conditional slide animation on the discount field so
   it toggles instantly, matching the verify button. */
.ff-t-container[data-name="ff_cn_id_1"] .ff-el-group.ff_excluded {
    display: none !important;
}

.ff-t-container[data-name="ff_cn_id_1"] .ff-el-group.ff_cond_v {
    display: block !important;
    height: auto !important;
}

/* Result message (rendered below the ff_cn_id_1 container). */
.fc-discount-msg {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
}

.fc-discount-msg--success {
    color: #2e7d32;
    /* green */
}

.fc-discount-msg--error {
    color: #c62828;
    /* red */
}

/* Align the verify button with the input box on both desktop and mobile.
   Column 1 has the field label above the input, so without this the button
   sits at the top of its cell (level with the label). Bottom-aligning the
   cells makes the button line up with the input field itself. */
.ff-t-container[data-name="ff_cn_id_1"] {
    align-items: flex-end !important;
}

/* Remove the field group's bottom gap so the cell bottom equals the input
   bottom — that's the edge the button aligns to (see align-items above). */
.ff-t-container[data-name="ff_cn_id_1"] .ff-el-group {
    margin-bottom: 0;
}

/* Mobile: keep the discount field and the verify button on the same row.
   Fluent Forms stacks the two columns below 768px; we restore the flex row
   for this container only so the button stays beside the input. */
@media (max-width: 768px) {
    .ff-t-container[data-name="ff_cn_id_1"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
    }

    .ff-t-container[data-name="ff_cn_id_1"] .ff-t-cell {
        display: block !important;
        width: auto !important;
        flex-basis: 50% !important;
        max-width: 50% !important;
        min-width: 0;
    }

    /* Small separation between the input and the button on mobile. */
    .ff-t-container[data-name="ff_cn_id_1"] .ff-t-cell.ff-t-column-2 {
        padding-left: 10px;
    }
}