/**
 * Özel Eklenti – Plugin Override CSS
 * Yüksek specificity ile tema CSS çakışmalarını önler.
 * Bu dosya style.css'ten SONRA yüklenir.
 */

/* ── Fix: Theme overflow on html/body breaks position:sticky ─── */
/* ANY overflow value other than 'visible' on ANY ancestor kills  */
/* position:sticky. We must override the theme.                   */
html,
html body {
    overflow-x: visible !important;
    overflow: visible !important;
}

/* Force the Bootstrap row inside the plugin to use flex-start    */
/* so the sidebar column doesn't stretch to full row height.       */
.ozel-plugin-wrapper .row {
    align-items: flex-start !important;
}

/* Sidebar sticky */
.ozel-plugin-wrapper .sidebar-wrapper {
    position: sticky !important;
    top: 160px !important;
    z-index: 1020 !important;
}

/* ── Wrapper ile specificity artırma ──────────────────────────────── */

/* Reset: temanın genel button stillerini sıfırla */
.ozel-plugin-wrapper button {
    all: unset !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* ── Sektor / Resolution butonları ──────────────────────────────── */
.ozel-plugin-wrapper .btn-select {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    height: 59px !important;
    padding: 0 30px !important;
    border-radius: 11px !important;
    font-size: 20px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    position: relative !important;
    outline: none !important;
    box-shadow: none !important;
}

.ozel-plugin-wrapper .btn-select.active {
    background-color: #ff4a00 !important;
    color: #ffffff !important;
}

.ozel-plugin-wrapper .btn-select:hover:not(.active) {
    background-color: #f0f0f0 !important;
}

/* ── Resolution Grid (2K / 4K / Super HD) */
.ozel-plugin-wrapper .resolution-grid .btn-select {
    font-size: 16px !important;
    padding: 0 20px !important;
}

/* ── Renk butonları ──────────────────────────────────────────────── */
.ozel-plugin-wrapper .color-btn {
    width: 160px !important;
    height: 52px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 0 20px !important;
    font-size: 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.ozel-plugin-wrapper .color-btn.active {
    background-color: #ff4a00 !important;
    color: #ffffff !important;
    border-color: #000 !important;
}

/* ── Opslag (grid) butonları ─────────────────────────────────────── */
.ozel-plugin-wrapper .grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Stack vertically for desktop too to ensure single line text */
    max-width: 420px !important; /* Constrained width to avoid overlap with image on the right */
    width: 100% !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .ozel-plugin-wrapper .grid-2x2 {
        max-width: 100% !important;
    }
}

.ozel-plugin-wrapper .grid-btn {
    min-height: 60px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 11px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1.2 !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    white-space: nowrap !important; /* Force text to stay on one line */
}

.ozel-plugin-wrapper .grid-btn.active {
    background-color: #ff4a00 !important;
    color: #ffffff !important;
}

.ozel-plugin-wrapper .grid-btn:hover:not(.active) {
    background-color: #f0f0f0 !important;
}

.ozel-plugin-wrapper .grid-btn span {
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Opslag buttons mobile variant */
@media (max-width: 768px) {
    .ozel-plugin-wrapper .grid-btn {
        font-size: 15px !important; /* Artırıldı (14 -> 15) */
        padding: 0 15px !important;
        min-height: 50px !important;
    }
    .ozel-plugin-wrapper .grid-btn span {
        font-size: 15px !important; /* Artırıldı (14 -> 15) */
    }
}

/* ── Miktar butonları (+ / -) ───────────────────────────────────── */
.ozel-plugin-wrapper .q-btn {
    background: none !important;
    border: none !important;
    color: #ff4a00 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Sidebar butonları ───────────────────────────────────────────── */
.ozel-plugin-wrapper .sidebar-actions {
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-left: 35px !important;
}

.ozel-plugin-wrapper .btn-primary {
    width: 140px !important;
    height: 36px !important;
    background-color: #ff4a00 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.ozel-plugin-wrapper .btn-secondary {
    width: 130px !important;
    height: 36px !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ff4a00 !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* ── Form submit butonu ─────────────────────────────────────────── */
.ozel-plugin-wrapper .btn-submit {
    display: inline-block !important;
    width: 100% !important;
    background-color: #ff4a00 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 11px !important;
    font-size: 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    padding: 6px 30px !important;
    text-align: center !important;
    outline: none !important;
}

.ozel-plugin-wrapper .btn-submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ── Mobile Step 2 butonu ───────────────────────────────────────── */
.ozel-plugin-wrapper .btn-step-2 {
    display: block !important;
    width: 100% !important;
    background-color: #ff4a00 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    padding: 16px 0 !important;
    text-align: center !important;
    outline: none !important;
}

/* ── Temel layout izolasyonu ────────────────────────────────────── */
.ozel-plugin-wrapper .config-box {
    background-color: #161616 !important;
}

/* Tema'nın h1/h2/h3 renklerini sıfırla */
.ozel-plugin-wrapper .box-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    margin-top: 0px;
}

.ozel-plugin-wrapper .box-subtitle {
    color: #ffffff !important;
    font-weight: 300 !important;
}

.ozel-plugin-wrapper .page-title {
    color: #000000 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
}

.ozel-plugin-wrapper .steps-subtitle {
    color: #ff4a00 !important;
}

/* ── Mobilde container-fluid padding sıfırla ─────────────────────── */
@media (max-width: 767.98px) {
    .ozel-plugin-wrapper>.container-fluid {
        padding: 0 !important;
    }
}

/* ── Kameraları mobilde/tablette config-box'ın sağ üstüne yerleştir ── */
@media (max-width: 991.98px) {
    .ozel-plugin-wrapper .config-box {
        position: relative !important;
        /* Ensure parent is positioned */
    }

    .ozel-plugin-wrapper .dome-preview {
        position: absolute !important;
        top: -30px !important;
        right: -13px !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        display: block !important;
        width: 100px !important;
        /* Smaller size on mobile */
        z-index: 10 !important;
    }

    .ozel-plugin-wrapper .dome-preview img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }
}

/* ── Form Inputs Override (Step 2) ───────────────────────────────── */
.ozel-plugin-wrapper .form-field input.form-control,
.ozel-plugin-wrapper .form-field textarea.form-control {
    border: none !important;
    border-bottom: 1.5px solid var(--primary-orange) !important;
    color: #ffffff !important;
    /* typed text */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ozel-plugin-wrapper .form-field input.form-control::placeholder,
.ozel-plugin-wrapper .form-field textarea.form-control::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ozel-plugin-wrapper .baslik1 {
    font-family: Poppins;
    font-size: 50px !important;
    font-weight: 900 !important;
    line-height: 1em !important;
    color: #000000 !important;
}

.turuncu {
    color: #FF4901 !important
}

@media (max-width: 768px) {
    .ozel-plugin-wrapper .baslik1 {
        font-size: 28px !important;
        line-height: 1.1em !important;
    }

    .ozel-plugin-wrapper .box-title {
        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: 900 !important;
    }

    .ozel-plugin-wrapper .sektor-btn-group {
        flex-direction: column !important;
    }

    .ozel-plugin-wrapper .sektor-btn-group .btn-select {
        width: 100% !important;
    }

    /* ── Hide desktop sidebar on mobile ── */
    .ozel-plugin-wrapper .sidebar-wrapper {
        display: none !important;
    }

    /* ── Mobile Sticky Bottom Bar ── */
    .ozel-plugin-wrapper .mobile-sticky-footer-wrapper {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar {
        background-color: #ffffff !important;
        padding: 15px 20px !important;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        z-index: 10 !important;
        /* Above panel */
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .price-summary {
        margin-bottom: 12px !important;
        border-bottom: 1px solid #eee !important;
        padding-bottom: 10px !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .price-label {
        font-family: 'Poppins', sans-serif !important;
        font-size: 14px !important;
        color: #333 !important;
        font-weight: 700 !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .total-price {
        font-family: 'Poppins', sans-serif !important;
        font-size: 20px !important;
    }

    /* Action Buttons in Sticky Bar */
    .ozel-plugin-wrapper .mobile-sticky-bar .action-buttons button {
        height: 44px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .action-buttons .btn-outline {
        background-color: transparent !important;
        border: 1.5px solid #ff4a00 !important;
        color: #ff4a00 !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .action-buttons .btn-outline.active-details {
        background-color: #333 !important;
        border-color: #333 !important;
        color: #fff !important;
    }

    .ozel-plugin-wrapper .mobile-sticky-bar .action-buttons .btn-solid {
        background-color: #ff4a00 !important;
        border: 1.5px solid #ff4a00 !important;
        color: #fff !important;
    }

    /* ── Mobile Details Panel ── */
    .ozel-plugin-wrapper .mobile-details-panel {
        position: absolute !important;
        bottom: 100% !important;
        /* Sits right on top of sticky bar */
        left: 0 !important;
        width: 100% !important;
        background: linear-gradient(180deg, #262626 0%, #000000 100%) !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        transform: translateY(120%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 5 !important;
        max-height: 60vh !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
        padding-bottom: 10px !important;
    }

    .ozel-plugin-wrapper .mobile-details-panel.show-panel {
        transform: translateY(0) !important;
    }

    .ozel-plugin-wrapper .mobile-details-panel .panel-header {
        padding: 20px 20px 15px !important;
        border-bottom: 1px solid rgba(255, 74, 0, 0.4) !important;
    }

    .ozel-plugin-wrapper .mobile-details-panel .btn-close-panel {
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        color: #fff !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
    }

    .ozel-plugin-wrapper .mobile-details-panel .panel-content {
        padding: 0 20px !important;
        overflow-y: auto !important;
        flex-grow: 1 !important;
    }
}