/* Adaptive Design Language by Strawberry V3 - Combined CSS */
/* Generated automatically - Do not edit manually */
/* Version: m3-1.3.1 */

/* Component: Base Layout and Scrollbar Styles
 * Description: This stylesheet defines the foundational layout, color variables, font settings,
 *              and custom scrollbar styles 
 *              for the application. It includes responsive adjustments for various device sizes (mobile, tablet, landscape), 
 *              and touch-friendly scrollbar modifications. The main layout uses a blurred backdrop and adapts spacing and 
 *              typography for different screen widths. Scrollbars are visually customized and include SVG icons for buttons.
 */

 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --color-branding-primary: #CC0000;
    --color-branding-secondary: #E68A00;

    --color-branding-verified: #34A843;

    --color-mediumslateblue: mediumslateblue;
    --color-darkslateblue: darkslateblue;
    --color-lightblue: #0066FF;
    --color-blue: blue;

    --color-background-primary: #242729;
    --color-background-deep: #121212;
    --color-background-lighter: #3e4245;
    --color-background-bright: #c2c4c5;
    --color-background-medium: #282a2c;
    --color-background-dark: rgb(27, 27, 27);

    --smd-header--primary: #0000;
    --smd-header--shadow: rgba(0,0,0,0.25);
    --smd-header--inset: rgba(255,255,255,0.15);
    --smd-header--background-overlay: rgba(0, 0, 0, 0.1);
    --smd-header--after-shadow: 0 6px 6px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.1);
    --smd-header--floating-border: rgba(255, 255, 255, 0.082);

    --color-scrollbar-track: #333;
    --color-scrollbar-thumb: #555;
    --color-scrollbar-thumb-hover: #777;
    --color-scrollbar-button-hover: #444;

    --gradient-one: conic-gradient(#ff0000, #ff9900, #ff0000, #ff0000, #ff9900, #ff0000);

    --font-family-primary: "Poppins", sans-serif;
}

.smd-layout_main {
    margin-top: 64px;
    padding: 20px;
    backdrop-filter: blur(10px);
    color: white;
}

.smd-layout_body {
    background-color: var(--color-background-primary);
    font-family: var(--font-family-primary);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    border-radius: 0px;
    border: 2px solid var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
}

::-webkit-scrollbar-button {
    background-color: var(--color-scrollbar-track);
    height: 12px;
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555'%3E%3Cpath d='M6 8l4-4H2z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555'%3E%3Cpath d='M2 8l4-4 4 4z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:hover {
    background-color: var(--color-scrollbar-button-hover);
}


@media screen and (max-width: 768px) {
    .smd-layout_main {
        margin-top: 56px; 
        padding: 16px;
    }
    
    .container {
        padding: 0 16px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    p {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media screen and (max-width: 480px) {
    .smd-layout_main {
        margin-top: 56px;
        padding: 12px;
    }
    
    .container {
        padding: 0 12px;
    }
    
    h1 {
        font-size: 22px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    p {
        font-size: 13px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .smd-layout_main {
        padding: 24px;
    }
    
    .container {
        padding: 0 24px;
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    .smd-layout_main {
        margin-top: 48px;
        padding: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: var(--color-scrollbar-thumb);
        border-radius: 4px;
    }
}

/* Component: smd-layout_header, smd-layout_header--floating, smd-layout_header--floating--min-width
 * Description: Styles for the main header/navigation bar of the 'Strawberry You' Design Language. 
 *              Provides fixed and floating header layouts with blur, shadow, and responsive design. 
 *              Includes logo, title, navigation links, and right-aligned elements. 
 *              Supports mobile responsiveness and profile picture styling with gradient and animation effects.
 */


/* Header layout for 'Strawberry You' Design Language */
.smd-layout_header {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 64px;
    z-index: 999;
    background-color: var(--smd-header--primary);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 4px 24px 0 var(--smd-header--shadow), 0 1.5px 6px 0 var(--smd-header--inset) inset;
    isolation: isolate;
}

.smd-layout_header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--smd-header--background-overlay);
    pointer-events: none;
}

.smd-layout_header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow: var(--smd-header--after-shadow);
    pointer-events: none;
}

.smd-layout_header > * {
    position: relative;
    z-index: 2;
}

.smd-layout_header--floating {
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto; 
    border-radius: 48px;
    border: 0.5px solid var(--smd-header--floating-border);
}

.smd-layout_header--floating--min-width {
    top: 16px !important;
    left: 50% !important;
    right: auto !important; 
    transform: translateX(-50%) !important;
    width: fit-content !important;
    min-width: 400px !important;
    max-width: 90vw !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    border-radius: 48px;
    border: 0.5px solid var(--smd-header--floating-border);
}

.smd-layout_header--floating--min-width .smd-layout_header-logo {
    margin-left: 0; 
    flex-shrink: 0; 
}

.smd-layout_header--floating--min-width .smd-layout_navbar {
    margin-left: 20px; 
    flex-grow: 1; 
}

.smd-layout_header--floating--min-width .smd-layout_navbar-right {
    position: static; 
    right: auto;
    top: auto;
    transform: none;
    margin-left: 20px; 
    flex-shrink: 0; 
    
}

.smd-layout_header hr {
    border: 2px #1a1716;
}

.smd-layout_header--floating hr {
    border: 2px #1a1716;
}

.smd-layout_header-title {
    font-size: 25px;
    color: white;
    font-weight: bold;
    margin-left: 10px;
}

.smd-layout_header-logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 96px;
}

.smd-layout_header-logo img {
    width: 46px;
}


/* Navbar layout for 'Strawberry You' Design Language */

.smd-layout_navbar {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 96px;
}

.smd-layout_navbar a {
    color: white;
    text-decoration: none;
    padding: 0 15px;
    font-size: 16px;
}

.smd-layout_navbar-right {
    position: absolute;
    right: 96px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.smd-layout_navbar-right a {
    color: white;
    text-decoration: none;
    padding: 0 15px;
    font-size: 16px;
}


/* Profile picture style */

.smd-layout_navbar-profile-picture {
    border-radius: 20px;
    margin-left: 15px;
    width: 30px;
    padding: 2px;
    position: relative;
}

.smd-layout_navbar-profile-picture img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    display: block;
}

.smd-layout_navbar-profile-picture::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    z-index: -1;
    transition: transform 0.3s ease;
}

.smd-layout_navbar-profile-picture--one{
    background: var(--color-background-dark) !important;
}

.smd-layout_navbar-profile-picture--one::after {
    background: var(--gradient-one) !important;
}

.smd-layout_navbar-profile-picture:hover::after {
    animation: spin 4s linear infinite;
}


/* Mobile responsive styles */
@media screen and (max-width: 768px) {
    .smd-layout_header,
    .smd-layout_header--floating {
        height: 56px; 
    }

    .smd-layout_header--floating {
        top: 8px;
        left: 8px;
        right: 8px;
        border-radius: 16px;
    }

    .smd-layout_header-logo {
        margin-left: 16px; 
    }

    .smd-layout_header-logo img {
        width: 36px;/
    }

    .smd-layout_header-title {
        display: none;
    }

    .smd-layout_navbar {
        display: none;
        margin-left: 16px;
    }

    .smd-layout_navbar-right {
        right: 16px;
    }

    .smd-layout_navbar-mobile-toggle {
        display: block;
        color: white;
        font-size: 24px;
        padding: 0 16px;
        cursor: pointer;
    }

    /* temporary */
    .smd-layout_main {
        display: none;
    }

    .smd-layout_navbar-profile-name {
        display: none;
    }

    .smd-layout_navbar-profile-picture {
        margin-left: 0px;
    }
}
/* Component: Alert
 * Description: Provides styles for alert messages with various severity levels 
 *              (e.g., success, warning, error) to enhance user feedback and visibility.
 */

 
.smd-component_alert--success {
    border-left-color: var(--color-branding-verified);
}

.smd-component_alert--warning {
    border-left-color: var(--color-branding-secondary);
}

.smd-component_alert--error {
    border-left-color: var(--color-branding-primary);
}

.smd-component_alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.smd-component_alert-content {
    flex: 1;
}

.smd-component_alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.smd-component_alert-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.smd-component_alert-close:hover {
    opacity: 1;
}


/* Component: Badge
 * Description: Provides a styled badge component for displaying status or labels.
 *              Supports different sizes (medium, large) and status variants (error, success, warning).
 *              Includes a disabled state for non-interactive badges.
 */
 

.smd-component_badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--color-branding-primary);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

.smd-component_badge--medium { padding: 5px 7px; font-size: 11px; }
.smd-component_badge--large { padding: 6px 12px; font-size: 14px; }

.smd-component_badge--error { background: var(--color-error, #dc3545); }
.smd-component_badge--success { background: var(--color-branding-verified); }
.smd-component_badge--warning { background: var(--color-branding-secondary); }

.smd-component_badge--disabled { 
    opacity: 0.6; 
    pointer-events: none; 
}
/* Component: Color and Shadow Utility Classes
 * Description: Provides utility classes for applying specific background colors and a base shadow effect to elements.
 *              Color classes use CSS variables for easy theme management. The shadow class adds a prominent drop shadow.
 */
 

.smd-color_mediumslateblue {
    background-color: var(--color-mediumslateblue) !important;
}

.smd-color_darkslateblue {
    background-color: var(--color-darkslateblue) !important;
}

.smd-color_lightblue {
    background-color: var(--color-lightblue) !important;
}

.smd-color_blue {
    background-color: var(--color-blue) !important;
}

.smd-color_branding-primary {
    background-color: var(--color-branding-primary) !important;
}

.smd-color_branding-secondary {
    background-color: var(--color-branding-secondary) !important;
}


.smd-component_base-shadow {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
}
/* Component: Breadcrumb
 * Description: Styles for the breadcrumb navigation component. 
 * Provides a horizontal, scrollable breadcrumb bar with visually distinct items, separators, 
 * and active states. Includes responsive adjustments for smaller screens and accessibility 
 * enhancements for focus and hover states.
 */

 
.smd-component_breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 14px; 
    overflow-x: auto;
    white-space: nowrap; 
}

.smd-component_breadcrumb-item {
    color: var(--color-background-bright);
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.smd-component_breadcrumb-item:hover {
    color: white;
    text-decoration: underline; 
}

.smd-component_breadcrumb-item:focus {
    outline: 2px solid var(--color-branding-primary);
    outline-offset: 2px;
}

.smd-component_breadcrumb-item--active {
    color: var(--color-branding-primary);
    font-weight: 600;
    cursor: default; 
}

.smd-component_breadcrumb-separator {
    color: var(--color-background-lighter);
    user-select: none;
    pointer-events: none;
}

@media (max-width: 768px) {
    .smd-component_breadcrumb {
        font-size: 12px;
        gap: 6px;
    }
}
/* Component: Button
 * Description: Provides styles for button components in three sizes (large, medium, small), 
 *              including default, outlined, and ghost variants. Handles interactive states 
 *              such as hover, active, and loading, with visual feedback like shadows, scaling, 
 *              and a spinner animation for loading state. Supports both button and anchor elements, 
 *              and uses CSS variables for branding colors.
 */


/* Default button styles */

.smd-component_button-large,
a.smd-component_button-large,
button.smd-component_button-large {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-medium,
a.smd-component_button-medium,
button.smd-component_button-medium {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 15px;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-small,
a.smd-component_button-small,
button.smd-component_button-small {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;

    background-color: var(--color-branding-primary);
    border: none;
    border-radius: 12px;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.smd-component_button-large:hover,
.smd-component_button-medium:hover,
.smd-component_button-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.smd-component_button-large:active,
.smd-component_button-medium:active,
.smd-component_button-small:active {
    filter: brightness(0.85);
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
}



/* Outlined buttons */
.smd-component_button--outline {
    background: transparent !important;
    border: 2px solid var(--color-branding-primary) !important;
}

.smd-component_button--outline:hover {
    background: var(--color-branding-primary) !important;
    color: white !important;
}

.smd-component_button--outline.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.smd-component_button--outline.smd-component_button--loading:hover::after {
    border-top-color: white !important;
}

.smd-component_button--outline.smd-component_button--loading:hover {
    background: transparent !important;
    /* Für Outline-Buttons */
    color: var(--color-branding-primary) !important;
}


/* Ghost buttons */
.smd-component_button--ghost:hover {
    background: color-mix(in srgb, var(--color-branding-primary) 15%, transparent 85%) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--color-branding-bright) !important;
}

.smd-component_button--ghost.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.smd-component_button--ghost.smd-component_button--loading:hover {
    background: transparent !important;
    color: var(--color-branding-primary) !important;
}



.smd-component_button--loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    color: transparent !important; 
}

.smd-component_button--loading.interactive-loading .button-text {
    animation: slideOutDown 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    display: block;
    width: 100%;
}

.smd-component_button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    box-sizing: border-box;
    will-change: transform;
    z-index: 2;
    animation: spin-centered 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.smd-component_button--loading.interactive-loading::after {
    animation: 
        spinnerFlyIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards,
        spin-centered 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.4s infinite;
}

/* Text slides down and fades out */
@keyframes slideOutDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Text slides up and fades in (for reverse animation) */
@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Spinner flies in from top */
@keyframes spinnerFlyIn {
    0% {
        transform: translate(-50%, -150%) scale(0.3);
        opacity: 0;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Spinner flies out to top (for reverse animation) */
@keyframes spinnerFlyOut {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -150%) scale(0.3);
        opacity: 0;
    }
}

/* Spinning animation for the spinner */
@keyframes spin-centered {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.smd-component_button--loading-out.interactive-loading .button-text {
    animation: slideInUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.smd-component_button--loading-out.interactive-loading::after {
    animation: spinnerFlyOut 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.smd-component_button-large.smd-component_button--loading::after {
    width: 20px;
    height: 20px;
    border-width: 3px;
    border-top: 3px solid white;
}

.smd-component_button-medium.smd-component_button--loading::after {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-top: 2px solid white;
}

.smd-component_button-small.smd-component_button--loading::after {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-top: 2px solid white;
}

.smd-component_button--outline.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary);
}

.smd-component_button--ghost.smd-component_button--loading::after {
    border-top-color: var(--color-branding-primary);
}


/* Component: Card
 * Description: Provides a flexible card component with default, interactive, compact, and wide variants.
 *              Includes header and footer styling. Supports hover effects for interactive cards and
 *              adapts layout for compact and wide presentations. Utilizes CSS variables for color theming.
 */


/* Default Card Styles */
.smd-component_card {
    background-color: var(--color-background-deep);
    min-height: 250px;
    height: auto;
    width: 250px;
    border-radius: 25px;
    padding: 20px;
    text-decoration: none;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    color: white;
}

.smd-component_card h1 {
    margin-top: 0px;
}

.smd-component_card hr {
    margin-top: -15px;
}

.smd-component_card--glassy {
    background-color: var(--glassmorphism-bg);
    backdrop-filter: blur(18px) saturate(180%) brightness(1.15) contrast(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.15) contrast(1.1);
    box-shadow:
        0 4px 24px 0 rgba(0, 0, 0, 0.25),
        0 1.5px 6px 0 rgba(255,255,255,0.15) inset;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
}



/* Interactive card */
.smd-component_card--interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.smd-component_card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Compact card */
.smd-component_card--compact {
    min-height: 150px;
}

/* Wide card */
.smd-component_card--wide {
    width: 100%;
    max-width: 600px;
}

.smd-component_card-header {
    padding: 0px 12px 12px 0px;
    border-bottom: 1px solid var(--color-background-lighter);
    margin-bottom: 25px;
}

.smd-component_card-footer {
    padding: 12px 12px 0px 0px;
    border-top: 1px solid var(--color-background-lighter);
    margin-top: 25px;
}
/* Component: Checkbox
 * Description: Custom styled checkbox input with primary branding color, rounded corners, and animated checkmark.
 *              Includes hover, focus, disabled, and checked states for improved accessibility and user experience.
 */
 
.smd-component_checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-background-lighter);
    border-radius: 4px;
    background: var(--color-background-deep);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.smd-component_checkbox:hover {
    border-color: var(--color-branding-primary);
}

.smd-component_checkbox:focus {
    outline: 2px solid var(--color-branding-primary);
    outline-offset: 2px;
}

.smd-component_checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.smd-component_checkbox:checked {
    background: var(--color-branding-primary);
    border-color: var(--color-branding-primary);
}

.smd-component_checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Component: Chip
 * Description: Styles a chip component with a deep background color, rounded corners, 
 *              padding, white text, and fit-content width. Designed for use as a label or interactive element.
 */


.smd-component_chip {
    background-color: var(--color-background-deep);
    border-radius: 15px;
    padding: 10px;
    text-decoration: none;
    color: white;
    width: fit-content;
}
/* Component: Dropdown
 * Description: Styles for a dropdown component, including button, content area, header, 
 *              profile section, and responsive/mobile adjustments. 
 *              Provides visual structure, animations, and interactive states for dropdown menus, 
 *              supporting profile pictures, logos, and accessibility on various devices.
 */

 
/* Dropdown component */
.smd-component_dropdown {
    position: relative;
    display: inline-block;
}

.smd-component_dropdown-dropbtn {
    background-color: var(--color-navbar--primary-transparent);
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    color: white;
    font-family: var(--font-family-primary);
    display: flex;
    align-items: center;
}

/* Dropdown content header */
.smd-component_dropdown-header {
    padding: 10px;
}

.smd-component_dropdown-header hr {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-background-lighter);
    margin-top: -10px;
}

/* Dropdown content */
.smd-component_dropdown-content {
    right: -90px;
    margin-top: 10px;
    position: absolute;
    background-color: var(--color-background-dark);
    width: 350px;
    height: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block;
    transform: translateY(-10px);
    transition: visibility 0s linear 0.3s, opacity 0.3s ease, transform 0.3s ease;
    border-radius: 15px;
    /* display: none; */
}

/* Dropdown content main */
.smd-component_dropdown-content-main a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: var(--color-background-medium);
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.smd-component_dropdown-content-main-text {
    margin-left: 10px;
}

.smd-component_dropdown-content-main a:hover {
    background-color: var(--color-background-lighter);
}

.smd-component_dropdown-content-main hr {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-background-lighter);
    margin-top: 10px;
    padding-bottom: 10px; 
    margin-left: 10px;
    margin-right: 10px;
}


.smd-component_dropdown-content.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
    transition-delay: 0s;
    z-index: 10000;
}

/* Dropdown header profile + logo*/
.smd-component_dropdown-profile {
    color: white;
    float: right;
    display: flex;
    align-items: center;
}

.smd-component_dropdown-logo {
    width: 80px;
}

.smd-component_dropdown-profile-picture {
    border-radius: 20px;
    margin-left: 15px;
    width: 30px;
    margin-top: 10px;
    margin-right: 10px;
    padding: 2px;
    background: var(--color-background-lighter);
    position: relative;
}

.smd-component_dropdown-profile-picture img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    display: block;
}

.smd-component_dropdown-profile-picture::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--color-background-medium);
    border-radius: 22px;
    z-index: -1;
}

.smd-component_dropdown-profile-picture--one {
    background: var(--color-background-dark) !important;
}

.smd-component_dropdown-profile-picture--one::after {
    background: var(--gradient-one) !important;
    animation: spin 5s linear infinite;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.smd-component_dropdown-profile-name {
    margin-top: 10px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.smd-component_dropdown-spacer {
    margin-top: 10px;
}


/* mobile-friendly adjustments */
@media screen and (max-width: 768px) {
    .smd-component_dropdown-dropbtn {
        padding: 12px;
    }

    .smd-component_dropdown-content {
        right: 0px;
        margin-top: 10px;
        visibility: hidden;
        position: absolute;
        background-color: var(--color-background-dark);
        width: min(350px, calc(100vw - 30px));
        height: auto;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        opacity: 0;
        transform: translateY(-10px);
        transition: visibility 0s linear 0.3s, opacity 0.3s ease, transform 0.3s ease;
        border-radius: 15px;
    }

    .smd-component_dropdown-header {
        padding: 8px;
    }

    .smd-component_dropdown-logo {
        width: 60px;
    }

    .smd-component_dropdown-profile-name {
        max-width: 120px;
        font-size: 14px;
    }

    .smd-component_dropdown-header hr {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .smd-component_dropdown-content-main a:hover {
        background-color: var(--color-background-medium);
    }

    .smd-component_dropdown-content-main a:active {
        background-color: var(--color-background-lighter);
    }
}




/*     background: conic-gradient(
    from 0deg,
    #ff9900 0deg 55deg,
    transparent 55deg 60deg,

    #ff0000 60deg 115deg,
    transparent 115deg 120deg,

    #ff9900 120deg 175deg,
    transparent 175deg 180deg,

    #ff0000 180deg 235deg,
    transparent 235deg 240deg,

    #ff9900 240deg 295deg,
    transparent 295deg 300deg,

    #ff0000 300deg 355deg,
    transparent 355deg 360deg) !important;
    */
/* Component: Progress Bar
 * Description: Styles for a customizable progress bar component, including determinate and indeterminate states. 
 *              The progress bar features a rounded background, animated gradient fill, and smooth width transitions.
 */

 
.smd-component_progress {
    width: 100%;
    height: 8px;
    background: var(--color-background-lighter);
    border-radius: 4px;
    overflow: hidden;
    position: relative; 
}

.smd-component_progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-branding-primary), var(--color-branding-secondary));
    transition: width 0.3s ease;
    width: 0%; 
    min-width: 0;
}

.smd-component_progress--indeterminate .smd-component_progress-bar {
    width: 30%;
    animation: progress-indeterminate 2s infinite linear;
}

@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
/* Component: Rating
 * Description: Styles for a star-based rating component. 
 *              Provides layout, sizing, coloring, and interactive hover effects for rating stars.
 */

 
.smd-component_rating {
    display: inline-flex;
    gap: 4px;
}

.smd-component_rating-star {
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: var(--color-background-lighter);
    transition: color 0.2s ease;
    font-size: 20px;
}

.smd-component_rating-star--filled {
    color: var(--color-branding-secondary);
}

.smd-component_rating-star:hover {
    color: var(--color-branding-primary);
}
/* Component: Skeleton Loader
 * Description: Provides animated placeholder elements to indicate loading content.
 *              Includes variants for text, title, and circular shapes.
 *              Respects user preference for reduced motion.
 */

 
.smd-component_skeleton {
    background: linear-gradient(90deg, var(--color-background-lighter) 25%, var(--color-background-medium) 50%, var(--color-background-lighter) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;    
    position: relative;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .smd-component_skeleton {
        animation: none;
        background: var(--color-background-medium);
    }
}

.smd-component_skeleton--text {
    height: 1em;
    width: 100%;
}

.smd-component_skeleton--title {
    height: 1.5em;
    width: 80%;
}

.smd-component_skeleton--circle {
    border-radius: 50%;
    aspect-ratio: 1;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Component: Spinner
 * Description: A circular loading spinner component. Uses a rotating border animation to indicate loading state.
 *              The spinner is styled with customizable colors via CSS variables, and supports hiding via the
 *              [aria-hidden="true"] attribute for accessibility.
 */

 
.smd-component_spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-background-lighter);
    border-top: 3px solid var(--color-branding-primary);
    border-radius: 50%;
    animation: spin 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    display: inline-block;
    box-sizing: border-box;
    will-change: transform;
}

@keyframes spin {
    0% { 
        transform: rotate(0deg);
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg);
        opacity: 0.8;
    }
}

.smd-component_spinner[aria-hidden="true"] {
    visibility: hidden;
}
/* Component: Stepper
 * Description: Styles for a horizontal stepper component, including step circles, connecting lines, 
 *              and state variations for active and completed steps.
 */

 
.smd-component_stepper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.smd-component_stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.smd-component_stepper-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-background-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.smd-component_stepper-circle--active {
    background: var(--color-branding-primary);
}

.smd-component_stepper-circle--completed {
    background: var(--color-branding-verified);
}

.smd-component_stepper-line {
    width: 40px;
    height: 2px;
    background: var(--color-background-lighter);
}

.smd-component_stepper-line--completed {
    background: var(--color-branding-verified);
}
/* Component: Tabs
 * Description: Provides styles for a tabbed interface component, including tab navigation,
 *              active tab highlighting, and tab content display. Utilizes CSS variables for colors and fonts, 
 *              and supports smooth transitions and responsive layout.
 */
 
 
.smd-component_tabs {
    background: var(--color-background-deep);
    border-radius: 12px;
    overflow: hidden;
}

.smd-component_tabs-nav {
    display: flex;
    background: var(--color-background-medium);
}

.smd-component_tabs-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-family: var(--font-family-primary);
}

.smd-component_tabs-tab--active {
    background: var(--color-background-deep);
    border-bottom-color: var(--color-branding-primary);
}

.smd-component_tabs-content {
    padding: 20px;
    display: none;
}

.smd-component_tabs-content--active {
    display: block;
}
/* Component: Textfield
 * Description: Styles for the textfield and textarea components, including base appearance, focus and unfocus states, 
 *              and animated floating hints. The textfield uses custom fonts, colors, and transitions for a
 *              modern UI experience.
 */


.smd-component_textarea {
    margin-top: 25px;
    font-family: var(--font-family-primary);
}

.smd-component_textfield {
    width: 300px;
    font-family: var(--font-family-primary);
    padding: 10px;
    font-size: 15px;
    border: 1px solid #5d6669;
    border-radius: 12px;
    outline: none;
    background-color: var(--color-background-deep);
    color: white;
}

.smd-component_textfield:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.24), 0 10px 40px 0 rgba(0, 0, 0, 0.19);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.smd-component_textfield--unfocus {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.24); 
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.smd-component_textfield-hint {
    margin-left: -310px;
    pointer-events: none;
    color: #888;
    transition: all 0.4s ease;
    position: absolute;
    margin-top: 10px; 
    font-size: 15px; 
}

.smd-component_textfield:focus + .smd-component_textfield-hint,
.smd-component_textfield:valid + .smd-component_textfield-hint {
    margin-top: -20px;
    position: absolute;
    font-size: 13px;
    color: var(--color-branding-secondary);
}

.smd-component_textfield-hint-small {
    display: none;
}
/* Component: Toast Notification
 * Description: Styles for a toast notification component, including positioning, animation for showing and hiding,
 *              responsive adjustments for mobile devices, and visual variants for success and error states.
 */


.smd-component_toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    color: white;
    animation: slideIn 0.3s ease;
    z-index: 9999;
    background-color: var(--color-navbar--primary);
    backdrop-filter: blur(15px) saturate(180%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    min-width: 300px;
    max-width: 500px;
    word-wrap: break-word;
    pointer-events: auto;
    transition: all 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.smd-component_toast--hiding {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .smd-component_toast {
        left: 20px;
        right: 20px;
        min-width: auto;
    }
}

.smd-component_toast--success { border-left: 4px solid var(--color-branding-verified); }
.smd-component_toast--error { border-left: 4px solid var(--color-branding-primary); }
/* Component: Toggle Switch
 * Description: Styles for a custom toggle switch component, including base appearance,
 *              interactive states (focus, hover, disabled), and the animated toggle knob.
 *              The active state changes the background color and moves the knob to indicate toggled status.
 */

.smd-component_toggle {
    width: 52px;
    height: 26px;
    background: var(--color-background-lighter);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
    border: 2px solid #79747E;
    outline: none;
    display: inline-block;
    user-select: none;
}

.smd-component_toggle:focus {
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.12);
}

.smd-component_toggle:hover {
    opacity: 0.8;
}

.smd-component_toggle:hover::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(28, 27, 31, 0.08);
    pointer-events: none;
}

.smd-component_toggle:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    border-color: #1C1B1F;
}

.smd-component_toggle::after {
    content: '';
    width: 14px;
    height: 14px;
    background: #79747E;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.smd-component_toggle--active {
    background: var(--color-branding-primary);
    border-color: var(--color-branding-primary);
}

.smd-component_toggle--active::after {
    left: 24px;
    background: white;
    width: 22px;
    height: 22px;
    top: 2px;
}
/* Component: Tooltip and Alert
 * Description: 
 * - .smd-component_tooltip: Container for tooltip functionality, positions tooltip text relative to the hovered element.
 * - .smd-component_tooltip-text: Styles the tooltip text, including positioning, background, color, and transition effects. Hidden by default, becomes visible on hover.
 * - .smd-component_tooltip-text::after: Creates a small arrow pointing to the tooltip trigger using a pseudo-element.
 * - .smd-component_alert: Styles an alert box with padding, border, background color, and flex layout for content alignment.
 */

 
.smd-component_tooltip {
    position: relative;
    display: inline-block;
}

.smd-component_tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-background-dark);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.smd-component_tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-background-dark);
}

.smd-component_tooltip:hover .smd-component_tooltip-text {
    visibility: visible;
    opacity: 1;
}

.smd-component_alert {
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid var(--color-branding-primary);
    background: var(--color-background-deep);
    color: white;
    margin: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}