/* ==========================================================================
   MOTTO MARKET APP CSS
   Mobile-first UI for Laravel app views
   ========================================================================== */

:root{
    --app-bg: #f4f7fb;
    --app-bg-2: #edf3f9;
    --app-surface: #ffffff;
    --app-surface-2: #f8fafc;
    --app-surface-3: #eef3f8;

    --app-border: #dbe3ec;
    --app-border-strong: #c9d4df;

    --app-text: #17324d;
    --app-text-2: #334155;
    --app-text-3: #64748b;
    --app-text-muted: #94a3b8;

    --app-primary: #0f4c81;
    --app-primary-2: #0b65c2;
    --app-primary-soft: #eaf4ff;

    --app-accent: #ff4b5c;
    --app-accent-2: #e11d48;

    --app-success: #10b981;
    --app-success-soft: #e8faf2;

    --app-warning: #f59e0b;
    --app-warning-soft: #fff7e8;

    --app-danger: #dc2626;
    --app-danger-soft: #fef0f0;

    --app-info: #d8ecff;

    --app-shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
    --app-shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --app-shadow-lg: 0 18px 44px rgba(15, 23, 42, .12);

    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 18px;
    --app-radius-xl: 24px;

    --app-transition: .22s ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body.is-app{
    background: linear-gradient(180deg, #f7faff 0%, #edf3f9 100%);
    color: var(--app-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a{
    color: var(--app-primary-2);
    text-decoration: none;
}

a:hover{
    color: var(--app-primary);
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

.page-banner{
    display: none !important;
}

.main-nav,
.header-area,
.footer-area,
.left-sidebar,
.right-sidebar{
    display: none !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4,h5,h6{
    color: var(--app-text) !important;
    margin: 0 0 12px;
    line-height: 1.22;
    font-weight: 800;
}

h1{
    font-size: 1.55rem;
}

h2{
    font-size: 1.32rem;
}

h3{
    font-size: 1.15rem;
}

h4{
    font-size: 1.02rem;
}

p{
    color: var(--app-text-2);
    margin: 0 0 12px;
}

small,
.text-muted{
    color: var(--app-text-3) !important;
}

/* ==========================================================================
   APP PAGE WRAPPERS
   ========================================================================== */

.page-content{
    background: transparent !important;
    padding: 8px 0 18px;
}

.page-content .container{
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-content > .container,
.app-content .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-card,
.reg-login-form,
.dashboard-box,
.user-sidebar,
.table-responsive,
.card,
.contact-form,
.profile-card,
.pricing-card,
.message-card,
.saved-search-card,
.credit-card{
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.app-section-card{
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group{
    margin-bottom: 14px;
}

.form-group label,
.form-label{
    display: block;
    margin-bottom: 6px;
    color: var(--app-text-2);
    font-size: .9rem;
    font-weight: 700;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select{
    width: 100%;
    min-height: 46px;
    background: #fff !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border-strong) !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
    transition: border-color var(--app-transition), box-shadow var(--app-transition), background var(--app-transition);
}

textarea{
    min-height: 110px;
    resize: vertical;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus{
    border-color: var(--app-primary-2) !important;
    box-shadow: 0 0 0 4px rgba(11, 101, 194, .12) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder{
    color: var(--app-text-muted) !important;
}

.select2-container{
    width: 100% !important;
}

.select2-container--default .select2-selection--single{
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--app-border-strong) !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: var(--app-text) !important;
    line-height: 44px !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 100% !important;
    right: 10px !important;
}

.select2-dropdown{
    border: 1px solid var(--app-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--app-shadow-md) !important;
}

.select2-results__option{
    padding: 10px 12px !important;
    color: var(--app-text) !important;
}

.select2-results__option--highlighted{
    background: var(--app-primary-2) !important;
    color: #fff !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
button:not(.app-sidebar-toggle):not(.app-sidebar-close button):not(.ao-photo-btn){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    font-size: .94rem;
    cursor: pointer;
    transition: transform var(--app-transition), box-shadow var(--app-transition), background var(--app-transition), border-color var(--app-transition);
    text-decoration: none;
}

.btn:hover,
button:not(.app-sidebar-toggle):not(.app-sidebar-close button):not(.ao-photo-btn):hover{
    transform: translateY(-1px);
}

.btn-primary,
button[type="submit"]{
    background: linear-gradient(135deg, var(--app-primary-2) 0%, var(--app-primary) 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(15, 76, 129, .18) !important;
}

.btn-primary:hover,
button[type="submit"]:hover{
    color: #fff !important;
    filter: brightness(1.02);
}

.btn-secondary{
    background: #eef2f7 !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
}

.btn-success{
    background: var(--app-success) !important;
    color: #fff !important;
}

.btn-danger{
    background: var(--app-danger) !important;
    color: #fff !important;
}

.btn-warning{
    background: var(--app-warning) !important;
    color: #fff !important;
}

.btn-outline-primary{
    background: #fff !important;
    color: var(--app-primary-2) !important;
    border: 1px solid #b8d8fb !important;
}

/* ==========================================================================
   ALERTS / BADGES
   ========================================================================== */

.alert{
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: .92rem;
    margin-bottom: 14px;
}

.alert-success{
    background: var(--app-success-soft);
    border-color: #bde9d2;
    color: #0f7a55;
}

.alert-danger{
    background: var(--app-danger-soft);
    border-color: #f5c3c3;
    color: #b42318;
}

.alert-warning{
    background: var(--app-warning-soft);
    border-color: #fde2a7;
    color: #9a6700;
}

.alert-info{
    background: var(--app-primary-soft);
    border-color: #c8e0fb;
    color: var(--app-primary);
}

.badge{
    border-radius: 999px;
    padding: 6px 9px;
    font-size: .74rem;
    font-weight: 800;
}

.badge-success{ background: var(--app-success) !important; color:#fff !important; }
.badge-danger{ background: var(--app-danger) !important; color:#fff !important; }
.badge-warning{ background: var(--app-warning) !important; color:#fff !important; }
.badge-secondary{ background: #64748b !important; color:#fff !important; }

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-responsive{
    overflow: hidden;
}

.table{
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--app-text);
    background: #fff;
}

.table th{
    background: #f8fafc;
    color: var(--app-text-2);
    font-size: .86rem;
    font-weight: 800;
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-border);
}

.table td{
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}

.table tbody tr:last-child td{
    border-bottom: 0;
}

/* ==========================================================================
   LOGIN / REGISTER / FORGOT / RESET
   ========================================================================== */

.reg-login-form{
    max-width: 560px;
    margin: 0 auto;
    padding: 18px;
}

.reg-login-form h3{
    font-size: 1.16rem;
    color: var(--app-text) !important;
    margin-bottom: 16px;
}

.new-user{
    margin-top: 14px;
    text-align: center;
    color: var(--app-text-3);
}

.link{
    color: var(--app-primary-2);
    font-weight: 700;
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.dashboard-box{
    padding: 16px;
    margin-bottom: 14px;
}

.dashboard-box .text{
    color: var(--app-text-3);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.dashboard-box .number{
    color: var(--app-text);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-box-1{
    border-left: 4px solid var(--app-success);
}

.dashboard-box-2{
    border-left: 4px solid var(--app-warning);
}

.dashboard-box-3{
    border-left: 4px solid var(--app-primary-2);
}

.kvote td:first-child{
    width: 42%;
    font-weight: 700;
    color: var(--app-text-2);
}

.pkg-row{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pkg-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}

.pkg-badge--cars{ background: #2563eb; }
.pkg-badge--parts{ background: #059669; }
.pkg-badge--biz{ background: #b45309; }

.pkg-title{
    font-weight: 800;
    color: var(--app-text);
}

.pkg-status{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--app-text-2);
}

.pkg-status .dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-green{ background: #22c55e; }
.dot-red{ background: #ef4444; }

/* ==========================================================================
   CUSTOMER BOXES / PROFILE / WISHLIST / SAVED SEARCHES / CREDITS
   ========================================================================== */

.profile-card,
.credit-card,
.saved-search-card,
.message-card{
    padding: 16px;
    margin-bottom: 14px;
}

.saved-search-card h4,
.credit-card h4,
.message-card h4{
    margin-bottom: 10px;
}

.saved-search-card .meta,
.credit-card .meta,
.message-card .meta{
    color: var(--app-text-3);
    font-size: .86rem;
}

.saved-search-card .actions,
.credit-card .actions,
.message-card .actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing-grid,
.package-grid,
.row.package-list{
    row-gap: 14px;
}

.pricing-card,
.package-item,
.package-box{
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--app-shadow-sm);
    height: 100%;
    transition: transform var(--app-transition), box-shadow var(--app-transition);
}

.pricing-card:hover,
.package-item:hover,
.package-box:hover{
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}

.pricing-card h3,
.package-item h3,
.package-box h3{
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.pricing-price,
.package-price{
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--app-primary);
    margin-bottom: 10px;
}

.pricing-card ul,
.package-item ul,
.package-box ul{
    margin: 0;
    padding-left: 18px;
    color: var(--app-text-2);
}

.pricing-card li,
.package-item li,
.package-box li{
    margin-bottom: 6px;
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */

.msg-thread,
.message-thread,
.conversation-box{
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--app-shadow-sm);
    margin-bottom: 14px;
}

.message-bubble{
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 10px;
    max-width: 92%;
    font-size: .93rem;
}

.message-bubble--self{
    background: var(--app-primary-soft);
    color: var(--app-primary);
    margin-left: auto;
}

.message-bubble--other{
    background: #f8fafc;
    color: var(--app-text);
    margin-right: auto;
}

/* ==========================================================================
   SIDEBAR CONTENT INSIDE DRAWER
   ========================================================================== */

.user-sidebar-menu,
.customer-sidebar-menu{
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-sidebar-menu li,
.customer-sidebar-menu li{
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.user-sidebar-menu .biz-link,
.customer-sidebar-menu .biz-link{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f6f8fb;
    border: 1px solid #e4e9f0;
    color: var(--app-text) !important;
    font-weight: 700;
    transition: background var(--app-transition), border-color var(--app-transition), transform var(--app-transition);
}

.user-sidebar-menu .biz-link:hover,
.customer-sidebar-menu .biz-link:hover{
    background: #edf5ff;
    border-color: #cfe3fb;
    color: var(--app-primary-2) !important;
    transform: none;
}

.user-sidebar-menu li.biz-active > .biz-link,
.customer-sidebar-menu li.biz-active > .biz-link{
    background: linear-gradient(135deg, #f59e0b 0%, #ea860f 100%) !important;
    border-color: #e6951b !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(245, 158, 11, .18);
}

.user-sidebar-menu .msg-pin-unread > .biz-link{
    background: #dfeeff !important;
    border-color: #c2dcff !important;
    color: #163b63 !important;
}

.user-sidebar-menu .biz-link i,
.customer-sidebar-menu .biz-link i{
    width: 18px;
    min-width: 18px;
    text-align: center;
}

/* ==========================================================================
   STATIC PAGES
   ========================================================================== */

.app-static-page,
.contact-page,
.about-page,
.faq-page,
.terms-page,
.privacy-page{
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    box-shadow: var(--app-shadow-sm);
    padding: 18px;
}

.app-static-page h1,
.contact-page h1,
.about-page h1,
.faq-page h1,
.terms-page h1,
.privacy-page h1{
    font-size: 1.32rem;
    margin-bottom: 14px;
}

.app-static-page h2,
.contact-page h2,
.about-page h2,
.faq-page h2,
.terms-page h2,
.privacy-page h2{
    font-size: 1.08rem;
    margin-top: 18px;
    margin-bottom: 10px;
}

.app-static-page p,
.contact-page p,
.about-page p,
.faq-page p,
.terms-page p,
.privacy-page p,
.app-static-page li,
.contact-page li,
.about-page li,
.faq-page li,
.terms-page li,
.privacy-page li{
    color: var(--app-text-2);
    font-size: .95rem;
}

/* ==========================================================================
   PHOTO GRID / MEDIA
   ========================================================================== */

.ao-photo-grid,
.ao-photo-placeholders{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.ao-photo-item,
.ao-photo-placeholder{
    border-radius: 14px;
    overflow: hidden;
}

.ao-photo-item{
    border: 2px solid var(--app-border);
    background: #fff;
}

.ao-photo-placeholder{
    border: 2px dashed var(--app-border-strong);
    background: #f8fafc;
    min-height: 140px;
}

.ao-photo-btn{
    border-radius: 10px !important;
}

/* ==========================================================================
   LISTING TABS / FILTERS
   ========================================================================== */

#listingTab.nav-tabs,
.parts-category-tabs,
.ao-transport-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #f3f7fb;
    padding: 10px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    margin-bottom: 16px;
}

#listingTab .nav-link,
.parts-category-tabs a,
.ao-transport-tab{
    background: #fff !important;
    border: 1px solid #dfe7ef !important;
    color: var(--app-text-2) !important;
    border-radius: 12px !important;
    transition: all var(--app-transition);
}

#listingTab .nav-link.active,
.parts-category-tabs a.active{
    background: var(--app-primary) !important;
    color: #fff !important;
    border-color: var(--app-primary) !important;
}

.ao-transport-tab{
    min-width: 100%;
    padding: 12px 14px;
    box-shadow: none !important;
}

.ao-transport-tab.active{
    background: #f4f9ff !important;
    border-color: #b8d8fb !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination{
    gap: 6px;
    flex-wrap: wrap;
}

.page-link{
    border-radius: 10px !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text-2) !important;
    min-width: 40px;
    text-align: center;
}

.page-item.active .page-link{
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.shadow-none{
    box-shadow: none !important;
}

.rounded-app{
    border-radius: 18px !important;
}

.app-muted{
    color: var(--app-text-3) !important;
}

.app-note{
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    color: var(--app-text-2);
    font-size: .9rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 768px){
    .app-section-card,
    .app-static-page,
    .contact-page,
    .about-page,
    .faq-page,
    .terms-page,
    .privacy-page,
    .pricing-card,
    .package-item,
    .package-box,
    .dashboard-box,
    .reg-login-form{
        padding: 20px;
    }

    .ao-photo-grid,
    .ao-photo-placeholders{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 767.98px){
    h1{ font-size: 1.34rem; }
    h2{ font-size: 1.14rem; }
    h3{ font-size: 1rem; }

    .page-content{
        padding: 6px 0 14px;
    }

    .dashboard-box .number{
        font-size: 1.42rem;
    }

    .table{
        font-size: .9rem;
    }

    .table th,
    .table td{
        padding: 10px 12px;
    }

    .kvote td:first-child{
        width: auto;
    }

    .pkg-row{
        align-items: flex-start;
    }

    .btn,
    button:not(.app-sidebar-toggle):not(.app-sidebar-close button):not(.ao-photo-btn){
        width: 100%;
    }
}

@media (max-width: 575.98px){
    .reg-login-form,
    .dashboard-box,
    .app-static-page,
    .contact-page,
    .about-page,
    .faq-page,
    .terms-page,
    .privacy-page,
    .pricing-card,
    .package-item,
    .package-box,
    .message-card,
    .saved-search-card,
    .credit-card{
        border-radius: 16px;
        padding: 14px;
    }

    .ao-photo-grid,
    .ao-photo-placeholders{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 390px){
    .ao-photo-grid,
    .ao-photo-placeholders{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{
    .app-debug-marker,
    .app-sidebar,
    .app-sidebar-overlay,
    .app-sidebar-toggle,
    .btn,
    button{
        display: none !important;
    }

    body{
        background: #fff !important;
    }

    .app-card,
    .dashboard-box,
    .reg-login-form,
    .table-responsive{
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}
/* ==========================================================================
   HAMBURGER FIX (APP)
   ========================================================================== */

.app-sidebar-toggle{
    position: fixed;
    top: calc(var(--safe-top) + 14px);
    left: calc(var(--safe-left) + 14px);
    z-index: 100001;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* sakrij staru FA ikonicu */
.app-sidebar-toggle i{
    display: none !important;
}

/* nacrtaj hamburger linije */
.app-sidebar-toggle::before,
.app-sidebar-toggle::after,
.app-sidebar-toggle span{
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: #111827;
    border-radius: 999px;
    position: absolute;
}

/* srednja */
.app-sidebar-toggle span{
    transform: translateY(0);
}

/* gornja */
.app-sidebar-toggle::before{
    transform: translateY(-6px);
}

/* donja */
.app-sidebar-toggle::after{
    transform: translateY(6px);
}
.fp-feat.compact li {
    font-size: 14px;
    padding: 6px 0;
}

.fp-actions.single {
    margin-top: 16px;
}

.btn-main {
    display: block;
    width: 100%;
    text-align: center;
    background: #e60023;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-main:hover {
    background: #c4001d;
}
.fp-card {
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}