/* =============================================
   Blissful Nashik Translator — Widget Styles
   ============================================= */

/* ── CSS Variables by Theme ── */
.bnt-theme-saffron {
    --bnt-primary:     #E8600A;
    --bnt-primary-dk:  #C04D00;
    --bnt-accent:      #F9A825;
    --bnt-bg:          #FFF8F0;
    --bnt-bg-panel:    #FFFFFF;
    --bnt-text:        #2C1A00;
    --bnt-border:      #F0C080;
    --bnt-shadow:      rgba(232,96,10,.25);
    --bnt-hover-bg:    #FFF0E0;
    --bnt-active-bg:   #FFE5C0;
    --bnt-active-text: #C04D00;
}
.bnt-theme-white {
    --bnt-primary:     #2271b1;
    --bnt-primary-dk:  #135e96;
    --bnt-accent:      #72aee6;
    --bnt-bg:          #f6f7f7;
    --bnt-bg-panel:    #ffffff;
    --bnt-text:        #1d2327;
    --bnt-border:      #c3c4c7;
    --bnt-shadow:      rgba(0,0,0,.18);
    --bnt-hover-bg:    #f0f6ff;
    --bnt-active-bg:   #dce8f5;
    --bnt-active-text: #135e96;
}
.bnt-theme-dark {
    --bnt-primary:     #E8600A;
    --bnt-primary-dk:  #ff8c3a;
    --bnt-accent:      #F9A825;
    --bnt-bg:          #1e1e1e;
    --bnt-bg-panel:    #2d2d2d;
    --bnt-text:        #f0f0f0;
    --bnt-border:      #444444;
    --bnt-shadow:      rgba(0,0,0,.5);
    --bnt-hover-bg:    #3a3a3a;
    --bnt-active-bg:   #3d2800;
    --bnt-active-text: #ff8c3a;
}

/* ── Base Widget ── */
.bnt-widget {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    z-index: 9999;
}

/* ── FLOATING placement ── */
.bnt-floating {
    position: fixed !important;
}
.bnt-pos-bottom-right { bottom: 24px; right: 24px; }
.bnt-pos-bottom-left  { bottom: 24px; left:  24px; }
.bnt-pos-top-right    { top: 12px;    right: 70px; } /* sits left of cart icon */
.bnt-pos-top-left     { top: 12px;    left:  16px; }

/* ── INLINE placement ── */
.bnt-inline {
    display: inline-block;
    position: relative;
}

/* ── Toggle Button ── */
.bnt-toggle-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--bnt-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 10px var(--bnt-shadow);
    transition: background .2s, transform .15s, box-shadow .2s;
    white-space: nowrap;
    letter-spacing: .3px;
    line-height: 1;
}
.bnt-toggle-btn:hover {
    background: var(--bnt-primary-dk);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--bnt-shadow);
}
.bnt-toggle-btn:focus {
    outline: 3px solid var(--bnt-accent);
    outline-offset: 2px;
}
.bnt-toggle-btn:active {
    transform: translateY(0);
}

.bnt-globe { font-size: 16px; }
.bnt-caret {
    font-size: 11px;
    transition: transform .2s;
    opacity: .85;
}
.bnt-widget.bnt-open .bnt-caret {
    transform: rotate(180deg);
}

/* ── Language Dropdown Panel ── */
.bnt-lang-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--bnt-bg-panel);
    border: 1px solid var(--bnt-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--bnt-shadow);
    min-width: 160px;
    position: absolute;
    /* Default: opens upward, aligned right (for bottom-right) */
    bottom: calc(100% + 10px);
    right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.97);
    transition: opacity .2s, transform .2s;
    transform-origin: bottom right;
}

/* Bottom positions: open upward */
.bnt-pos-bottom-right .bnt-lang-list { bottom: calc(100% + 10px); top: auto;  right: 0;    left: auto; transform-origin: bottom right; }
.bnt-pos-bottom-left  .bnt-lang-list { bottom: calc(100% + 10px); top: auto;  right: auto; left: 0;    transform-origin: bottom left; }

/* Top positions: open downward */
.bnt-pos-top-right    .bnt-lang-list { top: calc(100% + 10px); bottom: auto; right: 0;    left: auto; transform-origin: top right;
    transform: translateY(-8px) scale(.97); }
.bnt-pos-top-left     .bnt-lang-list { top: calc(100% + 10px); bottom: auto; right: auto; left: 0;    transform-origin: top left;
    transform: translateY(-8px) scale(.97); }

.bnt-inline .bnt-lang-list {
    bottom: calc(100% + 8px);
    right: 0;
}

.bnt-widget.bnt-open .bnt-lang-list {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

/* ── Language Items ── */
.bnt-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    cursor: pointer;
    color: var(--bnt-text);
    border-radius: 6px;
    margin: 2px 6px;
    transition: background .15s;
    font-weight: 500;
}
.bnt-lang-item:hover {
    background: var(--bnt-hover-bg);
}
.bnt-lang-item.bnt-active {
    background: var(--bnt-active-bg);
    color: var(--bnt-active-text);
    font-weight: 700;
}
.bnt-lang-item:focus {
    outline: 2px solid var(--bnt-accent);
    outline-offset: -2px;
}
.bnt-flag { font-size: 18px; }
.bnt-lang-native {
    font-size: 14px;
    /* Ensure Devanagari renders well */
    font-family: 'Noto Sans Devanagari', 'Mangal', 'Segoe UI', sans-serif;
}

/* ── Separator line between English and Indian languages ── */
.bnt-lang-item[data-lang="hi"] {
    border-top: 1px solid var(--bnt-border);
    margin-top: 5px;
    padding-top: 12px;
    border-radius: 0 0 6px 6px;
}

/* ── Google Translate bar suppression ── */
/* Aggressively hides all Google Translate UI chrome */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip-content,
.goog-te-menu-frame,
.goog-te-spinner-pos,
.skiptranslate,
iframe.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* Prevent Google from pushing body down */
body {
    top: 0 !important;
    position: static !important;
}
/* Hide the injected Google gadget container */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon {
    display: none !important;
}

/* ── Responsive ── */
@media ( max-width: 480px ) {
    .bnt-pos-bottom-right { bottom: 16px; right: 16px; }
    .bnt-pos-bottom-left  { bottom: 16px; left:  16px; }
    .bnt-toggle-btn { padding: 9px 13px; font-size: 13px; }
    .bnt-lang-list { min-width: 140px; }
    .bnt-lang-item { padding: 9px 14px; }
}