/* ===========================================================
   THEME → PLUGIN VARIABLE BRIDGE
   Automatically inherits Mindy theme colors, button styles,
   font styles, radius, shadows, transitions.
   =========================================================== */

:root {
    /* Buttons */
    --primary: var(--mindy-primary-color, #4368FF);
    --primary-light: var(--mindy-secondary-color, #FFD2BF);

    /* States */
    /* --success: var(--mindy-secondary-color, #4cc9f0); */
    --danger: #f72585;
    --warning: #f8961e;

    /* Text / UI */
    --light: #f8f9fa;
    --dark: var(--mindy-quaternary-color, #181818);
    --gray: #6c757d;
    --gray-light: var(--mindy-form-bg-color, #F3F3F3);

    /* Radius / Shadows */
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;

    /* Typography (mapped from theme) */
    --font-h1: var(--mindy-h1-font-size, 2rem);
    /* --font-h2: var(--mindy-h2-font-size, 1.7rem); */
    --font-h2: 28px;
    /* --font-h3: var(--mindy-h3-font-size, 1.3rem); */
    --font-h3: 22px;
    --font-h4: 1.2rem;
    --font-h5: 1.1rem;
    --font-h6: 1rem;
    --font-p: 1rem;
    --font-li: 1rem;
    --font-span: 1rem;
}

/* ===========================================================
   PLUGIN BUTTON (CLS)
   Automatically uses Mindy theme button variables
   =========================================================== */

#cls-registration-container .cls-submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;

    /* Padding & Alignment */
    --button-padding: 21px 37px;
    padding: var(--button-padding);

    /* Border */
    --border-color: var(--mindy-button-border-idle, transparent);
    border: 2px solid var(--border-color);

    /* Typography */
    font-family: var(--mindy-header-font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: var(--mindy-header-letter-spacing);

    /* Colors */
    color: var(--mindy-button-color-idle);
    background-color: var(--mindy-button-bg-idle);

    /* Radius & gap */
    border-radius: var(--button-border-radius, 60px);
    gap: var(--wgl-icon-gap, 12px);

    /* Icon */
    --icon-size: 30px;

    /* Animation */
    transition: var(--transition);
}

/* Hover / Focus / Active */
#cls-registration-container .cls-submit-btn:hover,
#cls-registration-container .cls-submit-btn:focus,
#cls-registration-container .cls-submit-btn:active {
    color: var(--mindy-button-color-hover);
    background-color: var(--mindy-button-bg-hover);
    border-color: var(--mindy-button-border-hover);
}