/* === GLOBAL (applies on all screen sizes) ======================= */

/* Fix Bootstrap tooltip truncation / narrow width */
.tooltip-inner {
    max-width: 400px !important;   /* increase or set to none */
    white-space: normal !important; /* allow wrapping instead of single line */
}

/* If you ever use a custom tooltip bubble, you can reuse this pattern
.my-tooltip-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 400px;
}
*/


/* === DESKTOP-ONLY STYLES ======================================= */

@media only screen and (min-width: 940px) {

    /* Show desktop toggles */
    .d-sm-flex {
        display: flex !important; /* or your preferred display */
    }

    /* Hide mobile toggles */
    .d-sm-none {
        display: none !important;
    }

    /* Other large screen-specific styles here */

    .mobile {
        display: none !important;
    }

    .desktop {
        display: table-cell;
    }

    .photosOnePage {
        height: 800px;
        width: 900px;
        object-fit: cover;
    }

    .image-containerThumbnail {
        display: flex;
        max-height: 100px;
        max-width: 100px;
        height: 100px;
        align-items: center;
    }

    .image-containerFull {
        display: flex;
        max-height: 500px;
        max-width: 500px;
        height: 500px;
        align-items: center;
    }

    .homepage-gallery-image-container {
        display: flex;
        max-height: 500px;
        max-width: 500px;
        height: 500px;
        align-items: center;
    }

    .productpage-gallery-image-container {
        display: flex;
        max-height: 500px;
        max-width: 500px;
        height: 500px;
        align-items: center;
    }

    .homepage-image {
        height: auto;
        width: 333px;
        object-fit: cover;
    }

    .productpage-image {
        width: 100%; /* Allow image to scale properly */
        object-fit: cover;
        transition: transform 0.3s ease;
        min-height: 300px;
    }

    .dashboard {
        margin-left: 5px;
    }

    .image-wrapper {
        position: relative;
        width: 100%; /* Allow flexibility */
        max-width: 500px; /* Optional, for consistent sizing */
        height: auto;
        overflow: hidden; /* Ensures no overflow from rotation */
        display: inline-block;
    }

    .rotate-90 {
        transform: rotate(90deg);
        transform-origin: center; /* Rotate around the center of the image */
    }

    .rotate-180 {
        transform: rotate(180deg);
        transform-origin: center;
    }

    .rotate-270 {
        transform: rotate(270deg);
        transform-origin: center;
    }

    .photosByLocationThumbnail {
        height: 100px;
        width: 100px;
        object-fit: cover;
    }

    .photosByLocationFull {
        height: 500px;
        width: 500px;
        object-fit: cover;
    }

    .photosByLocationFullRotate-0 {
        height: 500px;
        width: 500px;
        transform: rotate(0deg);
        object-fit: cover;
    }

    .photosByLocationFullRotate-90 {
        height: 500px;
        width: 500px;
        transform: rotate(90deg);
        object-fit: cover;
    }

    .photosByLocationFullRotate-180 {
        height: 500px;
        width: 500px;
        transform: rotate(180deg);
        object-fit: cover;
    }

    .photosByLocationFullRotate-270 {
        height: 500px;
        width: 500px;
        transform: rotate(270deg);
        object-fit: cover;
    }

    .videoByLocationFull {
        width: 500px;
        height: 500px;
        object-fit: cover;
    }

    .videoByLocationThumbnail {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    /* FIXED: !important goes right after the value */
    .ck-editor__editable {
        height: 200px !important;
    }

    .videoByInstructions {
        width: 150px;
        height: 150px;
    }

    .product-image-container {
        /*width: 300px;*/
        /*height: 300px;*/
        object-fit: cover;
    }

    .other-page-image {
        max-width: 100%;
        height: auto;
    }

    .single-page-media-container {
        height: 500px;
        width: 500px;
        object-fit: cover;
    }

    .single-page-media-container img {
        max-width: 100%;
        max-height: 100%;
    }

    .custom-table {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /*.table thead th {*/
    /*    position: sticky;*/
    /*    top: 0;*/
    /*    background: white;*/
    /*    z-index: 10; !* higher to avoid overlap issues *!*/
    /*}*/

    .table-responsive thead th {
        position: sticky;
        top: 0;
        background: whitesmoke;
        z-index: 10;
    }

    /* target only this menu: element immediately following #navbarDropdown */
    #navbarDropdown + .dropdown-menu {
        --bs-dropdown-min-width: auto;   /* BS5 var */
        min-width: auto;                 /* fallback */
        width: auto;
        padding: .25rem;                 /* trim menu padding */
    }

    #navbarDropdown + .dropdown-menu .dropdown-item {
        padding: .25rem .4rem;           /* trim item padding */
    }

    #navbarDropdown + .dropdown-menu .dropdown-item img {
        width: 24px;
        height: 24px;       /* or keep 30px if you prefer */
        display: block;     /* avoids inline whitespace */
    }

    /* Force the dropdown to shrink-wrap its contents */
    .navbar .dropdown .dropdown-menu.slim-lang-menu {
        --bs-dropdown-min-width: auto;  /* BS 5.2+ */
        min-width: auto !important;     /* fallback / stronger than BS default */
        width: auto !important;
        padding: .125rem !important;
    }

    /* Make each item only as wide as the icon */
    .navbar .dropdown .dropdown-menu.slim-lang-menu .dropdown-item {
        display: inline-flex !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Optional: remove any image extra spacing */
    .navbar .dropdown .dropdown-menu.slim-lang-menu .dropdown-item img {
        display: block;
    }

    /* Center each icon perfectly inside a small square hit-area */
    .slim-lang-menu .icon-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px;                 /* adjust if you change img size */
        height: 28px;
        padding: 0 !important;
        line-height: 0;              /* kills baseline offset */
    }

    .slim-lang-menu .icon-item img {
        display: block;              /* no extra inline gap */
    }

    /* keep the menu itself tight */
    .slim-lang-menu {
        --bs-dropdown-min-width: auto;
        min-width: auto !important;
        width: auto !important;
        padding: .125rem !important;
    }

    .btn.btn-sm {
        font-size: var(--bs-btn-font-size, 0.875rem) !important;
        padding: var(--bs-btn-padding-y, .25rem) var(--bs-btn-padding-x, .5rem) !important;
        line-height: var(--bs-btn-line-height, 1.5) !important;
    }

    /* Works for BS4/BS5 inside .table-responsive */
    .table-responsive .table.table-bordered > tbody > tr:last-child > td,
    .table-responsive .table.table-bordered > tfoot > tr:last-child > td,
    .table-responsive .table.table-bordered > tbody > tr:last-child > th,
    .table-responsive .table.table-bordered > tfoot > tr:last-child > th {
        border-bottom: 1px solid var(--bs-border-color, #dee2e6) !important;
    }

    .ck-content ul,
    .ck-content ol {
        list-style: revert;           /* disc/decimal */
        list-style-position: outside;
        margin: 1em 0;
        padding-left: 1.5rem;         /* visible indent */
    }

    .ck-content li {
        display: list-item;
    }

    .ck-content li::marker {
        content: initial;  /* in case a reset nuked it */
    }

    /* One place to rule all content lists (works with or without <p> inside <li>) */
    .richtext ul,
    .ck-content ul {
        list-style: disc outside;
        margin: 1em 0;
        padding-left: 1.5rem;
    }

    .richtext ul > li,
    .ck-content ul > li {
        padding-left: 1.5em;   /* space for hanging bullet */
        text-indent: -1.5em;   /* pull first line (bullet) back */
    }

    /* If CKEditor wraps list text in <p>, remove extra spacing and apply indent */
    .richtext li > p,
    .ck-content li > p {
        margin: 0;
        padding-left: 1.5em;
        text-indent: -1.5em;
    }

    .team-notes,
    .team-notes p,
    .team-notes div {
        text-align: left !important;
    }

    .tooltip,
    .tooltip-inner {
        max-width: 400px !important;     /* or larger if you like */
    }

    .tooltip-inner {
        white-space: normal !important;  /* allow wrapping */
        word-wrap: break-word;           /* break long words/URLs */
    }
    /* Super-wide tooltip just for the competitor price descriptions */
    .wide-tooltip .tooltip-inner {
        max-width: none !important;        /* no width limit */
        white-space: normal !important;    /* allow wrapping */
        word-wrap: break-word;             /* break long words/URLs */
        text-align: left;                  /* easier to read long text */
        padding: .5rem .75rem;             /* a bit of breathing room */
    }


    .info-tooltip {
        position: relative;
        cursor: pointer;
    }

    /* Tooltip bubble */
    .info-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: 9999;

        /* position it below the icon */
        top: 100%;
        left: 0;
        margin-top: 4px;

        /* visual styling */
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 1.3;
        text-align: left;

        /* <<< CRITICAL OVERRIDES >>> */
        display: none;                  /* hidden until hover */
        white-space: normal;            /* multi-line */
        word-break: normal;
        overflow-wrap: break-word;      /* break long URLs */
        text-transform: none !important;
        letter-spacing: normal !important;
        writing-mode: horizontal-tb !important;

        /* width: make it a proper bubble, not 1-char wide */
        min-width: 220px;               /* at least this wide */
        max-width: 500px;               /* wrap after this */
        width: max-content;             /* grow to fit content */
        box-sizing: border-box;
    }

    /* show on hover */
    .info-tooltip:hover::after {
        display: block;
    }


}