/*
 * FR Team
 * Copyright (c) 2025
 */

/*
 * Shortcodes Styles for 'Self Ban Manager' Plugin
 * ------------------------------------
 * This stylesheet contains styles for the shortcodes of the 'Self Ban Manager' WordPress plugin.
 *
 * Contents:
 * 1. Fonts Import
 * 2. CSS Variables
 * 3. Common Styles
 * 4. Shortcodes
 * 5. Media Queries
 */

/*--------------------------------------------------------------
# 1. Fonts Import
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# 2. CSS Variables
--------------------------------------------------------------*/
:root {
    /* Colors */
    --fr-sbm-color-primary: #0B3851;
    --fr-sbm-color-primary-light: #12AEE0;
    --fr-sbm-color-text: #1E1E1E;
    --fr-sbm-color-dark: #666;
    --fr-sbm-color-light: #FFFFFF;

    /* Fonts */
    --fr-sbm-font-primary: 'Crossfit', sans-serif;

    /* Font Sizes */
    --fr-sbm-font-size-sm: 12px;
    --fr-sbm-font-size-base: 14px;
    --fr-sbm-font-size-md: 16px;
    --fr-sbm-font-size-lg: 18px;
    --fr-sbm-font-size-xl: 20px;
    --fr-sbm-font-size-xxl: 28px;

    /* Font Weights */
    --fr-sbm-font-weight-regular: 400;
    --fr-sbm-font-weight-semibold: 600;
    --fr-sbm-font-weight-bold: 700;

    /* Line Heights */
    --fr-sbm-line-height-sm: 14px;
    --fr-sbm-line-height-md: 19px;
    --fr-sbm-line-height-lg: 21px;
    --fr-sbm-line-height-xl: 25px;
    --fr-sbm-line-height-xxl: 33px;

    /* Border Radius */
    --fr-sbm-radius-sm: 5px;
    --fr-sbm-radius-md: 10px;
    --fr-sbm-radius-lg: 20px;
    --fr-sbm-radius-xl: 30px;
    --fr-sbm-radius-circle: 50%;

    /* Effects */
    --fr-sbm-transition-duration: 0.3s;
    --fr-sbm-blur-backdrop: blur(8px);
}

/*--------------------------------------------------------------
# 3. Common Styles
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# 4. Shortcodes
--------------------------------------------------------------*/
form.fr-sbm-form * {
    font-family: var(--fr-sbm-font-primary);
}

form.fr-sbm-form .fr-sbm-form-group {
    margin: 0 0 15px;
}

form.fr-sbm-form .fr-sbm-form-group label {
    margin: 0 0 5px;
}

form.fr-sbm-form .fr-sbm-form-group input,
form.fr-sbm-form .fr-sbm-form-group textarea,
form.fr-sbm-form .fr-sbm-form-group select {
    border: 1px solid var(--fr-sbm-color-dark);
    outline: none;
}

form.fr-sbm-form .fr-sbm-form-group button {
    background: var(--fr-sbm-color-primary);
    border: 1px solid var(--fr-sbm-color-primary);
    border-radius: var(--fr-sbm-radius-sm);
    color: var(--fr-sbm-color-light);
    outline: none;
    transition: all var(--fr-sbm-transition-duration);
}

form.fr-sbm-form .fr-sbm-form-group button:hover {
    background: var(--fr-sbm-color-light);
    color: var(--fr-sbm-color-primary);
    transition: all var(--fr-sbm-transition-duration);
}

form.fr-sbm-form .fr-sbm-form-submit {
    text-align: right;
}

/*--------------------------------------------------------------
# 5. Media Queries
--------------------------------------------------------------*/
/* Mobile devices */
@media screen and (max-width: 782px) {

}

/* Tablets and medium-sized devices */
@media screen and (min-width: 783px) and (max-width: 1024px) {

}

/* Desktop and larger screens */
@media screen and (min-width: 1025px) {

}