/**
 * ============================================================================
 * Shivanya Healthcare
 * File      : assets/css/site.css
 * Purpose   : Global Website Styles
 * Bootstrap : 5.x
 * Version   : 1.0.0
 * ============================================================================
 */


/* ==========================================================================
   Root Variables
   ========================================================================== */

:root {

    --primary: #0d6efd;

    --primary-dark: #0b5ed7;

    --success: #198754;

    --danger: #dc3545;

    --warning: #ffc107;

    --info: #0dcaf0;

    --light: #f8f9fa;

    --dark: #212529;

    --border: #dee2e6;

    --text: #495057;

    --radius: .50rem;

    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);

    --shadow: 0 .5rem 1rem rgba(0,0,0,.15);

}


/* ==========================================================================
   Body
   ========================================================================== */

body {

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

    font-size: 15px;

    color: var(--text);

    background: #ffffff;

    line-height: 1.6;

}


/* ==========================================================================
   Links
   ========================================================================== */

a {

    color: var(--primary);

    text-decoration: none;

    transition: .2s;

}

a:hover {

    color: var(--primary-dark);

}


/* ==========================================================================
   Images
   ========================================================================== */

img {

    max-width: 100%;

    height: auto;

}


/* ==========================================================================
   Headings
   ========================================================================== */

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

    color: var(--dark);

    font-weight: 600;

    margin-bottom: 1rem;

}


/* ==========================================================================
   Sections
   ========================================================================== */

.section {

    padding: 60px 0;

}

.section-sm {

    padding: 40px 0;

}

.section-lg {

    padding: 90px 0;

}


/* ==========================================================================
   Section Title
   ========================================================================== */

.section-title {

    margin-bottom: 2.5rem;

    text-align: center;

}

.section-title h2 {

    margin-bottom: .75rem;

}

.section-title p {

    max-width: 700px;

    margin: auto;

    color: #6c757d;

}


/* ==========================================================================
   Bootstrap Buttons
   ========================================================================== */

.btn {

    border-radius: var(--radius);

    font-weight: 500;

}

.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

}

.btn-primary:hover {

    background: var(--primary-dark);

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

}


/* ==========================================================================
   Cards
   ========================================================================== */

.card {

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

    border-radius: .75rem;

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

    transition: .25s;

}

.card:hover {

    box-shadow: var(--shadow);

}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {

    font-weight: 600;

    color: var(--dark);

}

.form-control,
.form-select {

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

    border-radius: var(--radius);

    min-height: 46px;

    box-shadow: none;

    transition: border-color .2s, box-shadow .2s;

}

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

    border-color: var(--primary);

    box-shadow: 0 0 0 .20rem rgba(13,110,253,.15);

}

textarea.form-control {

    min-height: 120px;

}


/* ==========================================================================
   Tables
   ========================================================================== */

.table {

    vertical-align: middle;

}

.table thead {

    background: var(--light);

}

.table thead th {

    border-bottom: 2px solid var(--border);

    font-weight: 600;

}


/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {

    border-radius: var(--radius);

    border: none;

}


/* ==========================================================================
   Badges
   ========================================================================== */

.badge {

    font-weight: 500;

    border-radius: .40rem;

}

.badge-home {

    background: #198754;

    color: #ffffff;

}

.badge-fasting {

    background: #ffc107;

    color: #212529;

}

.badge-popular {

    background: #dc3545;

    color: #ffffff;

}


/* ==========================================================================
   Shadows
   ========================================================================== */

.shadow-soft {

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

}

.shadow-hover:hover {

    box-shadow: var(--shadow);

}


/* ==========================================================================
   Border Radius
   ========================================================================== */

.rounded-lg {

    border-radius: .75rem;

}

.rounded-xl {

    border-radius: 1rem;

}


/* ==========================================================================
   Loading Spinner
   ========================================================================== */

.loading-spinner {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 2rem;

}


/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {

    text-align: center;

    padding: 3rem 1rem;

    color: #6c757d;

}

.empty-state i {

    font-size: 3rem;

    margin-bottom: 1rem;

    color: #adb5bd;

}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.cursor-pointer {

    cursor: pointer;

}

.text-small {

    font-size: .875rem;

}

.text-muted-light {

    color: #6c757d;

}

.bg-light-blue {

    background: #f4f9ff;

}

.border-dashed {

    border: 2px dashed var(--border);

}


/* ==========================================================================
   Bootstrap Overrides
   ========================================================================== */

.dropdown-menu {

    border-radius: .50rem;

}

.modal-content {

    border-radius: .75rem;

}

.pagination .page-link {

    color: var(--primary);

}

.pagination .page-item.active .page-link {

    background: var(--primary);

    border-color: var(--primary);

}


/* ==========================================================================
   Responsive Helpers
   ========================================================================== */

@media (max-width: 991.98px) {

    .section {

        padding: 45px 0;

    }

    .section-lg {

        padding: 60px 0;

    }

}

@media (max-width: 575.98px) {

    body {

        font-size: 14px;

    }

    .section-title {

        margin-bottom: 2rem;

    }

}