/* =====================================================
   BS MOBIL - Professional Mobile Theme
   White BG, Black Buttons, Gray Boxes, No Borders
   Designed for Mobile WebView
   ===================================================== */

/* -------------------------
   CSS VARIABLES
   ------------------------- */
:root {
    --mobile-white: #ffffff;
    --mobile-gray-50: #fafafa;
    --mobile-gray-100: #f5f5f5;
    --mobile-gray-200: #eeeeee;
    --mobile-gray-300: #e0e0e0;
    --mobile-gray-400: #bdbdbd;
    /* Softer text colors for modern look */
    --mobile-text-dark: #374151;
    /* Soft dark gray instead of pure black */
    --mobile-text-medium:#6b7280 ;
    /* Medium gray for secondary text #6b7280*/
    --mobile-text-light: #9ca3af;
    /* Light gray for hints/captions */
    --mobile-text-muted: #d1d5db;
    /* Very light for disabled states */
    --mobile-btn-black: #1f2937;
    /* Soft black for buttons */
    --mobile-btn-hover: #374151;
    /* Hover state */
    --mobile-accent: #3b82f6;
    /* Blue accent for links if needed */
}

/* -------------------------
   GLOBAL / BODY OVERRIDES
   ------------------------- */
body,
.bg-black,
body.bg-black {
    background: var(--mobile-white) !important;
    background-color: var(--mobile-white) !important;
    color: var(--mobile-text-dark) !important;
}

/* -------------------------
   PAGE WRAPPER - Remove black backgrounds
   ------------------------- */
.page-content-wrapper {
    background: var(--mobile-white) !important;
    background-color: var(--mobile-white) !important;
}

/* -------------------------
   HEADER AREA (Sticky Top Bar)
   ------------------------- */
.header-area,
#headerArea {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important;
}

.header-content {
    background: transparent !important;
    padding: 12px 16px !important;
}

/* Add padding to body to compensate for fixed header */
body {
    padding-top: 60px !important;
}

/* Page content wrapper should not overlap header */
.page-content-wrapper {
    margin-top: 0 !important;
}

/* -------------------------
   OFF-CANVAS MENU - Above Header
   ------------------------- */
.offcanvas,
#affanOffcanvas {
    z-index: 99999 !important;
}

.offcanvas-backdrop {
    z-index: 99998 !important;
}

/* Hide duplicate logo in off-canvas (header already has it) */
.offcanvas .sidenav-wrapper .sidenav-nav .logo-wrapper {
    display: none !important;
}

/* Off-canvas styling */
.offcanvas-start {
    width: 280px !important;
    background: #ffffff !important;
    border-right: none !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
}

/* Logo */
.logo-wrapper img {
    max-height: 40px !important;
    object-fit: contain !important;
}

/* Header Icons */
.header-area .bi-whatsapp {
    color: #25D366 !important;
    font-size: 24px !important;
}

.header-area .bi-person {
    color: var(--mobile-text-medium) !important;
    font-size: 24px !important;
}

/* Hamburger Menu Button */
.navbar--toggler,
#affanNavbarToggler {
    width: 40px !important;
    height: 40px !important;
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.navbar--toggler:active {
    background: var(--mobile-gray-200) !important;
    transform: scale(0.95) !important;
}

.navbar--toggler span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--mobile-text-dark) !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}

.navbar--toggler:active {
    background: var(--mobile-gray-100) !important;
    transform: scale(0.95) !important;
}

.navbar--toggler span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #1f2937 !important;
    /* Darker lines */
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}

/* -------------------------
   SIDEBAR / OFFCANVAS MENU
   ------------------------- */
.offcanvas,
.offcanvas-start,
#affanOffcanvas {
    background: var(--mobile-white) !important;
    background-color: var(--mobile-white) !important;
    border-right: none !important;
}

.offcanvas-body {
    border-right: none !important;
    border: none !important;
}

.sidenav-wrapper {
    background: var(--mobile-white) !important;
}

.sidenav-nav {
    background: var(--mobile-white) !important;
}

.sidenav-nav li a,
.sidenav-nav li a.text-white {
    color: var(--mobile-text-dark) !important;
    background: transparent !important;
    border: none !important;
    padding: 12px 16px !important;
    transition: background 0.2s ease !important;
}

.sidenav-nav li a:hover {
    background: var(--mobile-gray-100) !important;
}

.sidenav-nav i {
    color: var(--mobile-text-medium) !important;
}

.sidenav-profile {
    background: var(--mobile-gray-100) !important;
}

/* Navbar Toggler Button */
.navbar--toggler,
#affanNavbarToggler {
    background: var(--mobile-gray-200) !important;
    border: none !important;
    border-radius: 6px !important;
}

.navbar--toggler span {
    background: var(--mobile-text-dark) !important;
}

/* Close button - make visible on white bg */
.btn-close-white {
    filter: invert(1) !important;
}

/* -------------------------
   FOOTER TAB BAR (iOS/Android Style)
   ------------------------- */
.footer-nav-area,
#footerNav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.05) !important;
}

.footer-nav {
    background: transparent !important;
    padding: 8px 0 !important;
}

.footer-nav ul {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.footer-nav ul li {
    flex: 1 !important;
    text-align: center !important;
}

.footer-nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    text-decoration: none !important;
    color: var(--mobile-text-medium) !important;
    transition: all 0.2s ease !important;
    border-radius: 10px !important;
}

.footer-nav ul li a:active {
    background: var(--mobile-gray-100) !important;
    transform: scale(0.95) !important;
}

.footer-nav ul li a i,
.footer-nav ul li a svg,
.footer-nav ul li a [class^="bi-"] {
    font-size: 22px !important;
    margin-bottom: 4px !important;
    color: var(--mobile-text-medium) !important;
}

.footer-nav ul li a span {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--mobile-text-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Add bottom padding to page for fixed footer */
.page-content-wrapper {
    padding-bottom: 80px !important;
}

/* -------------------------
   OFFCANVAS DRAWER MENU (Native Style)
   ------------------------- */
.offcanvas,
.offcanvas-start,
#affanOffcanvas {
    width: 85% !important;
    max-width: 320px !important;
    background: var(--mobile-white) !important;
    border-right: none !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.1) !important;
}

.offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

.offcanvas-body {
    padding: 0 !important;
    background: var(--mobile-white) !important;
}

/* Close Button */
.offcanvas .btn-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    background-color: var(--mobile-gray-100) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50% !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.offcanvas .btn-close:hover,
.offcanvas .btn-close:active {
    background-color: var(--mobile-gray-200) !important;
    transform: scale(0.95) !important;
}

/* Sidenav Logo Area */
.sidenav-wrapper {
    background: var(--mobile-white) !important;
    padding-top: 60px !important;
    /* Space for close button */
}

.sidenav-wrapper>a:first-of-type {
    display: block !important;
    padding: 16px 24px !important;
    text-align: center !important;
}

.sidenav-wrapper>a:first-of-type img,
.sidenav-wrapper a img.img-fluid {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Sidenav Navigation List */
.sidenav-nav {
    list-style: none !important;
    padding: 12px !important;
    margin: 0 !important;
    margin-top: 8px !important;
}

.sidenav-nav li {
    margin-bottom: 4px !important;
}

.sidenav-nav li a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    color: var(--mobile-text-dark) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
}

.sidenav-nav li a:hover,
.sidenav-nav li a:active {
    background: var(--mobile-gray-100) !important;
}

.sidenav-nav li a i,
.sidenav-nav li a [class^="bi-"] {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    font-size: 18px !important;
    color: var(--mobile-text-medium) !important;
}

/* Override text-white in sidenav */
.sidenav-nav li a.text-white {
    color: var(--mobile-text-dark) !important;
}

/* Action Buttons in Sidenav */
.sidenav-nav li a.btn {
    justify-content: center !important;
    margin: 4px 0 !important;
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
}

.sidenav-nav li a.btn i {
    color: var(--mobile-white) !important;
    margin-right: 8px !important;
}

.sidenav-nav li a.btn-success {
    background: var(--mobile-gray-200) !important;
    color: var(--mobile-text-dark) !important;
}

.sidenav-nav li a.btn-success i {
    color: var(--mobile-text-dark) !important;
}

/* Copyright Info */
.copyright-info {
    padding: 24px !important;
    text-align: center !important;
    border-top: 1px solid var(--mobile-gray-200) !important;
    margin-top: 20px !important;
}

.copyright-info p {
    color: var(--mobile-text-light) !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* -------------------------
   BUTTONS - Black Style
   ------------------------- */
.btn,
.btn-primary,
.btn-success,
.btn-info,
.btn-secondary,
.btn-dark {
    background-color: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-dark:hover {
    background-color: var(--mobile-btn-hover) !important;
    color: var(--mobile-white) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.btn-danger {
    background-color: #c62828 !important;
}

.btn-warning {
    background-color: #f9a825 !important;
    color: var(--mobile-text-dark) !important;
}

.btn-light {
    background-color: var(--mobile-gray-200) !important;
    color: var(--mobile-text-dark) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    background: transparent !important;
    border: 1px solid var(--mobile-gray-300) !important;
    color: var(--mobile-text-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border-color: var(--mobile-btn-black) !important;
}

/* -------------------------
   CARDS & BOXES - Gray Backgrounds
   ------------------------- */
.card {
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.card-body {
    padding: 16px !important;
}

.card-header {
    background: var(--mobile-gray-200) !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.single-feature-card,
.product-card,
.feature-card {
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 12px !important;
}

/* -------------------------
   FORMS - Clean Style
   ------------------------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: var(--mobile-text-dark) !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    background: var(--mobile-gray-200) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder {
    color: var(--mobile-text-light) !important;
}

.input-group-text {
    background: var(--mobile-gray-200) !important;
    border: none !important;
    color: var(--mobile-text-medium) !important;
}

label {
    color: var(--mobile-text-medium) !important;
    font-weight: 500 !important;
}

/* -------------------------
   TEXT COLORS OVERRIDE
   ------------------------- */
.text-white {
    color: var(--mobile-text-dark) !important;
}

.text-dark {
    color: var(--mobile-text-dark) !important;
}

/* -------------------------
   ALERTS - Soft Colors
   ------------------------- */
.alert {
    border: none !important;
    border-radius: 8px !important;
}

.alert-primary,
.alert-info {
    background: #e3f2fd !important;
    color: #1565c0 !important;
}

.alert-success {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.alert-danger {
    background: #ffebee !important;
    color: #c62828 !important;
}

.alert-warning {
    background: #fff8e1 !important;
    color: #f57f17 !important;
}

/* -------------------------
   MODAL
   ------------------------- */
.modal-content {
    background: var(--mobile-white) !important;
    border: none !important;
    border-radius: 12px !important;
}

.modal-header,
.modal-footer {
    border: none !important;
    background: var(--mobile-gray-100) !important;
}

/* -------------------------
   DROPDOWNS
   ------------------------- */
.dropdown-menu {
    background: var(--mobile-white) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}

.dropdown-item {
    color: var(--mobile-text-medium) !important;
}

.dropdown-item:hover {
    background: var(--mobile-gray-100) !important;
    color: var(--mobile-text-dark) !important;
}

/* -------------------------
   REMOVE ALL BORDERS
   ------------------------- */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-start,
.border-end {
    border-color: var(--mobile-gray-200) !important;
}

hr {
    border-color: var(--mobile-gray-200) !important;
}

/* -------------------------
   RESPONSIVE - Full Width Mobile
   ------------------------- */
@media (max-width: 768px) {

    /* Remove side padding gaps */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Full width cards */
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Comfortable touch targets */
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }

    /* Header spacing */
    .header-area {
        padding: 10px 12px !important;
    }

    /* Footer spacing */
    .footer-nav {
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {

    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-body {
        padding: 12px !important;
    }
}

/* -------------------------
   WHATSAPP ICON - Keep Green
   ------------------------- */
.bi-whatsapp {
    color: rgb(14, 221, 31) !important;
}

/* -------------------------
   PRELOADER - White BG
   ------------------------- */
#preloader {
    background: var(--mobile-white) !important;
}

/* -------------------------
   SCROLLBAR - Subtle Style
   ------------------------- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--mobile-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--mobile-gray-300);
    border-radius: 4px;
}

/* -------------------------
   ICONS IN MENU - Dark Color
   ------------------------- */
.sidenav-nav .bi,
.sidenav-nav [class^="bi-"] {
    color: var(--mobile-text-medium) !important;
}

/* -------------------------
   COPYRIGHT/INFO SECTIONS
   ------------------------- */
.copyright-info {
    background: var(--mobile-white) !important;
    color: var(--mobile-text-light) !important;
}

.copyright-info p,
.copyright-info a {
    color: var(--mobile-text-light) !important;
}

/* -------------------------
   SOCIAL INFO
   ------------------------- */
.social-info-wrap {
    background: transparent !important;
}

.social-info-wrap a {
    color: var(--mobile-text-medium) !important;
}

/* =====================================================
   AGGRESSIVE INLINE STYLE OVERRIDES
   These rules override inline style="..." attributes
   ===================================================== */

/* Override ALL inline background-color: #ff0000 */
[style*="background-color: #ff0000"],
[style*="background-color:#ff0000"],
[style*="background-color: rgb(255"],
[style*="background-color:rgb(255"] {
    background-color: var(--mobile-btn-black) !important;
}

/* Override ALL inline border-color: #ff0000 */
[style*="border-color: #ff0000"],
[style*="border-color:#ff0000"],
.border[style*="#ff0000"],
.border-3[style*="#ff0000"],
div[style*="border-color: #ff0000"] {
    border-color: var(--mobile-gray-300) !important;
}

/* Force btn-danger to black */
.btn-danger,
.btn-danger[style],
.btn.btn-danger,
a.btn-danger,
h6.btn-danger {
    background-color: var(--mobile-btn-black) !important;
    border-color: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border-radius: 8px !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--mobile-btn-hover) !important;
    border-color: var(--mobile-btn-hover) !important;
}

/* Force btn-success to black */
.btn-success,
.btn-success[style],
.btn.btn-success,
a.btn-success {
    background-color: var(--mobile-btn-black) !important;
    border-color: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
}

/* Override text-light to dark on white bg */
.text-light,
h6.text-light,
span.text-light,
.text-light.text-center {
    color: var(--mobile-white) !important;
}

/* Page title buttons - make them section headers */
h6.btn,
h6.btn-danger,
h6.btn.btn-danger {
    background-color: var(--mobile-gray-200) !important;
    color: var(--mobile-text-dark) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* -------------------------
   PRODUCT CARDS & BOXES
   ------------------------- */
.border.border-3,
.border.border-3.rounded-2,
div.border.border-3 {
    border: none !important;
    border-color: transparent !important;
    background: var(--mobile-gray-100) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Product detail buttons */
.btn.btn-danger.btn-block,
.btn-danger.btn-block {
    width: 100% !important;
    display: block !important;
}

/* -------------------------
   LOGIN / FORM PAGES
   ------------------------- */
#btnLogin,
#btnRegister,
button[id="btnLogin"],
button[id="btnRegister"] {
    background-color: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border: none !important;
    border-radius: 8px !important;
}

/* Dark input fields override */
input[style*="background-color:#1c1c1e"],
input[style*="background-color: #1c1c1e"] {
    background-color: var(--mobile-gray-100) !important;
    color: var(--mobile-text-dark) !important;
    border: none !important;
}

/* -------------------------
   CATALOG & PRODUCT PAGES
   ------------------------- */
.card-img-top,
.product-image {
    border-radius: 12px 12px 0 0 !important;
}

/* Product action buttons */
a.btn[style*="#ff0000"],
button[style*="#ff0000"] {
    background-color: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
}

/* -------------------------
   REMOVE ALL RED ACCENTS
   ------------------------- */
/* Any element with red color */
[style*="color: #ff0000"],
[style*="color:#ff0000"],
[style*="color: red"],
[style*="color:red"] {
    color: var(--mobile-text-dark) !important;
}

/* Remove any remaining red borders */
*[style*="border"][style*="ff0000"],
*[style*="border"][style*="red"] {
    border-color: var(--mobile-gray-300) !important;
}

/* -------------------------
   RESPONSIVE REFINEMENTS
   ------------------------- */
@media (max-width: 768px) {

    /* Section headers */
    h6.btn {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Full width product cards */
    .border.border-3.rounded-2 {
        margin-bottom: 16px !important;
    }

    /* Touch-friendly buttons */
    .btn-danger,
    .btn-success,
    .btn-primary {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* -------------------------
   GLOBAL SOFT SHADOW
   ------------------------- */
.card,
.border.border-3.rounded-2,
.modal-content {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* -------------------------
   ICON COLORS
   ------------------------- */
.bi-person,
.bi-box-arrow-left,
.bi-house-door,
.bi-heart,
.bi-filetype-pdf,
[class^="bi-"] {
    color: var(--mobile-text-medium) !important;
}

/* Keep whatsapp green */
.bi-whatsapp,
i.bi-whatsapp {
    color: #25D366 !important;
}

/* -------------------------
   PRODUCT CARD CLASS
   ------------------------- */
.product-card {
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease !important;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.product-card img {
    border-radius: 8px !important;
}

.product-card p {
    color: var(--mobile-text-dark) !important;
    font-weight: 500 !important;
}

/* =========================================
   LOGIN & REGISTER FORMS (Modern Mobile App)
   ========================================= */
.login-wrapper {
    background: var(--mobile-white) !important;
    min-height: auto !important;
    padding: 32px 20px !important;
}

.login-wrapper:not(:first-of-type) {
    border-top: 8px solid var(--mobile-gray-100) !important;
    margin-top: 0 !important;
}

.login-wrapper .custom-container {
    background: transparent !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* Login Header/Title */
.login-wrapper .text-center.px-4 {
    margin-bottom: 24px !important;
}

.login-wrapper .bi-person-circle {
    font-size: 64px !important;
    color: var(--mobile-btn-black) !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.login-wrapper .text-center.px-4.text-dark,
.login-wrapper .text-center.px-4 .text-dark {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-dark) !important;
    letter-spacing: -0.02em !important;
}

/* Form Container */
.register-form {
    margin-top: 20px !important;
}

/* Input Fields - Modern Style */
.register-form .form-control,
.login-wrapper .form-control,
.login-wrapper input.form-control {
    background: var(--mobile-gray-100) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    font-size: 16px !important;
    color: var(--mobile-text-dark) !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
}

.register-form .form-control:focus,
.login-wrapper .form-control:focus {
    background: var(--mobile-gray-200) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1) !important;
}

.register-form .form-control::placeholder,
.login-wrapper .form-control::placeholder {
    color: var(--mobile-text-light) !important;
    font-weight: 400 !important;
}

/* Login/Register Buttons */
.login-wrapper .btn,
.login-wrapper .btn-dark,
#btnLogin,
#btnRegister {
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.15) !important;
}

.login-wrapper .btn:hover,
.login-wrapper .btn:active,
#btnLogin:active,
#btnRegister:active {
    background: var(--mobile-btn-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(31, 41, 55, 0.2) !important;
}

.login-wrapper .btn:active {
    transform: scale(0.98) translateY(0) !important;
}

/* Success/Error Messages */
.login-wrapper .successmsg,
.login-wrapper .successmsg1 {
    background: #ecfdf5 !important;
    color: #059669 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.login-wrapper .errormsg,
.login-wrapper .errormsg1 {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

/* Form Group */
.login-wrapper .form-group {
    margin-bottom: 0 !important;
}

/* -------------------------
   SECTION HEADERS
   ------------------------- */
section h6.text-dark.fw-bold,
section h6.fw-bold {
    color: var(--mobile-text-dark) !important;
    font-weight: 600 !important;
}

/* =====================================================
   PREMIUM MOBILE APP ENHANCEMENTS
   ===================================================== */

/* -------------------------
   TYPOGRAPHY IMPROVEMENTS
   ------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mobile-text-dark) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

p,
span,
li,
a {
    color: var(--mobile-text-medium) !important;
}

/* -------------------------
   LIST GROUPS (Profile Page)
   ------------------------- */
.list-group {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.list-group-item {
    background: var(--mobile-gray-50) !important;
    border: none !important;
    border-bottom: 1px solid var(--mobile-gray-200) !important;
    color: var(--mobile-text-dark) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
}

.list-group-item:last-child {
    border-bottom: none !important;
}

/* -------------------------
   ENHANCED CARDS
   ------------------------- */
.card {
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:active {
    transform: scale(0.98) !important;
}

.card-title {
    color: var(--mobile-text-dark) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.card-subtitle {
    color: var(--mobile-text-light) !important;
    font-size: 13px !important;
}

.card-text {
    color: var(--mobile-text-medium) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* -------------------------
   BUTTONS - Premium Style
   ------------------------- */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
    transition: all 0.15s ease !important;
}

.btn:active {
    transform: scale(0.97) !important;
}

.btn-sm {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* Status badges */
.btn-success.btn-sm,
.btn-warning.btn-sm {
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* -------------------------
   SLIDE / HERO SECTION
   ------------------------- */
.single-hero-slide {
    border-radius: 0 !important;
}

.single-hero-slide h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.single-hero-slide p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.btn-creative,
.btn-warning {
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}

/* -------------------------
   CATEGORY IMAGES
   ------------------------- */
.container-fluid .img-fluid {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.container-fluid .img-fluid:active {
    transform: scale(0.98) !important;
}

/* -------------------------
   SPACING & PADDING
   ------------------------- */
.pt-3 {
    padding-top: 16px !important;
}

.pb-3 {
    padding-bottom: 16px !important;
}

.mb-2 {
    margin-bottom: 12px !important;
}

.mb-3 {
    margin-bottom: 16px !important;
}

/* -------------------------
   SAFE AREA (iOS notch)
   ------------------------- */
@supports (padding: max(0px)) {
    .page-content-wrapper {
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }

    .footer-nav-area {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
}

/* -------------------------
   TOUCH IMPROVEMENTS
   ------------------------- */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

a,
button,
.btn {
    touch-action: manipulation !important;
}

/* -------------------------
   HR DIVIDERS
   ------------------------- */
hr {
    border: none !important;
    height: 1px !important;
    background: var(--mobile-gray-200) !important;
    margin: 20px 0 !important;
}

/* -------------------------
   PLACEHOLDER STYLING
   ------------------------- */
::placeholder {
    color: var(--mobile-text-light) !important;
    opacity: 1 !important;
}

/* =====================================================
   HIDE EMPTY SUCCESS/ERROR MESSAGES
   ===================================================== */
.successmsg:empty,
.successmsg1:empty,
.errormsg:empty,
.errormsg1:empty,
.registersuccessmsg:empty,
.registererrormsg:empty,
p.successmsg:empty,
p.successmsg1:empty,
p.errormsg:empty,
p.errormsg1:empty {
    display: none !important;
}

/* =====================================================
   OFFCANVAS USER PROFILE SECTION
   ===================================================== */
/* User Profile Button Container */
.sidenav-nav li.user-profile-btn,
.sidenav-nav li.user-logout-btn {
    margin-top: 16px !important;
    padding: 0 4px !important;
}

.sidenav-nav li.user-profile-btn:first-of-type {
    margin-top: 24px !important;
    border-top: 1px solid var(--mobile-gray-200) !important;
    padding-top: 20px !important;
}

/* Profile Button */
.sidenav-nav li a.btn.btn-dark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    gap: 8px !important;
}

.sidenav-nav li a.btn.btn-dark i {
    font-size: 16px !important;
    color: var(--mobile-white) !important;
}

.sidenav-nav li a.btn.btn-dark span {
    color: var(--mobile-white) !important;
}

/* Logout Button (Outline Style) */
.sidenav-nav li a.btn.btn-outline-dark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--mobile-text-dark) !important;
    border: 1px solid var(--mobile-gray-300) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    gap: 8px !important;
}

.sidenav-nav li a.btn.btn-outline-dark i {
    font-size: 16px !important;
    color: var(--mobile-text-medium) !important;
}

.sidenav-nav li a.btn.btn-outline-dark span {
    color: var(--mobile-text-dark) !important;
}

.sidenav-nav li a.btn.btn-outline-dark:active {
    background: var(--mobile-gray-100) !important;
}

/* Legacy btn-success override */
.sidenav-nav li a.btn.btn-success {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mobile-gray-100) !important;
    color: var(--mobile-text-dark) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    gap: 8px !important;
}

.sidenav-nav li a.btn.btn-success i {
    font-size: 16px !important;
    color: var(--mobile-text-dark) !important;
}

/* Form Label Styling */
.form-label {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mobile-text-medium) !important;
    margin-bottom: 8px !important;
}

/* Remove br before user buttons */
.sidenav-nav br {
    display: none !important;
}

/* =====================================================
   TALEP FORMU (REQUEST FORM) - Modern Style
   ===================================================== */
#talepform {
    background: var(--mobile-white) !important;
    padding: 24px 0 !important;
}

#talepform h6 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-dark) !important;
    margin-bottom: 20px !important;
}

#talepform .form-group,
#TalepForm .form-group {
    margin-bottom: 16px !important;
    text-align: left !important;
}

#talepform label,
#TalepForm label,
#talepform .badge,
#TalepForm .badge {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mobile-text-medium) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
}

/* Override inline styles on select */
#talepform select,
#TalepForm select,
#talepform select.form-control,
#TalepForm select.form-control,
select[name="Features"] {
    background-color: var(--mobile-gray-100) !important;
    color: var(--mobile-text-dark) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    cursor: pointer !important;
}

#talepform select:focus,
#TalepForm select:focus {
    background-color: var(--mobile-gray-200) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1) !important;
}

/* Override inline styles on input */
#talepform input,
#TalepForm input,
#talepform input.form-control,
#TalepForm input.form-control,
input[name="SiparisAdedi"] {
    background-color: var(--mobile-gray-100) !important;
    color: var(--mobile-text-dark) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
}

#talepform input:focus,
#TalepForm input:focus {
    background-color: var(--mobile-gray-200) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1) !important;
}

/* Submit button */
#talepform button[type="submit"],
#TalepForm button[type="submit"],
#talepform .btn-success,
#TalepForm .btn-success {
    background: var(--mobile-btn-black) !important;
    color: var(--mobile-white) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.15) !important;
    transition: all 0.2s ease !important;
}

#talepform button[type="submit"]:active,
#TalepForm button[type="submit"]:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.2) !important;
}

#talepform center,
#TalepForm center {
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px !important;
}

/* =====================================================
   COMPREHENSIVE LAYOUT FIXES
   ===================================================== */

/* -------------------------
   CONSISTENT PAGE PADDING (Mobile App Style)
   ------------------------- */
.page-content-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
}

.container,
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Homepage slider - remove gaps */
.tiny-slider-one-wrapper {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* -------------------------
   PRODUCT CARDS - Equal Heights & Truncation
   ------------------------- */
/* Card container row */
.container .row,
.container-fluid .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Equal height columns */
.col-6.mb-2,
.col-6.mb-3 {
    display: flex !important;
    flex-direction: column !important;
}

/* Product card equal height */
.product-card,
.rounded-2.product-card,
.col-6 .rounded-2,
.col-6>div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

/* Product name truncation */
.product-card p,
.col-6 p,
.rounded-2 p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 40px !important;
    max-height: 44px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    padding: 0 4px !important;
}

/* Push button to bottom */
.product-card .d-grid,
.col-6 .d-grid {
    margin-top: auto !important;
}

/* -------------------------
   DROPDOWN SELECT - Better Text Visibility
   ------------------------- */
#talepform select,
#TalepForm select,
select.form-control,
select[name="Features"] {
    background-color: var(--mobile-white) !important;
    color: var(--mobile-text-dark) !important;
    border: 1px solid var(--mobile-gray-300) !important;
    border-radius: 10px !important;
    padding: 14px 40px 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}

#talepform select option,
#TalepForm select option,
select.form-control option {
    background: var(--mobile-white) !important;
    color: var(--mobile-text-dark) !important;
    padding: 12px !important;
}

/* -------------------------
   INNER PAGES - Remove Dark Backgrounds
   ------------------------- */
/* Section and container overrides */
section,
section[id],
.pt-3,
.pb-3,
.pt-5,
.pb-5,
.mt-3,
.mb-3 {
    background-color: var(--mobile-white) !important;
}

/* Kurumsal pages */
.yaziblog,
.yaziblog>* {
    color: var(--mobile-text-dark) !important;
}

/* -------------------------
   HEADER - Remove Gaps
   ------------------------- */
.header-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* -------------------------
   CATEGORY PAGE HEADER BUTTON
   ------------------------- */
h6.btn.btn-dark,
.d-grid h6.btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* -------------------------
   IMAGES - Consistent Sizing
   ------------------------- */
.product-card img,
.col-6 img,
.rounded-2 img {
    width: 100% !important;
    height: 120px !important;
    object-fit: contain !important;
    background: var(--mobile-gray-50) !important;
    border-radius: 8px !important;
}

/* -------------------------
   CATEGORY IMAGES ON HOMEPAGE
   ------------------------- */
.container-fluid .col-12.text-center img {
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
    border-radius: 12px !important;
}

/* -------------------------
   REMOVE EXTRA MARGINS
   ------------------------- */
.mb-2 {
    margin-bottom: 8px !important;
}

.mb-3 {
    margin-bottom: 12px !important;
}

/* -------------------------
   SLIDE TEXT COLORS (White on dark bg)
   ------------------------- */
.single-hero-slide h3,
.single-hero-slide .text-white {
    color: #ffffff !important;
}

.single-hero-slide p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* =====================================================
   FINAL FIXES - DROPDOWN TEXT & PAGE SPACING
   ===================================================== */

/* -------------------------
   FIX: Rainbow/Gradient Text on Selects
   ------------------------- */
select,
select.form-control,
select[name="Features"],
#talepform select,
#TalepForm select,
.form-control {
    -webkit-text-fill-color: var(--mobile-text-dark) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--mobile-text-dark) !important;
}

select option {
    -webkit-text-fill-color: var(--mobile-text-dark) !important;
    color: var(--mobile-text-dark) !important;
    background: var(--mobile-white) !important;
}

/* -------------------------
   FIX: Inner Page Top Spacing
   ------------------------- */
.page-content-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Category header button gap fix */
.d-grid.gap-2.d-md-block {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
}

.d-grid.gap-2.d-md-block.mb-3 {
    margin-top: 8px !important;
}

/* =====================================================
   MODERN MOBILE APP PAGE HEADERS - Chip/Pill Style
   Compact centered dark pill with white text
   ===================================================== */

/* Section Title - Chip Style */
h6.btn.btn-dark,
h6.btn.btn-dark.btn-block,
.d-grid h6.btn,
h6.text-dark.btn,
.section-title-mobile {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    margin: 16px auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    width: auto !important;
    max-width: fit-content !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.25) !important;
    line-height: 1.4 !important;
}

/* Container centering */
.d-grid.gap-2.d-md-block,
.d-grid.gap-2.d-md-block.mb-3 {
    text-align: center !important;
    padding: 8px 16px !important;
    margin-bottom: 8px !important;
}

/* Page content wrapper */
.page-content-wrapper>.d-grid:first-child {
    padding-top: 8px !important;
}

/* Override any alternative styles */
h6.btn.btn-dark.text-dark,
.d-grid.gap-2 h6 {
    background: #1f2937 !important;
    color: #ffffff !important;
    border-radius: 25px !important;
}

/* =====================================================
   FIX: Dark Footer/Bottom Areas
   ===================================================== */
/* Remove any dark backgrounds from page bottom */
.pb-3,
.pb-5,
div[style*="background-color: black"],
div[style*="background-color: rgb(0"],
div[style*="background:#000"],
.footer-nav-area+*,
#footerNav+* {
    background-color: var(--mobile-white) !important;
}

/* Ensure footer stays white */
.footer-nav,
.footer-nav-area,
#footerNav {
    background: rgba(255, 255, 255, 0.98) !important;
}

/* Fix any remaining black areas */
.container-fluid[style*="black"],
.container[style*="black"],
div.pt-3[style*="black"],
section[style*="black"] {
    background-color: var(--mobile-white) !important;
}

/* =====================================================
   GENERAL CLEANUP
   ===================================================== */
/* Ensure all main content areas are white */
main,
article,
.main-content,
.content-wrapper,
div[class*="content"] {
    background-color: var(--mobile-white) !important;
}

/* Remove any dark overlays */
.bg-overlay::before,
.bg-overlay::after {
    display: none !important;
}

/* But keep hero slide overlay for readability */
.single-hero-slide.bg-overlay::before {
    display: block !important;
}

/* =====================================================
   CONTACT PAGE STYLING
   ===================================================== */
.contact-page {
    padding: 0 16px 24px 16px !important;
    background: var(--mobile-white) !important;
}

/* Map Container */
.contact-page .map-container {
    margin: 0 -16px 24px -16px !important;
    border-radius: 0 0 20px 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.contact-page .map-container iframe {
    width: 100% !important;
    height: 200px !important;
    border: none !important;
}

/* Contact Header */
.contact-page .contact-header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.contact-page .contact-icon-circle {
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
    box-shadow: 0 4px 20px rgba(31, 41, 55, 0.25) !important;
}

.contact-page .contact-icon-circle i {
    font-size: 28px !important;
    color: #fff !important;
}

.contact-page .contact-header h5 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mobile-text-dark) !important;
    margin-bottom: 4px !important;
}

.contact-page .contact-header p {
    font-size: 14px !important;
    color: var(--mobile-text-light) !important;
    margin-bottom: 0 !important;
}

/* Contact Cards */
.contact-page .contact-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.contact-page .contact-card {
    display: flex !important;
    align-items: center !important;
    background: var(--mobile-white) !important;
    border: 1px solid var(--mobile-gray-200) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.contact-page .contact-card:active {
    transform: scale(0.98) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Card Icons */
.contact-page .contact-card-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}

.contact-page .contact-card-icon.phone {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.contact-page .contact-card-icon.email {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.contact-page .contact-card-icon.address {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.contact-page .contact-card-icon i {
    font-size: 20px !important;
    color: #fff !important;
}

/* Card Content */
.contact-page .contact-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.contact-page .contact-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--mobile-text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.contact-page .contact-value {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--mobile-text-dark) !important;
}

.contact-page .contact-value-secondary {
    font-size: 13px !important;
    color: var(--mobile-text-light) !important;
    margin-top: 2px !important;
}

.contact-page .contact-value.address-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* Card Arrow */
.contact-page .contact-card-arrow {
    color: var(--mobile-gray-400) !important;
    margin-left: 8px !important;
}

.contact-page .contact-card-arrow i {
    font-size: 16px !important;
}

/* Quick Action Buttons */
.contact-page .quick-actions {
    display: flex !important;
    gap: 12px !important;
}

.contact-page .quick-action-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.contact-page .quick-action-btn.primary {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    color: #fff !important;
}

.contact-page .quick-action-btn.whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: #fff !important;
}

.contact-page .quick-action-btn:active {
    transform: scale(0.97) !important;
}

.contact-page .quick-action-btn i {
    font-size: 18px !important;
    color: #fff !important;
}

.contact-page .quick-action-btn span {
    color: #fff !important;
}

/* =====================================================
   CONTENT/STATIC PAGES STYLING (Privacy Policy, etc.)
   ===================================================== */
.content-page {
    padding: 0 16px 24px 16px !important;
    background: var(--mobile-white) !important;
    min-height: 100vh !important;
}

/* Content Page Header - Chip Style */
.content-page-header {
    text-align: center !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
}

.content-page-title {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    margin: 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.25) !important;
    line-height: 1.4 !important;
}

/* Hide the old accent - not needed with new style */
.content-title-accent {
    display: none !important;
}

/* Content Page Image */
.content-page-image {
    margin: 0 -16px 20px -16px !important;
    border-radius: 0 0 20px 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.content-page-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Content Page Card */
.content-page-card {
    background: var(--mobile-white) !important;
    border: 1px solid var(--mobile-gray-200) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.content-page-body {
    padding: 20px !important;
    color: var(--mobile-text-dark) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Typography within content */
.content-page-body h1,
.content-page-body h2,
.content-page-body h3,
.content-page-body h4,
.content-page-body h5,
.content-page-body h6 {
    color: var(--mobile-text-dark) !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

.content-page-body h1:first-child,
.content-page-body h2:first-child {
    margin-top: 0 !important;
}

.content-page-body h2 {
    font-size: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--mobile-gray-200) !important;
}

.content-page-body h3 {
    font-size: 16px !important;
}

.content-page-body p {
    color: #374151 !important;
    margin-bottom: 16px !important;
    text-align: justify !important;
}

.content-page-body ul,
.content-page-body ol {
    padding-left: 20px !important;
    margin-bottom: 16px !important;
}

.content-page-body li {
    color: #374151 !important;
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

.content-page-body a {
    color: #667eea !important;
    text-decoration: underline !important;
}

.content-page-body strong,
.content-page-body b {
    color: var(--mobile-text-dark) !important;
    font-weight: 700 !important;
}

/* Styled blockquotes for important notes */
.content-page-body blockquote {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-left: 4px solid #667eea !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
    font-style: italic !important;
}

/* Tables in content */
.content-page-body table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.content-page-body th,
.content-page-body td {
    padding: 12px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--mobile-gray-200) !important;
}

.content-page-body th {
    background: var(--mobile-gray-100) !important;
    font-weight: 600 !important;
    color: var(--mobile-text-dark) !important;
}

/* Fix for any inline dark colors in content */
.content-page-body *[style*="background"] {
    background: transparent !important;
}

.content-page-body span,
.content-page-body div,
.content-page-body font {
    color: inherit !important;
}

/* =====================================================
   PRODUCT DETAIL PAGE - Section Styling
   ===================================================== */
/* Product Description & Technical Specs - Soft Gray Background */
#urunaciklama,
#ozellikler,
#talepform {
    background: #f8f9fa !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    margin: 16px 0 !important;
    border: 1px solid #e9ecef !important;
}

/* Override inline white color */
#urunaciklama,
#urunaciklama *,
#ozellikler *,
#talepform * {
    color: #374151 !important;
}

/* Section titles */
#urunaciklama h6,
#ozellikler h6,
#talepform h6 {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

/* Form styling in product page */
#talepform .form-control,
#talepform select {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #374151 !important;
}

#talepform .form-label {
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

/* Product action buttons */
.container .btn.btn-dark:not(h6) {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* =====================================================
   LOGIN / REGISTER PAGE STYLING - Premium Mobile Design
   ===================================================== */

/* Login wrapper container */
.login-wrapper {
    background: #ffffff !important;
    padding: 32px 20px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.login-wrapper .custom-container {
    max-width: 360px !important;
    margin: 0 auto !important;
}

/* User icon circle - Gradient style */
.login-wrapper .bi-person-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 50% !important;
    margin: 0 auto 16px auto !important;
    font-size: 32px !important;
    color: #ffffff !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
}

/* Section titles */
.login-wrapper .text-center.px-4.text-dark,
.login-wrapper .text-center.px-4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

/* Form container */
.login-wrapper .register-form {
    margin-top: 24px !important;
}

/* Input fields - Modern floating label style */
.login-wrapper .form-control {
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Register form - 2 column grid layout */
.login-wrapper[style*="border-top"] .form-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

.login-wrapper[style*="border-top"] .form-control {
    margin-bottom: 0 !important;
}

/* Email and password should span full width */
.login-wrapper[style*="border-top"] .form-control[type="email"],
.login-wrapper[style*="border-top"] .form-control[type="password"] {
    grid-column: span 2 !important;
}

.login-wrapper .form-control:focus {
    background: #ffffff !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    outline: none !important;
}

.login-wrapper .form-control::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Required field indicator - Removed, handled via HTML now */
.login-wrapper .form-control[required] {
    position: relative !important;
}

/* Hide CSS-based required message - now handled in HTML with translation */
.login-wrapper .form-group::before {
    display: none !important;
}

/* Only show once per form */
.login-wrapper .form-group~.form-group::before,
.login-wrapper .register-form .form-group:not(:first-child)::before {
    display: none !important;
}

/* Submit buttons */
.login-wrapper .btn.btn-dark {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 16px rgba(31, 41, 55, 0.25) !important;
    transition: all 0.2s ease !important;
    margin-top: 8px !important;
}

.login-wrapper .btn.btn-dark:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.2) !important;
}

/* Success/Error messages */
.login-wrapper .successmsg,
.login-wrapper .successmsg1 {
    background: #ecfdf5 !important;
    color: #059669 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}

.login-wrapper .errormsg,
.login-wrapper .errormsg1 {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
}

/* Divider between login and register */
.login-wrapper[style*="border-top"] {
    border-top: none !important;
    position: relative !important;
    padding-top: 48px !important;
}

.login-wrapper[style*="border-top"]::before {
    content: 'veya' !important;
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffffff !important;
    padding: 0 16px !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.login-wrapper[style*="border-top"]::after {
    content: '' !important;
    position: absolute !important;
    top: 24px !important;
    left: 20px !important;
    right: 20px !important;
    height: 1px !important;
    background: #e5e7eb !important;
    z-index: -1 !important;
}

/* Hide veya text - handled in HTML now */
.login-wrapper[style*="border-top"]::before {
    display: none !important;
}

/* Required fields message style */
.required-fields-msg {
    display: block !important;
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}

/* Or divider style */
.or-divider {
    text-align: center !important;
    padding: 16px 0 !important;
    position: relative !important;
}

.or-divider::before,
.or-divider::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: calc(50% - 30px) !important;
    height: 1px !important;
    background: #e5e7eb !important;
}

.or-divider::before {
    left: 0 !important;
}

.or-divider::after {
    right: 0 !important;
}

.or-divider span {
    background: #ffffff !important;
    padding: 0 16px !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}