/* MOL-GOD v1.8.0-rc.2: Widget UX upgrade — colorful modes + full-width bold tabs */

/* ============ MODE SELECTOR BUTTONS (Auto/Flat 2D/Szkielet/Ball&Stick/SpaceFill/H) ============ */
.molgod-widget .ms-btn {
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 8px !important;
    border: 1.5px solid transparent !important;
    background: linear-gradient(180deg,#fff,#f5f7fc) !important;
    color: #4a5568 !important;
    cursor: pointer !important;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .18s, color .18s !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
}
.molgod-widget .ms-btn::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .4s;
    pointer-events: none;
}
.molgod-widget .ms-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(60,80,180,0.18) !important;
    color: #1a202c !important;
}
.molgod-widget .ms-btn:hover::before {
    transform: translateX(100%);
}
.molgod-widget .ms-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Active mode button: distinct color gradient per mode (colorful!) */
.molgod-widget .ms-btn.ms-btn-on {
    background: linear-gradient(135deg,#3b82f6,#1e40af) !important;
    color: #fff !important;
    border-color: #1e40af !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Per-mode color accents via data-action */
.molgod-widget .ms-btn[data-action="toggleRotate"].ms-btn-on {
    background: linear-gradient(135deg,#10b981,#047857) !important;
    border-color: #047857 !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.45) !important;
}
.molgod-widget .ms-btn[data-action="flat"].ms-btn-on {
    background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 4px 12px rgba(139,92,246,0.45) !important;
}
.molgod-widget .ms-btn[data-action="skeletal"].ms-btn-on {
    background: linear-gradient(135deg,#06b6d4,#0e7490) !important;
    border-color: #0e7490 !important;
    box-shadow: 0 4px 12px rgba(6,182,212,0.45) !important;
}
.molgod-widget .ms-btn[data-action="ballstick"].ms-btn-on {
    background: linear-gradient(135deg,#f59e0b,#b45309) !important;
    border-color: #b45309 !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.45) !important;
}
.molgod-widget .ms-btn[data-action="spacefill"].ms-btn-on {
    background: linear-gradient(135deg,#ef4444,#991b1b) !important;
    border-color: #991b1b !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.45) !important;
}
.molgod-widget .ms-btn[data-action="toggleH"].ms-btn-on {
    background: linear-gradient(135deg,#ec4899,#9f1239) !important;
    border-color: #9f1239 !important;
    box-shadow: 0 4px 12px rgba(236,72,153,0.45) !important;
}

/* ============ TAB BUTTONS (Wlasciwosci/Bezp.GHS/Tox/GC-MS/HPLC/Zrodla) ============ */
.molgod-widget .molgod-tab-header,
.molgod-widget .ms-tab-header {
    display: flex !important;
    justify-content: space-evenly !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 2px !important;
    background: linear-gradient(180deg,#f8fafc,#eef2f8) !important;
    border-bottom: 2px solid #cbd5e1 !important;
    overflow: hidden !important;
}
.molgod-widget .ms-tab-btn {
    flex: 1 1 0 !important;
    padding: 12px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.1px !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all .22s cubic-bezier(.4,0,.2,1) !important;
    position: relative;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    text-align: center;
}
.molgod-widget .ms-tab-btn::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg,#3b82f6,#8b5cf6);
    transition: left .25s, right .25s;
    border-radius: 3px 3px 0 0;
}
.molgod-widget .ms-tab-btn:hover {
    color: #1e293b !important;
    background: rgba(59,130,246,0.06) !important;
    transform: translateY(-1px) !important;
}
.molgod-widget .ms-tab-btn:hover::after {
    left: 20%; right: 20%;
}
.molgod-widget .ms-tab-btn.active {
    color: #1e40af !important;
    background: linear-gradient(180deg,rgba(59,130,246,0.08),transparent) !important;
    font-weight: 800 !important;
}
.molgod-widget .ms-tab-btn.active::after {
    left: 8%; right: 8%;
    box-shadow: 0 1px 4px rgba(59,130,246,0.5);
}

/* Fade-in animation for active tab content */
.molgod-widget .ms-tab-body.active {
    animation: ms-fadein-up .32s cubic-bezier(.4,0,.2,1);
}
@keyframes ms-fadein-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tabs: icons bigger + emojis distinct */
.molgod-widget .ms-tab-btn svg,
.molgod-widget .ms-tab-btn span.ms-tab-icon {
    font-size: 17px;
    line-height: 1;
    filter: saturate(1.1);
    transition: transform .2s;
}
.molgod-widget .ms-tab-btn:hover svg,
.molgod-widget .ms-tab-btn:hover span.ms-tab-icon {
    transform: scale(1.15);
}
.molgod-widget .ms-tab-btn.active svg,
.molgod-widget .ms-tab-btn.active span.ms-tab-icon {
    transform: scale(1.2);
}

/* Mobile responsive — smaller font */
@media (max-width: 640px) {
    .molgod-widget .ms-tab-btn {
        font-size: 10px !important;
        padding: 10px 4px !important;
    }
    .molgod-widget .ms-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}