/* ============================================================
   P&P Language Translator — Frontend CSS v4.2.0
   ============================================================ */

/* ── BASE WIDGET ─────────────────────────────────────────── */
#pplt-widget,
.pplt-widget {
    position:    relative;
    display:     inline-flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:   14px;
    line-height: 1;
    z-index:     99990;
    box-sizing:  border-box;
}

/* ── SCROLL-HIDE (floating only) ────────────────────────── */
#pplt-widget.pplt-floating {
    transition: opacity .25s ease, transform .25s ease;
}
#pplt-widget.pplt-floating.pplt-scroll-hidden {
    opacity:        0 !important;
    pointer-events: none !important;
    transform:      translateY(12px) !important;
}

/* ── FLOATING MODE ───────────────────────────────────────── */
/*
 * Base: position fixed, z-index, no specific coordinates.
 * Coordinates are injected by PHP as inline CSS (per-device media queries).
 * This allows the WP admin panel to control position per device type.
 */
#pplt-widget.pplt-floating {
    position: fixed;
    z-index:  99990;
    /* Default fallback if PHP CSS fails: bottom-right */
    bottom:   24px;
    right:    24px;
}

/* ── FLAG IMAGES (circular) ──────────────────────────────── */
.pplt-flag-img {
    display:       block;
    width:         22px;
    height:        22px;
    border-radius: 50%;
    object-fit:    cover;
    object-position: center;
    flex-shrink:   0;
    /* Thin ring to separate flag from background */
    box-shadow:    0 0 0 1px rgba(0,0,0,0.12);
}

/* Trigger button flag — slightly smaller */
.pplt-trigger-flag .pplt-flag-img,
.pplt-trigger-flag-img {
    width:  20px;
    height: 20px;
}

/* Panel list flag */
.pplt-item-flag .pplt-flag-img {
    width:  22px;
    height: 22px;
}

/* ── TRIGGER BUTTON ──────────────────────────────────────── */
.pplt-trigger {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        7px 12px;
    border:         1.5px solid rgba(0,0,0,0.15);
    border-radius:  999px;
    background:     rgba(255,255,255,0.95);
    color:          #1e3a5f;
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:     0 2px 8px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.08);
    outline:        none;
    user-select:    none;
    -webkit-user-select: none;
}

.pplt-trigger:hover {
    background:   rgba(255,255,255,1);
    border-color: rgba(0,0,0,0.25);
    box-shadow:   0 4px 16px rgba(0,0,0,0.20);
}

.pplt-trigger:focus-visible {
    outline:        2px solid #2d82c9;
    outline-offset: 2px;
}

.pplt-trigger-inner {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.pplt-trigger-flag {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.pplt-trigger-label {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.04em;
    color:          #1e3a5f;
}

.pplt-caret {
    opacity:     0.5;
    flex-shrink: 0;
    transition:  transform 0.2s;
    color:       currentColor;
}

#pplt-widget.pplt-open .pplt-caret {
    transform: rotate(180deg);
}

/* ── SPINNER ─────────────────────────────────────────────── */
.pplt-spinner {
    display:       none;
    width:         14px;
    height:        14px;
    border:        2px solid rgba(30,90,154,0.20);
    border-top:    2px solid #1e5a9a;
    border-radius: 50%;
    animation:     pplt-spin 0.7s linear infinite;
    flex-shrink:   0;
}

.pplt-is-loading .pplt-spinner { display: inline-block; }
.pplt-is-loading .pplt-caret   { display: none; }

@keyframes pplt-spin {
    to { transform: rotate(360deg); }
}

/* ── TOP BAR & NAV CONTEXTS — transparent + white text ───── */
/*
 * When JS moves the widget into .header-top or .navbar,
 * it adds pplt-in-topbar or pplt-in-nav.
 * Text is forced WHITE because the Traveler top bar is dark blue.
 * Hover shows a subtle white tint.
 * DO NOT change these rules — top bar placement is confirmed working.
 */
#pplt-widget.pplt-in-topbar .pplt-trigger,
#pplt-widget.pplt-in-nav    .pplt-trigger {
    background:      transparent !important;
    border-color:    rgba(255,255,255,0.45) !important;
    box-shadow:      none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color:           #ffffff !important;
}

#pplt-widget.pplt-in-topbar .pplt-trigger-label,
#pplt-widget.pplt-in-nav    .pplt-trigger-label {
    color: #ffffff !important;
}

#pplt-widget.pplt-in-topbar .pplt-caret,
#pplt-widget.pplt-in-nav    .pplt-caret {
    color:   #ffffff !important;
    opacity: 0.8 !important;
}

#pplt-widget.pplt-in-topbar .pplt-trigger:hover,
#pplt-widget.pplt-in-nav    .pplt-trigger:hover {
    background:   rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.70) !important;
}

/* Flags in topbar — add a white ring so they stand out on dark bg */
#pplt-widget.pplt-in-topbar .pplt-flag-img,
#pplt-widget.pplt-in-nav    .pplt-flag-img {
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6);
}

/* ── CUSTOM DOM SELECTOR CONTEXT ─────────────────────────── */
#pplt-widget.pplt-in-dom .pplt-trigger {
    background:   rgba(255,255,255,0.88);
    border-color: rgba(0,0,0,0.12);
    box-shadow:   0 1px 4px rgba(0,0,0,0.10);
}

/* ── PANEL (dropdown) ────────────────────────────────────── */
.pplt-panel {
    display:       none;
    position:      absolute;
    bottom:        calc(100% + 8px);
    right:         0;
    min-width:     220px;
    max-width:     280px;
    background:    #fff;
    border:        1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    overflow:      hidden;
    z-index:       99999;
    animation:     pplt-fadein 0.15s ease;
}

/* Panel opens downward when widget is in a top context */
#pplt-widget.pplt-in-topbar .pplt-panel,
#pplt-widget.pplt-in-nav    .pplt-panel,
#pplt-widget.pplt-in-dom    .pplt-panel {
    bottom: auto;
    top:    calc(100% + 6px);
}

#pplt-widget.pplt-open .pplt-panel {
    display: block;
}

@keyframes pplt-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel header */
.pplt-panel-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 14px 10px;
    border-bottom:   1px solid #f1f5f9;
}

.pplt-panel-title {
    font-size:      12px;
    font-weight:    700;
    color:          #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pplt-panel-close {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #9ca3af;
    padding:     2px;
    display:     flex;
    align-items: center;
    border-radius: 4px;
    transition:  color 0.15s, background 0.15s;
}

.pplt-panel-close:hover {
    color:      #374151;
    background: #f3f4f6;
}

/* Panel body — scrollable list */
.pplt-panel-body {
    max-height:     320px;
    overflow-y:     auto;
    padding:        6px;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.pplt-panel-body::-webkit-scrollbar       { width: 4px; }
.pplt-panel-body::-webkit-scrollbar-track { background: transparent; }
.pplt-panel-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Panel footer */
.pplt-panel-foot {
    padding:     8px 14px;
    border-top:  1px solid #f1f5f9;
    min-height:  28px;
    display:     flex;
    align-items: center;
}

.pplt-foot-status {
    font-size: 11px;
    color:     #6b7280;
}

.pplt-status-loading::before {
    content:      '';
    display:      inline-block;
    width:        10px;
    height:       10px;
    border:       1.5px solid rgba(30,90,154,0.20);
    border-top:   1.5px solid #1e5a9a;
    border-radius: 50%;
    animation:    pplt-spin 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

.pplt-status-error { color: #dc2626; }

/* ── LANGUAGE ITEMS ──────────────────────────────────────── */
.pplt-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    width:         100%;
    padding:       8px 10px;
    background:    none;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    text-align:    left;
    transition:    background 0.12s;
    color:         #1f2937;
    font-family:   inherit;
}

.pplt-item:hover           { background: #f0f7ff; }
.pplt-item.pplt-active     { background: #eff6ff; color: #1e5a9a; }

/* English reset — visually separated */
.pplt-item.pplt-item-en {
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
    padding-bottom: 10px;
}

.pplt-item-flag {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    width:       26px;
}

.pplt-item-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
    min-width:      0;
}

.pplt-item-name {
    font-size:     13px;
    font-weight:   600;
    color:         inherit;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.pplt-item-native {
    font-size: 11px;
    color:     #9ca3af;
}

.pplt-item-check {
    font-size:   12px;
    color:       #1e5a9a;
    opacity:     0;
    flex-shrink: 0;
    transition:  opacity 0.15s;
}

.pplt-item.pplt-active .pplt-item-check { opacity: 1; }

/* ── OVERLAY (mobile) ────────────────────────────────────── */
.pplt-overlay { display: none; }

/* ── INLINE WIDGET ───────────────────────────────────────── */
#pplt-widget.pplt-inline {
    position: relative;
    display:  inline-flex;
}

#pplt-widget.pplt-inline .pplt-panel {
    bottom: auto;
    top:    calc(100% + 6px);
    left:   0;
    right:  auto;
}

/* ── NAV MENU LI WRAPPER ─────────────────────────────────── */
li.pplt-menu-item {
    display:     flex !important;
    align-items: center !important;
    list-style:  none !important;
}

li.pplt-menu-item > #pplt-widget { margin: 0 !important; }

/* ── MOBILE (≤ 600px) — bottom sheet ────────────────────── */
@media (max-width: 600px) {

    /* Panel becomes a bottom sheet on mobile */
    .pplt-panel {
        position:      fixed !important;
        bottom:        0 !important;
        left:          0 !important;
        right:         0 !important;
        top:           auto !important;
        max-width:     100% !important;
        min-width:     100% !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow:    0 -4px 32px rgba(0,0,0,0.20) !important;
        z-index:       100000 !important;
        animation:     pplt-slideup 0.22s ease !important;
    }

    @keyframes pplt-slideup {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .pplt-panel-body { max-height: 55vh; }

    /* Overlay darkens background on mobile */
    .pplt-overlay {
        display:    block;
        position:   fixed;
        inset:      0;
        background: rgba(0,0,0,0.32);
        z-index:    99998;
        animation:  pplt-fadein 0.2s ease;
    }

    #pplt-widget:not(.pplt-open) .pplt-overlay { display: none; }
}

/* ── ACCESSIBILITY: reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pplt-panel,
    .pplt-trigger,
    .pplt-item,
    .pplt-caret {
        transition: none !important;
        animation:  none !important;
    }
}