/* ==========================================================
   BabuMosshaii Home Delivery
   common.css
========================================================== */

/*----------------------------------------------------------
Google Font
----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*----------------------------------------------------------
CSS Variables
----------------------------------------------------------*/
/*=========================================================
ROOT VARIABLES
=========================================================*/

:root {

    --theme: #f97316;
    --theme-dark: #ea580c;
    --theme-light: #fff7ed;

    --text: #212529;
    --text-muted: #6c757d;

    --border: #e9ecef;
    --bg: #f8f9fa;
    --white: #ffffff;

    --radius: 16px;

    --shadow-sm: 0 5px 18px rgba(0, 0, 0, .05);
    --shadow-md: 0 10px 35px rgba(0, 0, 0, .08);
    --primary: #f97316;
    --primary-dark: #ea580c;
    --primary-light: #fff7ed;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --gradient: linear-gradient(135deg, #f97316, #fb923c);

    --shadow: 0 10px 30px rgba(0, 0, 0, .08);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .12);

    --transition: .25s ease;

    --radius-lg: 20px;

    --header-height: 72px;

    --text-light: #6b7280;

}


/*=========================================================
GLOBAL
=========================================================*/

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    font-size: 16px;
    scroll-behavior: smooth;

}

body{

    margin:0;

    background:#f8f9fa;

    min-height:100vh;

    overflow-x:hidden;

    font-family:'Poppins',sans-serif;

}


/*=========================================================
APP CONTAINER
=========================================================*/

.app-container{

    width:100%;

    max-width:768px;

    margin:auto;

    padding:18px;

    padding-bottom:95px;

}


/*=========================================================
IMAGES
=========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


/*=========================================================
CARD
=========================================================*/

.card,
.app-card {

    background: #fff;

    border: none;

    border-radius: 18px;

    box-shadow: var(--shadow-sm);

}


/*=========================================================
BUTTON
=========================================================*/

.btn{

    border-radius:16px;

    font-weight:600;

    transition:.25s;

}

.btn-theme{

    background:linear-gradient(135deg,#f97316,#fb923c);

    color:#fff;

    height:56px;

    border:none;

}

.btn-theme:hover{

    transform:translateY(-2px);

}


/*=========================================================
FORM
=========================================================*/

.form-control,
.form-select{

    min-height:52px;

    border-radius:14px;

    padding:12px 16px;

}

.form-control:focus,
.form-select:focus {

    border-color: var(--theme);

    box-shadow: 0 0 0 .18rem rgba(249, 115, 22, .15);

}


/*=========================================================
TEXT
=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: 700;

}

.text-theme {

    color: var(--theme);

}


/*=========================================================
SECTION
=========================================================*/

.section-title {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 18px;

}

/*=========================================================
SAFE AREA (iPhone)
=========================================================*/

body {

    padding-bottom: env(safe-area-inset-bottom);

}

/*----------------------------------------------------------
Topbar
----------------------------------------------------------*/

.topbar {

    height: var(--header-height);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 18px;

    background: var(--gradient);

    color: #fff;

    position: sticky;

    top: 0;

    z-index: 1055;

    box-shadow: var(--shadow);

}

.logo {

    font-size: 20px;

    font-weight: 700;

}

.icon-btn {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

}


/*----------------------------------------------------------
Cards
----------------------------------------------------------*/

.card {

    background: #fff;

    border: none;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    padding: 18px;

    margin-bottom: 18px;

}


/*----------------------------------------------------------
Location Card
----------------------------------------------------------*/

.location-card {

    border-left: 5px solid var(--success);

}

.location-title {

    font-size: 13px;

    color: var(--text-light);

}

.location-pincode {

    font-size: 28px;

    font-weight: 700;

}

.location-address {

    color: var(--text);

}


/*----------------------------------------------------------
Section Title
----------------------------------------------------------*/

.section-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 12px;

}


/*----------------------------------------------------------
Inputs
----------------------------------------------------------*/

.form-control {

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 14px 16px;

    transition: var(--transition);

    background: #fff;

}

.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(239, 79, 52, .15);

}


/*----------------------------------------------------------
Textarea
----------------------------------------------------------*/

textarea {

    resize: none;

    min-height: 180px;

}


/*----------------------------------------------------------
Upload Box
----------------------------------------------------------*/

.upload-box {

    border: 2px dashed #d7d7d7;

    border-radius: 20px;

    padding: 40px 20px;

    background: #fcfcfc;

    text-align: center;

    transition: var(--transition);

}

.upload-box:hover {

    border-color: var(--primary);

    background: var(--primary-light);

}

.upload-box i {

    font-size: 55px;

    color: var(--primary);

    margin-bottom: 15px;

}


/*----------------------------------------------------------
Buttons
----------------------------------------------------------*/

.btn {

    border: none;

    border-radius: 18px;

    padding: 14px 24px;

    font-weight: 600;

    transition: var(--transition);

}

.btn-primary {

    background: var(--gradient);

    color: #fff;

}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}

.btn-light {

    background: #fff;

    border: 1px solid var(--border);

}

.btn-light:hover {

    background: #fafafa;

}


/*----------------------------------------------------------
Badges
----------------------------------------------------------*/

.badge {

    border-radius: 30px;

    padding: 6px 12px;

    font-size: 12px;

    font-weight: 600;

}

.badge-success {

    background: #EAF9F0;

    color: var(--success);

}

.badge-danger {

    background: #FDEDED;

    color: var(--danger);

}


/*----------------------------------------------------------
Divider
----------------------------------------------------------*/

.divider {

    display: flex;

    align-items: center;

    margin: 25px 0;

}

.divider::before,
.divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: #ddd;

}

.divider span {

    padding: 0 15px;

    color: #999;

}


/*----------------------------------------------------------
Loader
----------------------------------------------------------*/

.loader {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: 4px solid #ddd;

    border-top-color: var(--primary);

    animation: spin .8s linear infinite;

}


/*----------------------------------------------------------
Toast
----------------------------------------------------------*/

.toast-success {

    background: #EAF9F0;

    color: var(--success);

}

.toast-danger {

    background: #FCE8E8;

    color: var(--danger);

}


/*----------------------------------------------------------
Utility
----------------------------------------------------------*/

.rounded {
    border-radius: var(--radius);
}

.shadow {
    box-shadow: var(--shadow);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.bg-white {
    background: #fff;
}

.bg-primary {
    background: var(--primary);
}

.bg-light {
    background: #fafafa;
}

.w-100 {
    width: 100%;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mt-4 {
    margin-top: 32px;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.py-2 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.p-3 {
    padding: 24px;
}


/*----------------------------------------------------------
Animations
----------------------------------------------------------*/

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.fade-up {

    animation: fadeUp .35s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:768px) {

    .app-container {

        padding: 15px;

    }

    .location-pincode {

        font-size: 24px;

    }

    .btn {

        width: 100%;

    }

}

/*==================================================
    TOP BAR
==================================================*/

.topbar {

    position: sticky;
    top: 0;
    z-index: 999;

    height: 72px;

    background: linear-gradient(135deg, #EF4F34, #FF744E);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 18px;

    box-shadow: 0 8px 25px rgba(239, 79, 52, .18);

}

.topbar-left {

    display: flex;
    align-items: center;

}

.logo-wrapper {

    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;

}

.logo-icon {

    width: 48px;
    height: 48px;

    border-radius: 16px;

    background: rgba(255, 255, 255, .18);

    display: flex;
    justify-content: center;
    align-items: center;

    backdrop-filter: blur(10px);

}

.logo-icon i {

    font-size: 24px;

}

.logo-text {

    display: flex;
    flex-direction: column;

}

.logo-text h5 {

    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;

}

.logo-text small {

    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    letter-spacing: .5px;

}

.topbar-right {

    display: flex;
    align-items: center;
    gap: 10px;

}

.topbar-btn {

    width: 44px;
    height: 44px;

    border: none;

    border-radius: 14px;

    background: rgba(255, 255, 255, .18);

    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;

    transition: .25s;

    backdrop-filter: blur(10px);

}

.topbar-btn:hover {

    background: #fff;
    color: var(--primary);

    transform: translateY(-2px);

}

@media(max-width:576px) {

    .topbar {

        height: 68px;
        padding: 0 15px;

    }

    .logo-icon {

        width: 42px;
        height: 42px;

    }

    .logo-icon i {

        font-size: 20px;

    }

    .logo-text h5 {

        font-size: 17px;

    }

    .logo-text small {

        font-size: 11px;

    }

}

/*==================================================
    LOGO
==================================================*/

.logo-image {

    width: 48px;
    height: 48px;

    border-radius: 14px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);

}

.logo-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/*==================================================
    PROFILE DROPDOWN
==================================================*/

.profile-dropdown {

    min-width: 220px;

    border-radius: 16px;

    padding: 8px;

    margin-top: 12px;

}

.profile-dropdown .dropdown-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 10px;

    font-weight: 500;

    transition: .25s;

}

.profile-dropdown .dropdown-item i {

    font-size: 16px;

    width: 20px;

}

.profile-dropdown .dropdown-item:hover {

    background: var(--primary-light);

    color: var(--primary);

}

.profile-dropdown .dropdown-divider {

    margin: 6px 0;

}

#commonToast {

    min-width: 340px;

    border-radius: 14px;

}

#commonToast.success {

    background: #d1fae5;

    color: #065f46;

}

#commonToast.success .toast-header {

    background: #10b981;

    color: #fff;

}

#commonToast.error {

    background: #fee2e2;

    color: #991b1b;

}

#commonToast.error .toast-header {

    background: #ef4444;

    color: #fff;

}

#commonToast.warning {

    background: #fef3c7;

    color: #92400e;

}

#commonToast.warning .toast-header {

    background: #f59e0b;

    color: #fff;

}

#commonToast.info {

    background: #dbeafe;

    color: #1e40af;

}

#commonToast.info .toast-header {

    background: #3b82f6;

    color: #fff;

}

.btn-theme {
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(90deg, #ff6b35, #ff884d);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: none;
    transition: .3s;
}

.btn-theme:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(255, 107, 53, .3);
}

.floating-back-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(249, 115, 22, .35);
    z-index: 9999;
    transition: all .25s ease;
}

.floating-back-btn:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 35px rgba(249, 115, 22, .45);
}

.floating-back-btn:active {
    transform: scale(.95);
}

@media (max-width:768px) {

    .floating-back-btn {
        width: 52px;
        height: 52px;
        right: 18px;
        bottom: 18px;
        font-size: 20px;
    }

}
html{

    -webkit-text-size-adjust:100%;

}

*{

    transition:

        background-color .2s,

        color .2s,

        border-color .2s,

        box-shadow .2s;

}