/* ===== Icons (YES/NO, RADIO) ===== */

/* Keep the icon in normal flow so it can increase the panel height if it's tall */
.mg-yesno-icon,
.mg-radio-icon {
    position: static;
    right: auto;
    top: auto;
    transform: none;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    flex: 0 0 auto;

    /* Optional spacing so the icon doesn't stick to the content */
    margin-left: 30px;
}

/* Do not constrain the image width */
.mg-yesno-icon img,
.mg-radio-icon img {
    display: block;
    height: auto;
    max-width: none;
}

/* ===== Panel / checkbox layout ===== */

#productConfigurableOptions .col-sm-4 .panel-check {
    margin-bottom: 20px !important;
    min-height: 86px !important;
}
/*
.col-sm-4:has(.panel-check) {
    padding-bottom: 10px !important;
}
*/
/* Flex row: keep text aligned to the top (do not vertically center title/subtitle) */
#productConfigurableOptions .panel-check .check > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Content column: keep items stacked from the top */
#productConfigurableOptions .panel-check .check > label .check-content {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Title tweaks (avoid accidental centering via margins) */
#productConfigurableOptions .panel-check .check-title {
    width: 90%;
    margin-top: 0;
}

/* Vertically center ONLY the icon within the row (not the text) - ONLY on larger screens */
@media (min-width: 577px) {
    #productConfigurableOptions .panel-check .check > label .mg-yesno-icon,
    #productConfigurableOptions .panel-check .check > label .mg-radio-icon {
        align-self: center;
    }
}

/* ===== Tooltip (HTML) ===== */

label.mg-has-tooltip {
    position: relative;
}

/* Tooltip bubble element inserted into the label */
label.mg-has-tooltip .mg-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);

    display: block;
    max-width: 320px;

    background: rgb(0, 0, 0);
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;

    /* Show/hide */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
}

/* Tooltip arrow (triangle) */
label.mg-has-tooltip .mg-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);

    border: 6px solid transparent;
    border-top-color: rgb(0, 0, 0);
}

/* Show tooltip on hover/focus */
label.mg-has-tooltip:hover .mg-tooltip,
label.mg-has-tooltip:focus-within .mg-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Optional: if tooltip is empty, keep it hidden */
label.mg-has-tooltip .mg-tooltip:empty {
    display: none;
}

/* ===== Group tabs ===== */
.custom-groups-tabs .tab-content {
    padding-top: 10px;
}

/* Tooltips on section titles (separate classes) */
.mg-title-tooltip-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

/* Tooltip trigger (the info icon only) */
.mg-title-tooltip-trigger{
    all: unset;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Red (i) icon */
.mg-title-tooltip-trigger i{
    color: grey;
}

/* Tooltip bubble */
.mg-title-tooltip-bubble{
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);

    display: block;
    max-width: 320px;

    background: rgb(0, 0, 0);
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
}

.mg-title-tooltip-bubble::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgb(0, 0, 0);
}

/* Show tooltip on hover or keyboard focus (Tab) */
.mg-title-tooltip-wrap:hover .mg-title-tooltip-bubble,
.mg-title-tooltip-wrap:focus-within .mg-title-tooltip-bubble{
    opacity: 1;
    visibility: visible;
}

/* If tooltip is empty, keep it hidden */
.mg-title-tooltip-bubble:empty{ display: none; }

/* Tooltip rendered in <body> so it isn't clipped/covered by stacking contexts */
.mg-title-tooltip-portal{
    position: fixed;
    max-width: 320px;

    background: rgb(0, 0, 0);
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;

    z-index: 2147483647;
    pointer-events: none;
}

.mg-title-tooltip-portal::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgb(0, 0, 0);
}

/* Fix accordion overflow so tooltips can render outside the panel */
.panel.panel-accordion{
    overflow: visible !important;
}

/* Mobile portrait: YES/NO only — centered icon below the text */
@media (max-width: 576px) and (orientation: portrait) {

    /* Only labels that contain the YES/NO icon */
    label:has(.mg-yesno-icon) {
        display: flex;
        flex-direction: column; /* stack text + icon */
        align-items: flex-start; /* keep text left-aligned */
        gap: 8px;
    }

    /* Center the icon under the text */
    label:has(.mg-yesno-icon) .mg-yesno-icon {
        margin-left: 0;
        align-self: center; /* centers the icon horizontally */
    }
}

/*Fix quantity input*/
/* =========================================================
   Number inputs: hide native spinners + custom +/- inside input
   Works with: input.form-control-qty[type=number]
   Input height: 26px, buttons: 13px + 13px
   ========================================================= */

/* 1) Hide native spinners (Chrome/Safari/Edge/Opera - WebKit/Blink) */
input.form-control-qty[type="number"]::-webkit-outer-spin-button,
input.form-control-qty[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* 2) Hide native spinners (Firefox) */
input.form-control-qty[type="number"]{
    -moz-appearance: textfield; /* [web:61] */
}

/* 3) Wrapper injected by JS, must NOT change the layout */
.mg-qty-wrap{
    position: relative;
    display: inline-block;
    width: 180px;
}

/* 4) Input: keep width stable, reserve space for buttons */
.mg-qty-wrap > input.form-control-qty[type="number"]{
    width: 180px;
    box-sizing: border-box;      /* padding stays inside 100% width [web:93] */
    height: 42px;                /* fixed input height [web:125] */
    padding-right: 22px;         /* space for the +/- column */
}

/* 5) Controls: placed inside input border on the right */
.mg-qty-controls{
    position: absolute;
    right: 0px;
    top: 0px;

    height: 42px;                /* match input height */
    width: 18px;                 /* narrow column */
    display: flex;
    flex-direction: column;

    overflow: hidden;
    border-left: 1px solid #cfcfcf;
    border-radius: 2px;
}

/* 6) Buttons: exactly half height (13px each) */
.mg-qty-btn{
    height: 20px;
    width: 100%;

    border: 0;
    background: transparent;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.mg-qty-btn + .mg-qty-btn{
    border-top: 1px solid #cfcfcf;
}

.mg-qty-btn:active{
    background: rgba(0,0,0,.06);
}

.mg-qty-btn:focus-visible{
    outline: 2px solid rgba(0, 123, 255, .45);
    outline-offset: -2px;
}

.panel-body .form-group.m-b-0x:has(.mg-qty-wrap) div {
    width: 100%;
}