/**
 * Settings page styles
 *
 * @package Lyxity
 */

/* Clean Bootstrap-based styles */

/* Only minimal custom styling needed */
.lyxity-settings-wrap {
    margin: 20px 0 0 0;
    max-width: 100%;
    padding-right: 20px;
}

.lyxity-settings-wrap .container-fluid {
    max-width: 100%;
    padding-right: 0;
}

/* Using Bootstrap mb-4 class */

/* No background images - clean UI */

/* Using Bootstrap d-flex and align-items-center classes */

/* Using Bootstrap img-fluid class */

/* Keep gradient text effect but use Bootstrap classes for size and weight */
.lyxity-text-logo {
    background: linear-gradient(90deg, #4285f4, #34a853);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Using Bootstrap h1 and text-dark classes */


/* No background images */

/* Using Bootstrap card component instead */
#lyxity-settings-form .card {
    max-width: none !important;
    width: 100%;
    border: 1px solid rgba(0,0,0,.125);
}

#lyxity-settings-form .card-header {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

/* No background decorations - clean UI */

/* Using Bootstrap spacing and typography classes */

/* Using Bootstrap card and border utilities */

/* Using Bootstrap row and col classes */
/* Using Bootstrap img-fluid class */

/* Using Bootstrap link classes */

/* Using Bootstrap btn and btn-primary classes */

/* Using Bootstrap form-group and form-control classes */

/* Using Bootstrap img-fluid class */

/* Using Bootstrap row and col-md-4 classes */

/* Using Bootstrap responsive classes instead of custom media queries */

/* Mobile responsive styles */
@media (max-width: 782px) {
    input.form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .lyxity-settings-wrap {
        margin: 10px 0 0 0;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 15px !important;
    }
}

/* Using native Bootstrap utility classes instead */

/* Using Bootstrap form-group and form-label classes */
.form-group {
    margin-bottom: 5px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #23282d;
}


/* Using Bootstrap form-control class */

/* Using Bootstrap form-select class */

/* Minimal input group styles - using Bootstrap for most styling */


/* Minimal button styles - using Bootstrap for most styling */

/* Using Bootstrap btn and btn-primary classes instead */

/* Using Bootstrap ms-2 class */

/* Using Bootstrap hover effects */

/* Using Bootstrap spacing and flex utilities */

/* Using Bootstrap form-text utility */

/* Using Bootstrap alert components instead */

/* Using Bootstrap hover effects */
.password-control{
    width: unset !important;
}
.dashicons {
    vertical-align: middle !important;
}