/*
 * Curacao Club — terms-and-conditions gated confirm buttons.
 *
 * The upgrade, downgrade and re-enroll modals only enable their confirm button once
 * the member ticks the terms checkbox. .btn-secondary:disabled is defined in
 * rebrand.css/theme.css with the SAME full-yellow treatment as the enabled state (and
 * again under [data-theme="dark"]), so a disabled button would look identical to an
 * active one. These rules give it a real disabled appearance, and every pseudo-class
 * state is covered with !important because the theme rules would otherwise win.
 */

.club-terms-gate:disabled,
.club-terms-gate.disabled,
.club-terms-gate:disabled:hover,
.club-terms-gate:disabled:focus,
.club-terms-gate:disabled:active,
.club-terms-gate.disabled:hover,
.club-terms-gate.disabled:focus,
.club-terms-gate.disabled:active {
    background-color: var(--gray-300) !important;
    border-color: var(--gray-300) !important;
    color: var(--gray-500) !important;
    opacity: 0.75 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/*
 * Sit the acceptance text directly beside its checkbox.
 *
 * Bootstrap absolutely positions .form-check-input and indents .form-check by
 * 1.25rem, which leaves the label floating away from the box. Laying the pair out as
 * a flex row instead puts the text next to the checkbox with one controlled gap, and
 * top-aligning them means a wrapped second line runs under the text rather than
 * under the checkbox.
 */
.club-terms-check .form-check {
    display: flex;
    align-items: flex-start;
    padding-left: 0;
}

/*
 * club2.css restyles EVERY .form-check-input as a round radio control (20px,
 * border-radius: 50%) and paints a dark green dot through :checked::after — so an
 * acceptance checkbox came out looking like a selected radio button. These rules give
 * it back a square box with a tick.
 *
 * appearance: none so the look is fully ours rather than half-native, and position
 * stays relative so the tick below anchors to the box itself (a static box would send
 * the absolutely positioned ::after to the nearest positioned ancestor instead).
 */
.club-terms-check .form-check-input {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0.1rem 0.5rem 0 0;
    border: 2px solid #ccc;
    border-radius: 0.2rem;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.club-terms-check .form-check-input:checked {
    background: #2d5541;
    border-color: #2d5541;
}

/* White tick, drawn with two borders. Overrides club2.css's green dot. */
.club-terms-check .form-check-input:checked::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 4px;
    height: 8px;
    background: none;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Keyboard focus has to stay visible once appearance is removed. */
.club-terms-check .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 85, 65, 0.25);
}

.club-terms-check .form-check-label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}