:root {
    /* Primary Colors */
    --common-purple: #602da5;
    --common-orange: #faa52d;
    --common-dark-gray: #282e3c;
    --common-light-gray: #d2d2e6;
    --common-teal: #47c0a5;
    --common-lavender: #b29ad6;
    --common-peach: #ffc573;
    --common-gray: #7f7f7f;
    --common-off-white: #f4f4f8;
    --common-mint: #91d9c9;

    /* Component Colors */
    --common-input-active: #007bff;

    /* Shades of Dark Gray */
    --common-dark-gray-dark: #202531;
    --common-dark-gray-medium: #3c4755;
    --common-dark-gray-light: #565e68;
}

/*****************************************************************
 * Mobile Device Specific Styles
 *****************************************************************/
/* Ensure content respects safe areas on notched devices */
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Fullscreen mode detection */
@media (display-mode: fullscreen) {
    /* Styles for fullscreen mode */
}

@media (display-mode: standalone) {
    /* Styles for standalone mode (iOS) */
}

/*****************************************************************
 * WP Admin Bar Styles
 *****************************************************************/
#wpadminbar {
    background: #383d4f;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

#wp-admin-bar-wp-logo > a > span.ab-icon,
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
    content: url("../images/commercebuild-white-icon-20x20.png");
    top: 2px;
    width: 20px;
    height: 20px;
}

#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

#wp-admin-bar-user-info .avatar {
    border-radius: 50%;
}

#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:hover,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
    color: var(--common-mint);
    background-color: var(--common-dark-gray-medium);
}

#wpadminbar li:hover #adminbarsearch:before {
    color: var(--common-orange);
    background-color: transparent;
}

#wpadminbar li #adminbarsearch.adminbar-focused:before {
    color: var(--common-dark-gray);
    background-color: transparent;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
#wpadminbar li:hover .ab-item:before {
    background: #2c3338;
    color: #ffffff;
}