/* Custom styles for MicAccessTool Accessibility Toolbar
   Matching the project's color scheme */

/* CSS Variable for Brand Gradient */
:root {
    --Brand-Gradient-New-Brand: linear-gradient(95deg, #005DB1 -21%, #00AAC6 83.81%);
}

/* Main toggle button - LiveHub style: white circular button with blue icon */
#mic-init-access-tool .mic-access-tool-general-button {
    background: #FFFFFF !important;
    border: 2px solid #005DB1 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 93, 177, 0.25) !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
    transition: all 0.2s ease-in-out !important;
}

#mic-init-access-tool .mic-access-tool-general-button:focus {
    background: #F0F7FF !important;
    border-color: #00AAC6 !important;
    box-shadow: 0 4px 12px rgba(0, 170, 198, 0.35) !important;
}

/* Main toggle button icon - LiveHub style: blue/teal gradient color */
#mic-init-access-tool .mic-access-tool-general-button img {
    filter: invert(25%) sepia(98%) saturate(1500%) hue-rotate(185deg) brightness(95%) contrast(101%) !important;
    transition: filter 0.2s ease-in-out !important;
}


#mic-init-access-tool .mic-access-tool-general-button:focus img {
    filter: invert(45%) sepia(85%) saturate(800%) hue-rotate(165deg) brightness(95%) contrast(100%) !important;
}


/* ============================================
   HEADER STYLING - Minimal header with just X close button
   ============================================ */

/* Header container - minimal styling, just for close button */
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header {
    background-color: transparent !important;
    padding: 8px 8px 0 8px !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    color: transparent !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

/* Hide the header title/text ("acc toolbox") */
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header > span,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header h1,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header h2,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header h3,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header p {
    display: none !important;
}

/* Style the close button as a minimal X button */
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button {
    background-color: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease-in-out !important;
    position: relative !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
}

/* Hide original button content (text/icons) */
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button span,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button img,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button * {
    display: none !important;
}

/* Create X using ::before and ::after pseudo-elements */
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button::before,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 2px !important;
    background-color: #505D6F !important;
    transition: background-color 0.2s ease-in-out !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button::before {
    transform: rotate(45deg) !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button::after {
    transform: rotate(-45deg) !important;
}

/* Hover state for close button */

#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button:focus {
    background-color: #E7F4FD !important;
}


#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button:focus::before,
#mic-init-access-tool .mic-access-tool-box .mic-access-tool-box-header button:focus::after {
    background-color: #005DB1 !important;
}

/* Buttons inside the toolbar */
#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button,
#mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button,
#mic-init-access-tool .mic-access-tool-box .link-access-page button {
    background-color: #F6F6F9 !important;
    border-color: #EAEAEF !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button span,
#mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button span,
#mic-init-access-tool .mic-access-tool-box .link-access-page button span {
    color: #505D6F !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button:focus span,
#mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button:focus span,
#mic-init-access-tool .mic-access-tool-box .link-access-page button:focus span {
    color: #005DB1 !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-enabled span,
#mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button.vi-enabled span,
#mic-init-access-tool .mic-access-tool-box .link-access-page button.vi-enabled span {
    color: #005DB1 !important;
    font-weight: 600 !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-enabled::before,
#mic-init-access-tool .mic-access-tool-box .mic-disable-buttons button.vi-enabled::before,
#mic-init-access-tool .mic-access-tool-box .link-access-page button.vi-enabled::before {
    color: #20CA7B !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-buttons-block button.vi-font-enabled span {
    color: #005DB1 !important;
}

/* Links in toolbar */
#mic-init-access-tool .mic-access-tool-box .link-access-page a {
    color: #505D6F !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

/* Footer credits area */
#mic-init-access-tool .mic-access-tool-box .mic-toolbox-all-credits {
    background-color: #353A48 !important;
}

#mic-init-access-tool .mic-access-tool-box .mic-toolbox-all-credits a,
#mic-init-access-tool .mic-access-tool-box .mic-toolbox-all-credits span {
    color: #8E8EA9 !important;
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

/* Panel content area background */
#mic-init-access-tool .mic-access-tool-box > div:not(.mic-access-tool-box-header):not(.mic-toolbox-all-credits) {
    background-color: #fff !important;
    border-radius: 4px !important;
}

/* All text within the toolbar uses project fonts */
#mic-init-access-tool * {
    font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

/* ============================================
   GRADIENT ICONS - Apply brand gradient colors to all images
   Using CSS filter technique to approximate #005DB1 to #00AAC6
   ============================================ */

/* All images inside the toolbar panels - Apply gradient-like blue/teal color */
#mic-init-access-tool .mic-access-tool-box img {
    filter: invert(100%) brightness(2);
}
/* ============================================
   HIDE UNWANTED SECTIONS
   Hide accessibility statement, report button, and learn more credits
   ============================================ */

/* Hide the accessibility statement link */
#mic-init-access-tool #mic-toolbox-link-nagishut {
    display: none !important;
}

/* Hide the report accessibility problem link */
#mic-init-access-tool #mic-toolbox-link-contact {
    display: none !important;
}

/* Hide the "learn more about toolbox" credits section at the bottom */
#mic-init-access-tool .mic-toolbox-all-credits {
    display: none !important;
}

#mic-init-access-tool .mic-access-tool-general-button>div span {
    display: none !important;
}

#mic-init-access-tool .mic-access-tool-general-button.mic-access-tool-general-button-right {
    right: 20px !important;
}

#mic-init-access-tool .mic-access-tool-general-button {
    bottom: 22px !important;
}

#mic-init-access-tool button:not(#mic-access-tool-box-close-button,#mic-access-tool-general-button) {
    font-variant: small-caps;
    color: #fff;
    background: linear-gradient(#005DB1, #00AAC6);
}

#mic-init-access-tool .mic-subtitle-span {
    color: #8e8ea9 !important;
    font-family: var(--ac-default-font-family) !important;
    font-weight: 500;
}

#mic-init-access-tool button:not(#mic-access-tool-box-close-button,#mic-access-tool-general-button) span {
    font-variant: small-caps;
    color: #fff !important;
    font-weight: 500;
}

#mic-init-access-tool .mic-access-tool-box {
    background-color: #f2f2f2 !important;
}

#mic-init-access-tool #mic-toolbox-disable-buttons-keyboard {
    margin: 1rem 0;
}