/* ==========================================================================
   Brandoz Size Setting – Frontend Styles
   Responsive, accessible, RTL-ready. All 5 floating-button positions supported.
   ========================================================================== */

/* ── Popup overlay ───────────────────────────────────────────────────────── */
.brandoz-popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.7);
    padding: 16px;
    animation: brandozFadeIn 0.25s ease;
}

.brandoz-popup-overlay.brandoz-closing {
    animation: brandozFadeOut 0.28s ease forwards;
}

@keyframes brandozFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes brandozFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

body.brandoz-popup-open {
    overflow: hidden;
}

/* ── Popup card ──────────────────────────────────────────────────────────── */
.brandoz-popup-inner {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 8px;
    padding: 40px 36px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: brandozSlideUp 0.28s ease;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes brandozSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.brandoz-closing .brandoz-popup-inner {
    animation: brandozSlideDown 0.28s ease forwards;
}

@keyframes brandozSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(24px); opacity: 0; }
}

/* ── Close button (×) ────────────────────────────────────────────────────── */
.brandoz-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.brandoz-popup-close:hover,
.brandoz-popup-close:focus {
    color: #333;
    background: #f5f5f5;
    outline: none;
}

[dir="rtl"] .brandoz-popup-close {
    right: auto;
    left: 16px;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.brandoz-popup-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

.brandoz-popup-description {
    margin: 0 0 24px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* ── Size option grid ────────────────────────────────────────────────────── */
.brandoz-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.brandoz-size-option {
    min-width: 54px;
    padding: 10px 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.1s;
    color: #444;
    text-align: center;
    line-height: 1;
    touch-action: manipulation; /* better tap response on mobile */
    -webkit-tap-highlight-color: transparent;
}

.brandoz-size-option:hover {
    border-color: var(--brandoz-color);
    color: var(--brandoz-color);
    background: #f9f4f9;
}

/* High-specificity rules prevent Astra/theme from overriding button focus inside popup */
#brandoz-popup-overlay .brandoz-size-option:focus,
#brandoz-popup-overlay .brandoz-size-option:focus:not(:focus-visible) {
    outline: none !important;
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

#brandoz-popup-overlay .brandoz-size-option:focus-visible {
    outline: 2px solid var(--brandoz-color) !important;
    outline-offset: 2px;
}

.brandoz-size-option.active {
    border-color: var(--brandoz-color);
    color: var(--brandoz-color);
    background: #f5eef5;
    transform: scale(1.04);
}

/* ── Popup action buttons ────────────────────────────────────────────────── */
.brandoz-popup-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.brandoz-save-size-btn {
    padding: 12px 28px;
    background: var(--brandoz-color);
    color: #fff;
    border: 2px solid var(--brandoz-color);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.18s, transform 0.1s;
    line-height: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.brandoz-save-size-btn:hover {
    filter: brightness(1.12);
}

.brandoz-save-size-btn:focus {
    outline: 3px solid color-mix(in srgb, var(--brandoz-color) 40%, transparent);
    outline-offset: 2px;
}

.brandoz-save-size-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.brandoz-popup-close-btn {
    padding: 10px 18px;
    background: transparent;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #555;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
    touch-action: manipulation;
}

.brandoz-popup-close-btn:hover {
    border-color: #999;
    color: #333;
}

/* ── Popup inline message ────────────────────────────────────────────────── */
.brandoz-popup-message {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 500;
}

.brandoz-popup-message.brandoz-msg-error {
    background: #ffeaea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.brandoz-popup-message.brandoz-msg-success {
    background: #eafaf1;
    color: #27ae60;
    border: 1px solid #c3e6cb;
}

.brandoz-popup-message.brandoz-msg-info {
    background: #e8f4fd;
    color: #1a6f9c;
    border: 1px solid #bee5eb;
}

/* ──────────────────────────────────────────────────────────────────────────
   Floating Change-Size Button
   Position is controlled by the data-position attribute set from PHP/admin.
   Default fallback = bottom-right.
   ────────────────────────────────────────────────────────────────────────── */

#brandoz-floating-btn {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 10px 14px;
    background: var(--brandoz-color);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    z-index: 99998;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Default = bottom-right */
    bottom: 24px;
    right: 24px;
    left: auto;
    top: auto;
    transition: transform 0.15s, box-shadow 0.15s;
}

/* ── Bottom Right (default) ──────────────────────────────────────────────── */
#brandoz-floating-btn[data-position="bottom-right"] {
    bottom: 24px;
    right: 24px;
    left: auto;
    top: auto;
}

#brandoz-floating-btn[data-position="bottom-right"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ── Bottom Left ─────────────────────────────────────────────────────────── */
#brandoz-floating-btn[data-position="bottom-left"] {
    bottom: 24px;
    left: 24px;
    right: auto;
    top: auto;
}

#brandoz-floating-btn[data-position="bottom-left"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ── Bottom Center ───────────────────────────────────────────────────────── */
#brandoz-floating-btn[data-position="bottom-center"] {
    bottom: 24px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}

#brandoz-floating-btn[data-position="bottom-center"]:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ── Top Right ───────────────────────────────────────────────────────────── */
#brandoz-floating-btn[data-position="top-right"] {
    top: 24px;
    right: 24px;
    bottom: auto;
    left: auto;
}

#brandoz-floating-btn[data-position="top-right"]:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ── Top Left ────────────────────────────────────────────────────────────── */
#brandoz-floating-btn[data-position="top-left"] {
    top: 24px;
    left: 24px;
    bottom: auto;
    right: auto;
}

#brandoz-floating-btn[data-position="top-left"]:hover {
    transform: translateY(2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Focus ring (all positions) */
#brandoz-floating-btn:focus {
    outline: 3px solid color-mix(in srgb, var(--brandoz-color) 50%, transparent);
    outline-offset: 3px;
}

.brandoz-floating-icon {
    font-size: 1rem;
    line-height: 1;
}

.brandoz-floating-label {
    opacity: 0.85;
    font-weight: 400;
}

.brandoz-floating-size {
    font-weight: 700;
}

/* RTL mirrors left↔right for left/right positions */
[dir="rtl"] #brandoz-floating-btn[data-position="bottom-right"],
[dir="rtl"] #brandoz-floating-btn:not([data-position]) {
    right: auto;
    left: 24px;
}

[dir="rtl"] #brandoz-floating-btn[data-position="bottom-left"] {
    left: auto;
    right: 24px;
}

[dir="rtl"] #brandoz-floating-btn[data-position="top-right"] {
    right: auto;
    left: 24px;
}

[dir="rtl"] #brandoz-floating-btn[data-position="top-left"] {
    left: auto;
    right: 24px;
}

/* ── Shortcode: size dropdown ────────────────────────────────────────────── */
.brandoz-size-selector-wrap {
    display: inline-block;
}

.brandoz-size-select {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    min-width: 120px;
    appearance: auto;
}

.brandoz-size-select:focus {
    border-color: var(--brandoz-color);
    outline: 2px solid color-mix(in srgb, var(--brandoz-color) 30%, transparent);
    outline-offset: 1px;
}

/* ── Shortcode: current size display ─────────────────────────────────────── */
.brandoz-current-size {
    font-size: 0.95rem;
    color: #444;
}

.brandoz-current-size.brandoz-no-size {
    color: #888;
    font-style: italic;
}

/* ── Shortcode buttons ───────────────────────────────────────────────────── */
.brandoz-change-size-btn,
.brandoz-reset-size-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.875rem;
    cursor: pointer;
    border: 2px solid var(--brandoz-color);
    background: transparent;
    color: var(--brandoz-color);
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    touch-action: manipulation;
}

.brandoz-change-size-btn:hover,
.brandoz-reset-size-btn:hover {
    background: var(--brandoz-color);
    color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile — max-width: 600px
   Each position gets its own adjusted offsets.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    /* ── Popup card ──────────────────────────────────────────────────────── */
    .brandoz-popup-overlay {
        align-items: flex-end;    /* slide up from bottom on small screens */
        padding: 0;
    }

    .brandoz-popup-inner {
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 28px 20px 32px;
        max-height: 85vh;
        animation: brandozSlideUpMobile 0.3s ease;
    }

    @keyframes brandozSlideUpMobile {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .brandoz-popup-title {
        font-size: 1.2rem;
    }

    .brandoz-size-options {
        gap: 8px;
    }

    .brandoz-size-option {
        min-width: 52px;
        padding: 12px 10px;  /* taller tap target */
        font-size: 0.85rem;
    }

    .brandoz-popup-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .brandoz-save-size-btn {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
        text-align: center;
    }

    .brandoz-popup-close-btn {
        width: 100%;
        padding: 12px;
        text-align: center;
    }

    /* ── Floating button — bottom-right (default) ────────────────────────── */
    #brandoz-floating-btn,
    #brandoz-floating-btn[data-position="bottom-right"] {
        bottom: 16px;
        right: 16px;
        left: auto;
        top: auto;
        padding: 10px 14px 10px 12px;
        font-size: 0.82rem;
    }

    /* ── Floating button — bottom-left ───────────────────────────────────── */
    #brandoz-floating-btn[data-position="bottom-left"] {
        bottom: 16px;
        left: 16px;
        right: auto;
        top: auto;
        padding: 10px 14px 10px 12px;
        font-size: 0.82rem;
    }

    /* ── Floating button — bottom-center ─────────────────────────────────── */
    #brandoz-floating-btn[data-position="bottom-center"] {
        bottom: 16px;
        left: 50%;
        right: auto;
        top: auto;
        padding: 10px 14px 10px 12px;
        font-size: 0.82rem;
        transform: translateX(-50%);
    }

    #brandoz-floating-btn[data-position="bottom-center"]:hover {
        transform: translateX(-50%); /* no lift on mobile */
    }

    /* ── Floating button — top-right ─────────────────────────────────────── */
    #brandoz-floating-btn[data-position="top-right"] {
        top: 16px;
        right: 16px;
        bottom: auto;
        left: auto;
        padding: 10px 14px 10px 12px;
        font-size: 0.82rem;
    }

    /* ── Floating button — top-left ──────────────────────────────────────── */
    #brandoz-floating-btn[data-position="top-left"] {
        top: 16px;
        left: 16px;
        bottom: auto;
        right: auto;
        padding: 10px 14px 10px 12px;
        font-size: 0.82rem;
    }

    /* ── RTL mirrors on mobile ───────────────────────────────────────────── */
    [dir="rtl"] #brandoz-floating-btn[data-position="bottom-right"],
    [dir="rtl"] #brandoz-floating-btn:not([data-position]) {
        right: auto;
        left: 16px;
    }

    [dir="rtl"] #brandoz-floating-btn[data-position="bottom-left"] {
        left: auto;
        right: 16px;
    }

    [dir="rtl"] #brandoz-floating-btn[data-position="top-right"] {
        right: auto;
        left: 16px;
    }

    [dir="rtl"] #brandoz-floating-btn[data-position="top-left"] {
        left: auto;
        right: 16px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Inline Size Picker  [brandoz_size_picker]
   ────────────────────────────────────────────────────────────────────────── */

.brandoz-inline-picker {
    display: block;
    width: var(--brandoz-picker-width, 640px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 48px 32px 40px;
    box-sizing: border-box;
}

/* Alignment variants */
/* ── Title ─────────────────────────────────────────────────────────── */
.brandoz-inline-picker .brandoz-picker-title {
    margin: 0 0 10px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--brandoz-picker-title, #1a1a1a);
}

/* ── Description ────────────────────────────────────────────────────── */
.brandoz-inline-picker .brandoz-picker-description {
    margin: 0 0 28px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--brandoz-picker-desc, #555);
}

/* Larger buttons in the inline picker vs the popup */
.brandoz-inline-picker .brandoz-size-option {
    min-width: 68px;
    padding: 16px 20px;
    font-size: 1rem;
    border-radius: 10px;
}

/* Inline message (reuses popup-message classes) */
.brandoz-inline-picker .brandoz-picker-message {
    margin-top: 16px;
}

/* Mobile */
@media (max-width: 600px) {
    .brandoz-inline-picker {
        padding: 32px 20px 28px;
    }

    .brandoz-inline-picker .brandoz-picker-title {
        font-size: 1.45rem;
    }

    .brandoz-inline-picker .brandoz-size-option {
        min-width: 56px;
        padding: 14px 14px;
        font-size: 0.9rem;
    }

}

/* ── Accessibility: skip animation for prefer-reduced-motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .brandoz-popup-overlay,
    .brandoz-popup-inner,
    .brandoz-popup-overlay.brandoz-closing,
    .brandoz-closing .brandoz-popup-inner {
        animation: none;
    }

    #brandoz-floating-btn {
        transition: none;
    }
}