/* ==========================================
   Pharma Cosmetics - Custom Utilities
   Synced with: websitePharmaCosmetics/styles.css
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

:root {
  --primary-green: #3cb371;
  --primary-green-light: #5D9471;
  --primary-green-dark: #3A6247;
  --secondary-dark: #333333;
  --secondary-gray: #666666;
  --text-light: #999999;
  --bg-white: #FFFFFF;
  --bg-light: #F8F9FA;
  --bg-cream: #F5F5F5;
  --bg-dark: #1A1A1A;
  --accent-red: #E53935;
  --accent-gold: #FFB300;
  --accent-blue: #1E88E5;
  --highlight-yellow: #FCDC9D;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --font-primary: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Text utilities */
.text-primary { color: var(--primary-green) !important; }
.text-dark { color: var(--secondary-dark) !important; }
.text-gray { color: var(--secondary-gray) !important; }
.text-light { color: var(--text-light) !important; }
.text-white { color: var(--bg-white) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }

/* Font weight */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }

/* Font size — base 16px, 1rem = 16px */
.fs-xs   { font-size: 0.75rem   !important; } /* 12px */
.fs-sm   { font-size: 0.8125rem !important; } /* 13px */
.fs-base { font-size: 0.875rem  !important; } /* 14px */
.fs-md   { font-size: 1rem      !important; } /* 16px */
.fs-lg   { font-size: 1.25rem   !important; } /* 20px */
.fs-xl   { font-size: 1.5rem    !important; } /* 24px */
.fs-2xl  { font-size: 1.875rem  !important; } /* 30px */
.fs-3xl  { font-size: 2.25rem   !important; } /* 36px */
.fs-4xl  { font-size: 2.75rem   !important; } /* 44px */
.fs-5xl  { font-size: 3.5rem    !important; } /* 56px */

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }
.gap-5 { gap: var(--spacing-xl) !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }
.px-3 { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.px-4 { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-xs) !important; }
.m-2 { margin: var(--spacing-sm) !important; }
.m-3 { margin: var(--spacing-md) !important; }
.m-4 { margin: var(--spacing-lg) !important; }
.m-5 { margin: var(--spacing-xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }

/* Border radius */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: 9999px !important; }

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }

/* Width */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Background */
.bg-white { background-color: var(--bg-white) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-primary { background-color: var(--primary-green) !important; }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }


/* ==========================================
   Bootstrap Components (missing from bootstrap-4-3-min.css)
   ========================================== */

/* Card */
.card { position: relative; display: flex; flex-direction: column; background-color: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.card-title { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 500; }
.card-subtitle { margin-top: -.375rem; margin-bottom: 0; color: #6c757d; }
.card-text:last-child { margin-bottom: 0; }
.card-img-top { width: 100%; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); }
.card-img-bottom { width: 100%; border-bottom-left-radius: calc(.25rem - 1px); border-bottom-right-radius: calc(.25rem - 1px); }
.card-header { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
.card-footer { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }

/* Badge */
.badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }
.badge-primary { background-color: var(--primary-green); color: #fff; }
.badge-secondary { background-color: #6c757d; color: #fff; }
.badge-success { background-color: #28a745; color: #fff; }
.badge-danger { background-color: #dc3545; color: #fff; }
.badge-warning { background-color: #ffc107; color: #212529; }
.badge-info { background-color: #17a2b8; color: #fff; }
.badge-light { background-color: #f8f9fa; color: #212529; }
.badge-dark { background-color: #343a40; color: #fff; }
.badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; }

/* Alert */
.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger  { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-info    { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.alert-primary { color: #1a4731; background-color: #d4edda; border-color: #c3e6cb; }

/* Button variants */
.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; border: 1px solid transparent; transition: all .15s ease-in-out; text-decoration: none; }
.btn-primary   { background-color: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.btn-primary:hover { background-color: var(--primary-green-dark); border-color: var(--primary-green-dark); color: #fff; }
.btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; }
.btn-success   { background-color: #28a745; border-color: #28a745; color: #fff; }
.btn-danger    { background-color: #dc3545; border-color: #dc3545; color: #fff; }
.btn-warning   { background-color: #ffc107; border-color: #ffc107; color: #212529; }
.btn-outline-primary { background: transparent; border-color: var(--primary-green); color: var(--primary-green); }
.btn-outline-primary:hover { background-color: var(--primary-green); color: #fff; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem; }
.btn-block { display: block; width: 100%; }

/* List group */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; }
.list-group-item { position: relative; display: block; padding: .75rem 1.25rem; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }
.list-group-item:first-child { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }
.list-group-item:last-child { border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; }
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item.active { background-color: var(--primary-green); border-color: var(--primary-green); color: #fff; }

/* Nav tabs */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: .5rem 1rem; text-decoration: none; color: var(--primary-green); }
.nav-link:hover { color: var(--primary-green-dark); }
.nav-tabs { border-bottom: 1px solid #dee2e6; }
.nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; margin-bottom: -1px; }
.nav-tabs .nav-link.active { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; }

/* Table */
.table { width: 100%; margin-bottom: 1rem; color: #212529; border-collapse: collapse; }
.table th, .table td { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
.table-bordered { border: 1px solid #dee2e6; }
.table-bordered th, .table-bordered td { border: 1px solid #dee2e6; }
.table-hover tbody tr:hover { background-color: rgba(0,0,0,.075); }
.table-sm th, .table-sm td { padding: .3rem; }

/* Form */
.form-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-control:focus { border-color: var(--primary-green); outline: 0; box-shadow: 0 0 0 .2rem rgba(60,179,113,.25); }
.form-group { margin-bottom: 1rem; }
.form-label { display: inline-block; margin-bottom: .5rem; font-weight: 500; }
.form-text { display: block; margin-top: .25rem; font-size: .875rem; color: #6c757d; }
.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group .form-control { flex: 1 1 auto; }
.input-group-text { display: flex; align-items: center; padding: .375rem .75rem; font-size: 1rem; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; }

/* Spinner */
.spinner-border { display: inline-block; width: 2rem; height: 2rem; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes spinner-border { to { transform: rotate(360deg); } }

/* Progress */
.progress { display: flex; height: 1rem; overflow: hidden; background-color: #e9ecef; border-radius: .25rem; }
.progress-bar { display: flex; flex-direction: column; justify-content: center; color: #fff; text-align: center; background-color: var(--primary-green); transition: width .6s ease; }

/* Tooltip-like */
.tooltip-text { visibility: hidden; background-color: #333; color: #fff; text-align: center; padding: 4px 8px; border-radius: 4px; font-size: 12px; position: absolute; z-index: 1; white-space: nowrap; }
.has-tooltip:hover .tooltip-text { visibility: visible; }


/* Icon button */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--primary-green); background: transparent; color: var(--primary-green); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; }
.btn-icon i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.btn-icon:hover { background: var(--primary-green); color: #fff; }
.btn-icon--sm { width: 28px; height: 28px; font-size: 12px; }
.btn-icon--lg { width: 44px; height: 44px; font-size: 18px; }
.btn-icon--solid { background: var(--primary-green); color: #fff; border-color: var(--primary-green); }
.btn-icon--solid:hover { background: var(--primary-green-dark); border-color: var(--primary-green-dark); }