/* Enhanced style.css - Snowcrest Naturals Public Website */

/* ============================================
   RESPONSIVE VISIBILITY UTILITIES
   ============================================ */

/* Mobile view - hidden on desktop by default */
.mobile-view {
  display: none !important;
}

@media (max-width: 991.98px) {
  /* Desktop view - hidden on mobile */
  .desktop-view {
    display: none !important;
  }

  /* Mobile view - visible on mobile */
  .mobile-view {
    display: block !important;
  }
}

:root {
  --primary-color: #3a8469;
  --primary-light: #b6e0d8;
  --primary-dark: #2e6b54;

  /* ORGREF — the single reference button style, taken from the cart-drawer
     Checkout button. Every CTA on the public site uses these tokens so the
     brand button looks identical everywhere (desktop + mobile).
     Solid CTA  : --orgref-bg on white text.
     Outline CTA: white background, --orgref-edge border/text, --orgref-bg on hover. */
  --orgref-from: #91B6BF;
  --orgref-to: #286169;
  --orgref-edge: #286169;
  --orgref-bg: linear-gradient(135deg, #91B6BF 0%, #286169 100%);
  --orgref-shadow: 0 2px 8px rgba(40, 97, 105, 0.3);
  --secondary-color: #f8d7b6;
  --light-peach: #fff5ee;
  --light-blue: #e6f2ff;
  --light-green: #e6fff2;
  --light-yellow: #fffde6;
  --success-light: #d1e7dd;
  --text-color: #333;
  --light-gray: #f8f9fa;
  --border-color: #e9ecef;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --font-family: 'Poppins', sans-serif;
  --font-script: 'Playfair Display', serif;
}

body {
  font-family: "Montserrat", sans-serif;;
  color: var(--text-color);
  line-height: 30px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

.font-script {
  font-family: var(--font-script);
  color: var(--primary-color);
}

/* Header Styles */
.bg-teal-100 {
  background-color: #91B6BF;
}

.bg-light-peach {
  background-color: #FFFBE9;
}

/* Navigation */
.navbar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-light .navbar-nav .nav-link{
    color: var(--text-color);
    font-weight: 500;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 15px;
}
.header-logo img {
    width: 120px;
    position: relative;
    top: 20px;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

/* Custom Buttons — all solid CTAs render as ORGREF, all outline CTAs go ORGREF
   on hover. Sizes/radii are intentionally left to each button's own rule. */
.btn-success,
.btn-primary {
  background-color: var(--orgref-to);
  background-image: var(--orgref-bg);
  border-color: transparent;
  color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--orgref-to) !important;
  background-image: var(--orgref-bg) !important;
  border-color: transparent !important;
  color: #fff !important;
  filter: brightness(0.94);
}

.btn-outline-success {
  color: var(--orgref-edge);
  border-color: var(--orgref-edge);
  background-color: #fff;
  background-image: none;
  padding: 8px 30px;
}

.btn-outline-primary {
  color: var(--orgref-edge);
  border-color: var(--orgref-edge);
  background-color: #fff;
  background-image: none;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--orgref-to);
  background-image: var(--orgref-bg);
  border-color: transparent;
  color: #fff;
}

/* Card Styles */
.card {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Product Card Styles */
.product-card {
  background-color: #ffffff;
  border:1px solid #decdec;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: none;
  background: transparent;
}

.product-card .card-img-top {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  height: 300px;
  object-fit: cover;
}

.product-card .card {
    background: transparent;
    box-shadow: none;
}
.product-card .card:hover {
    background: transparent;
    box-shadow: none;
}
.product-card .card a img {
    border: 0;
    height: 460px;
    object-fit: cover;
}
.product-card button.btn.btn-outline-success,
.product-card a.btn.btn-outline-success {
    background-color: #ffffff;
    font-weight: 600;
    color: #286169;
    border-color: #286169;
}
.product-card button.btn.btn-outline-success:hover,
.product-card a.btn.btn-outline-success:hover {
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
    color: #ffffff;
}
.product-card .card span.fw-bold.me-2 {
    font-weight: 600 !important;
}

/* Dashboard Styles */
.dashboard-container {
  background-color: #ffffff;
  min-height: 100vh;
}

.dashboard-sidebar {
  background-color: #F9F9F9;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  overflow-y: auto;
  padding-left: 0;
  padding-right: 0;
}

.dashboard-content {
    padding-top: 1rem;
    padding-left: 1.3rem;
}

@media (max-width: 991.98px) {
  .dashboard-sidebar {
    position: fixed;
    left: -280px;
    width: 280px;
    transition: left 0.3s ease;
    z-index: 1050;
  }

  .dashboard-sidebar.show {
    left: 0;
  }

  .dashboard-content {
    margin-top: 60px;
    width: 100%;
  }
}

.dashboard-nav .nav-link {
  color: var(--gray-700);
  padding: 0.75rem 1rem;
  border-radius: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.dashboard-nav .nav-link:hover,
.dashboard-nav .nav-link.active {
    background-color: #91B6BF;
    color: #ffffff;
}

.dashboard-nav .nav-link svg {
  margin-right: 0.75rem;
}

/* User profile in dashboard */
.avatar-placeholder {
  width: 80px;
  height: 80px;
  background-color: var(--light-peach);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 50%;
  margin: 0 auto 15px;
}

/* Dashboard Cards */
.bg-light-blue {
  background-color: var(--light-blue);
}

.bg-light-green {
  background-color: var(--light-green);
}

.bg-light-yellow {
  background-color: var(--light-yellow);
}

.bg-success-light {
  background-color: var(--success-light);
}

.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

/* Cart Sidebar */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -680px;
  width: 600px;
  height: 100vh;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-sidebar.open {
  right: 0;
}

.cart-sidebar-header {
  flex-shrink: 0;
  border-bottom: 1px solid #dee2e6;
}

.cart-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.cart-sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid #dee2e6;
  background: white;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  display: none;
}

.cart-overlay.open {
  display: block;
}

@media (max-width: 576px) {
  .cart-sidebar {
    width: 100%;
    right: -100%;
  }
}

/* Checkout Progress Steps */
.checkout-progress {
  padding: 20px 0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 20px;
}

.progress-step:last-child::before {
  display: none;
}

.step-number {
  /* width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: var(--gray-600); */
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-weight: bold;
  margin-bottom: 10px;
  position: relative; */
  z-index: 2;
}

.progress-step.active .step-number {
  background-color: var(--primary-color);
  color: white;
}

.step-label {
  font-weight: 500;
  color: var(--gray-600);
}

.progress-step.active .step-label {
  color: var(--primary-color);
  font-weight: 600;
}

/* Form Controls */
.form-control,
.form-select {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-color: #ced4da;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(58, 132, 105, 0.25);
}

/* Login & Register pages */
.login-page, .register-page {
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Newsletter Section */
.newsletter-section {
    background-color: #FFF1ED;
    padding: 120px 0;
    margin-top: -20px;
}

/* Footer */
footer {
  background-color: #fff;
  border: 0;
}

.footer-mountain {
  height: 100px;
  background-size: cover;
  background-position: center;
}

/* Loyalty points section */
.loyalty-rewards-page .card {
  border-radius: 0.5rem;
  overflow: hidden;
  height: 100%;
}

.loyalty-tier-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  height: 100%;
}

/* Product details page */
.product-detail .product-tabs .nav-link {
  color: var(--gray-600);
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.product-detail .product-tabs .nav-link.active {
  color: #286169;
  border-bottom: 2px solid #286169;
  background-color: transparent;
}

/* Loader animation */
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(58, 132, 105, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Common spacing utils */
.section-padding {
  padding: 4rem 0;
}

.section-margin {
  margin: 4rem 0;
}

/* Top Bar */
body .topBar.bg-light {
    background-color: #FFDDD3 !important;
}
body .topBar.bg-light p {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 22px;
}
body .topBar.bg-light p svg {
    margin-left: 10px;
}
header .col-md-9.col-sm-9 {
    width: 85%;
}
header .col-md-3.col-sm-3 {
    width: 15%;
    display: flex;
    justify-content: flex-end;
}

header .search-container input[type="text"]{
    height: 50px;
    border: 0;
    padding: 15px 20px;
    color: #202020;
}
header .search-container .position-absolute {
    top: 5px;
    right: 15px !important;
}
.shopping-controls-header a.btn.btn-link {
    padding: 0 4px;
}
span.product-add-count {
    background-color: #fff;
    color: #000;
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    font-size: 13px;
    top: 0;
    position: relative;
    margin-left: 14px;
    line-height: 25px;
}

.navigationBar{
    height: 90px;
    position: sticky;
    z-index: 10;
    top: 0;
}

/* Featured Products Section */
body .featured-product-section {
    background-color: #FAF2E2 !important;
    padding: 140px 0 !important;
}
.featured-product-section .container {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}
.featured-product-section h2 {
    font-size: 40px;
    margin-bottom: 70px;
    font-family: "Marcellus", serif;
    font-weight: 500;
    color: #286169;
}

/* Best Seller Section */
.best-seller-section h2 {
    font-size: 40px;
    margin-bottom: 70px !important;
    font-family: "Marcellus", serif;
    font-weight: 500;
    color: #286169;
}
.best-seller-section{
    padding: 140px 0;
}

/* Snowcrest Mission Section */
.snowcrest-mission-section {
    padding: 120px 0 !important;
    background-color: #FFF7E0;
    height: auto;
}
.snowcrest-mission-section h2.font-script{
    color: #286169;
    font-size: 44px;
    margin-bottom: 30px;
    font-weight: normal !important;
    font-family: "Cormorant Garamond", "Pacifico", cursive;
}
.snowcrest-mission-section img {
    width: 100%;
}

/* Product Categories Section */
.product-categories-section{
    background-color: #FFF1ED;
    padding: 140px 0;
}
.product-categories-section h2 {
    font-size: 40px;
    margin-bottom: 70px;
    font-family: "Marcellus", serif;
    font-weight: 500;
    color: #286169;
}
.categories-panel a{
  text-decoration: none;
}
.product-categories-panel {
    max-width: 1000px;
    margin: 0 auto;
}
.categories-panel .categories-panel-bg-white img {
    width: 130px;
}
.categories-panel .categories-panel-bg-white {
    background-color: #ffffff;
    border: solid 1px #E9DBB9;
    border-radius: 10px;
    padding: 30px 20px;
}
.categories-panel .categories-title {
    margin: 15px 0;
    color: #000;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}
.categories-panel {
    margin: 0 0 20px;
}

/* Testimonials Section */
.testimonials-section {
    padding: 120px 0;
    background-color: #fff;
}
.testimonials-section h2 {
    font-size: 40px;
    margin-bottom: 30px !important;
    font-family: "Marcellus", serif;
    font-weight: 500;
    color: #286169;
}
.testimonials-section p.text-center.small-paragraph {
    margin-bottom: 50px;
}
.testimonials-section .card {
    background-color: #F4EDDB;
    border: solid 1px #cccccc !important;
    box-shadow: none !important;
    border-radius: 20px;
}
.testimonials-section .card .quote-shape{
  padding: 12px 0;
}
.testimonials-section .card .quote-shape svg {
    width: 42px;
    height: 42px;
}
.testimonials-section .card p.card-text {
    font-weight: 500;
    line-height: 28px;
}
.Testimonials-animation-righttoleft{
    width: 100%;
    animation: Technologies_slide_to_left__v9gtT 20s linear infinite;
    overflow: hidden;
}
.Testimonials-animation-righttoleft .row{
    flex-direction: row !important;
    flex-wrap: nowrap;
}
.Testimonials-animation-lefttoright{
    width: 100%;
    animation: Technologies_slide_to_right__c0laB 10s linear infinite;
    overflow: hidden;
}
.Testimonials-animation-lefttoright .row{
    flex-direction: row !important;
    flex-wrap: nowrap;
}
@keyframes Technologies_slide_to_left__v9gtT {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

@keyframes Technologies_slide_to_right__c0laB {
    0% {
        transform: translateX(-50%)
    }
    to {
        transform: translateX(0)
    }
}

/* Blogs Section */
.blogs-sections{
  background-color: transparent;
  padding: 0 0 120px;
}
.font-script {
  font-size: 40px;
  margin-bottom: 30px !important;
  font-family: "Marcellus", serif;
  font-weight: 500;
  color: #286169;
}
.blogs-sections p.text-center.small-paragraph {
    margin-bottom: 40px !important;
}
.blogs-sections .card {
    padding: 20px;
    box-shadow: 0 0 40px #e7e7e7 !important;
    border-radius: 20px;
}
.blogs-sections .card img {
    margin-bottom: 20px;
}
.blogs-sections .card .blog-card-body h5.card-title {
    font-weight: 500;
    min-height: 50px;
    font-size: 18px !important;
}
.blogs-sections .card .blog-card-body p.card-text {
    line-height: 26px;
    min-height: 80px;
}
.blogs-sections .card .blog-card-body a.btn.btn-link.p-0.text-success{
    color: #2C663E !important;
    text-decoration: none;
    font-weight: 500;
}

.snowcrest-mountain img{
    width: 100%;
}

/* Newsletter Form */
.sign-news-letter-pargraph{
  margin-bottom: 40px;
}
.newletter-form form.bg-white.p-4.rounded.shadow-sm {
    border-radius: 20px !important;
    box-shadow: 0 0 50px #f4ccc0 !important;
    padding: 35px !important;
}
.newletter-form input[type="text"], .newletter-form input[type="email"]{
  border: solid 1px #D9D9D9;
  border-radius: 10px;
  height: 52px;
}
.sub-heading-bold {
    font-weight: 500;
}
.newletter-form .form-check {
    margin-bottom: 8px;
}
.form-check-input[type=checkbox]{
    border-radius: .25em;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.newletter-form .form-check label.form-check-label {
    padding-top: 4px;
}
.newletter-form form.bg-white button.btn.btn-success.px-4.py-2 {
    border-color: var(--orgref-edge);
    background-color: #fff;
    background-image: none;
    color: var(--orgref-edge);
    padding: 10px 40px !important;
    font-weight: 600;
}
/* White CTA -> ORGREF on hover (same contract as .btn-outline-success). */
.newletter-form form.bg-white button.btn.btn-success.px-4.py-2:hover,
.newletter-form form.bg-white button.btn.btn-success.px-4.py-2:focus {
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
    color: #fff;
    filter: none;
}

/* Footer */
footer h5 {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 1rem;
    color: #333;
}
footer ul li a {
    color: #686868;
    font-size: 14px;
}
.copyright-sections {
    padding: 14px 0;
    border-top: solid 1px #D9D9D9;
    font-size: 14px;
    color: #686868;
}

/* Hero Section */
.hero-section img {
    width: 100%;
}

.form-check-input:checked {
    background-color: #91B6BF;
    border-color: #91B6BF;
}

/* Listing Header */
.LisitngHeading-center {
    margin: 40px 0;
}
.LisitngHeading-center h1{
  font-size: 40px;
  font-family: "Marcellus", serif;
  font-weight: 500;
  color: #286169;
}

/* Category Filters */
.card.categoryFilters {
    background-color: transparent !important;
    box-shadow: none !important;
    position: sticky;
    top: 150px;
}
.card.categoryFilters h5.mb-3 {
    border-bottom: solid 1px #D9D9D9;
    padding-bottom: 20px;
    margin-bottom: 20px !important;
    font-size: 24px;
}
.card.categoryFilters h6.mb-2 {
    margin-bottom: 20px !important;
    font-size: 18px;
}
.card.categoryFilters ul.list-unstyled {
    border-bottom: solid 1px #D9D9D9;
    padding-bottom: 20px;
}

/* Product Detail */
.product-detail {
    padding: 100px 0;
}
.product-detail ol.breadcrumb li.breadcrumb-item a{
    color: #202020;
    text-decoration: none;
}
.product-detail .sm-title-tops {
    font-weight: 500;
}
.product-detail .detailToptile {
    font-family: "Marcellus", serif;
    font-size: 56px;
    font-weight: 500;
    color: #286169;
}
p.text-muted.mb-2.productLiter {
    font-weight: 500;
}
.productRating span.text-warning {
    font-size: 25px;
}
.productRating span {
    color: #887F7F;
    font-weight: 500;
}
.ProductDetailprice h3.me-3.mb-0 {
    font-size: 34px;
    font-weight: 700;
}
.ProductDetailprice span.text-muted.text-decoration-line-through {
    color: #A8A8A8 !important;
    font-size: 28px;
    opacity: 0.8;
    font-weight: 300;
    margin: 0 10px;
}
.ProductDetailprice span.ms-2.badge {
    background-color: #E74C3C;
    padding: 15px 10px;
    font-weight: 600;
}
.quantity-wishlistflex .input-group button.btn.btn-outline-secondary {
    border: 0 !important;
    font-size: 24px;
}
.quantity-wishlistflex {
    display: flex;
    margin-bottom: 40px;
}
.quantity-wishlistflex .input-group button.btn.btn-outline-secondary:hover{
  background-color: transparent;
  color: #202020;
}
.quantity-wishlistflex .input-group input#quantity {
    border: 0;
}
.quantity-wishlistflex .input-group {
    width: 20%;
    border: solid 1px #D9D9D9;
    margin-right: 20px;
    border-radius: 8px;
}
.addtowishlist button.btn.btn-outline-secondary.btn-lg {
    border: 0;
    font-size: 16px;
    color: #060606;
}
.addtowishlist button.btn.btn-outline-secondary.btn-lg:hover{
  background-color: transparent;
  border-color: transparent;
  color: #202020;
}
button.btn.btn-outline-danger.btn-lg{
  background-color: transparent;
  border-color: transparent;
  color: #E74C3C;
  font-size: 16px;
}
.mainproductHDimage {
    height: 600px;
    margin: 0 auto;
    object-fit: contain;
    display: block;
}

.subscribe-cart-product{
  display: flex;
}
.subscribe-cart-product .d-grid.gap-2 {
    width: 60%;
    padding-right: 15px;
}
.subscribe-cart-product .subscibe-payment-btn {
    width: 40%;
}
.subscribe-cart-product .subscibe-payment-btn button.btn.btn-success.btn-lg {
    width: 100%;
}
.subscribe-cart-product .d-grid.gap-2 button {
    border: solid 1px var(--orgref-edge);
    background-color: #ffffff;
    background-image: none;
    color: var(--orgref-edge);
    font-weight: 600;
    padding: 12px 20px;
    font-weight: 500;
}
.subscribe-cart-product .d-grid.gap-2 button:hover,
.subscribe-cart-product .d-grid.gap-2 button:focus {
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
    color: #fff;
}
.subscribe-cart-product .subscibe-payment-btn button.btn.btn-success.btn-lg {
    width: 100%;
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
    padding: 12px 20px;
    font-weight: 500;
}

/* Product Reviews - Desktop */
.product-reviews {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.product-reviews h3 {
    font-size: 32px;
    font-weight: 700;
    color: #286169;
    margin-bottom: 30px;
}

.review-item {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.review-item:last-child {
    border-bottom: none;
}

.review-rating {
    font-size: 16px;
}

.review-item h6 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.review-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Write Review Form - Desktop */
.write-review {
    margin-top: 40px;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.write-review h4 {
    font-size: 24px;
    font-weight: 700;
    color: #286169;
    margin-bottom: 20px;
}

.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.rating-input input[type="radio"] {
    display: none;
}

.rating-input .star-label {
    font-size: 36px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rating-input input[type="radio"]:checked ~ .star-label,
.rating-input .star-label:hover,
.rating-input .star-label:hover ~ .star-label {
    color: #ffc107;
}

.write-review textarea {
    font-size: 16px;
}

.write-review .btn-primary {
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
}

.write-review .btn-primary:hover {
    background-color: var(--orgref-to);
    background-image: var(--orgref-bg);
    border-color: transparent;
    filter: brightness(0.94);
}

/* ================================================
   CART PAGE - DESKTOP STYLES
   ================================================ */

.cart-page {
    padding: 40px 0;
    min-height: 600px;
}

.cart-heading {
    text-align: center;
    margin-bottom: 40px;
}

.cart-heading h1 {
    font-size: 36px;
    font-weight: 400;
    color: #286169;
    font-family: "Marcellus", serif;
    margin: 0;
}

.cart-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
}

.cart-items-section {
    width: 100%;
}

/* Cart Item Card - Desktop */
.cart-item-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.cart-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cart-item-image {
    width: 120px;
    height: 150px;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
}

.cart-item-name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.cart-item-name a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cart-item-name a:hover {
    color: #286169;
}

.cart-item-description {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.cart-item-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.cart-item-meta strong {
    font-weight: 600;
}

.cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.cart-item-price-display {
    font-size: 18px;
    font-weight: 700;
    color: #286169;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #E74C3C;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cart-item-remove:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Cart Item Quantity - Desktop */
.cart-item-quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-qty-btn:hover {
    background: #f5f5f5;
    border-color: #286169;
}

.cart-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cart-qty-btn:disabled:hover {
    background: #fff;
    border-color: #ddd;
}

.cart-qty-btn svg {
    color: #333;
}

.cart-qty-input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 18px;
    color: #333;
}

/* Cart Action Buttons - Desktop */
.cart-action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.btn-cart-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 2px solid #286169;
    border-radius: 6px;
    background: #fff;
    color: #286169;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cart-action:hover {
    background: var(--orgref-bg);
    border-color: transparent;
    color: #fff;
}

.btn-cart-action svg {
    transition: color 0.2s ease;
}

.btn-cart-action:hover svg {
    color: #fff;
}

/* Cart Summary Sidebar - Desktop */
.cart-summary-sidebar {
    width: 100%;
}

.cart-summary-card {
    background: #fff;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 100px;
}

.summary-heading {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 15px;
    color: #666;
}

.summary-row span:last-child {
    font-weight: 600;
    color: #333;
}

.summary-note {
    background: #E3F2FD;
    padding: 14px;
    border-radius: 6px;
    margin: 16px 0;
}

.summary-note p {
    margin: 0;
    font-size: 13px;
    color: #286169;
    line-height: 1.5;
}

.summary-divider {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 20px 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.summary-checkout-btn {
    margin: 24px 0 16px 0;
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--orgref-bg);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-checkout:hover {
    background: var(--orgref-bg);
    filter: brightness(0.94);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 97, 105, 0.3);
}

.summary-cod {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.summary-cod p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Empty Cart - Desktop */
.cart-empty {
    text-align: center;
    padding: 100px 20px;
}

.cart-empty-icon {
    color: #ccc;
    margin-bottom: 32px;
}

.cart-empty h3 {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.cart-empty p {
    font-size: 16px;
    color: #666;
    margin-bottom: 32px;
}

.btn-start-shopping {
    display: inline-block;
    padding: 14px 40px;
    background: var(--orgref-bg);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease;
}

.btn-start-shopping:hover {
    background: var(--orgref-bg);
    filter: brightness(0.94);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 97, 105, 0.3);
}

/* ================================================
   CHECKOUT PAGE - DESKTOP STYLES
   ================================================ */

.checkout-page {
    padding: 40px 0 60px 0;
}

.checkout-heading {
    text-align: center;
    margin-bottom: 40px;
}

.checkout-heading h1 {
    font-size: 36px;
    font-weight: 400;
    color: #286169;
    font-family: "Marcellus", serif;
    margin: 0;
}

/* Step Indicators - Desktop */
.checkout-step-indicators {
    margin-bottom: 48px;
}

.step-indicators-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #E0E0E0;
    border: 3px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.step-number {
    font-size: 20px;
    font-weight: 700;
    color: #999;
    transition: color 0.3s ease;
}

.step-check {
    color: #fff;
}

.step-line {
    position: absolute;
    top: 25px;
    left: calc(50% + 25px);
    width: calc(100% - 50px);
    height: 3px;
    background: #E0E0E0;
    z-index: 1;
}

.step-indicator:last-child .step-line {
    display: none;
}

.step-label {
    font-size: 14px;
    font-weight: 500;
    color: #999;
    text-align: center;
    transition: color 0.3s ease;
}

/* Active Step - Desktop */
.step-indicator.active .step-circle {
    background: #286169;
    border-color: #286169;
    box-shadow: 0 0 0 4px rgba(40, 97, 105, 0.1);
}

.step-indicator.active .step-number {
    color: #fff;
}

.step-indicator.active .step-label {
    color: #286169;
    font-weight: 600;
}

/* Completed Step - Desktop */
.step-indicator.completed .step-circle {
    background: #286169;
    border-color: #286169;
}

.step-indicator.completed .step-number {
    display: none;
}

.step-indicator.completed .step-check {
    display: block !important;
}

.step-indicator.completed .step-label {
    color: #286169;
}

.step-indicator.completed .step-line {
    background: #286169;
}

/* Checkout Steps - Desktop */
.checkout-step {
    max-width: 800px;
    margin: 0 auto;
}

.checkout-step h4 {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 24px;
}

/* Desktop keeps inline navigation buttons visible */
.desktop-view .checkout-step .d-flex.justify-content-between {
    display: flex !important;
    gap: 16px;
}

.desktop-view .checkout-step .btn {
    padding: 12px 32px;
    font-weight: 600;
    border-radius: 8px;
}

.desktop-view .checkout-step .btn-success {
    background: linear-gradient(135deg, #91B6BF 0%, #286169 100%);
    border: none;
}

.desktop-view .checkout-step .btn-success:hover {
    opacity: 0.9;
}

.desktop-view .checkout-step .btn-outline-secondary {
    border: 2px solid #286169;
    color: #286169;
}

.desktop-view .checkout-step .btn-outline-secondary:hover {
    background: var(--orgref-bg);
    border-color: transparent;
    color: white;
}

/* Address Cards - Desktop */
.address-card {
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
}

.address-card:hover {
    border-color: #91B6BF;
    box-shadow: 0 2px 8px rgba(40, 97, 105, 0.1);
}

.address-card.selected {
    border-color: #286169;
    background: rgba(40, 97, 105, 0.02);
    box-shadow: 0 2px 12px rgba(40, 97, 105, 0.15);
}

.address-card .card-body {
    padding: 20px;
}

.new-address-card {
    min-height: 180px;
}

/* Form Styling - Desktop */
.checkout-step .form-control {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.checkout-step .form-control:focus {
    border-color: #286169;
    box-shadow: 0 0 0 4px rgba(40, 97, 105, 0.1);
}

.checkout-step .form-control.is-invalid {
    border-color: #EF4444;
}

.checkout-step .form-check-input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid #D1D5DB;
    cursor: pointer;
}

.checkout-step .form-check-input:checked {
    background-color: #286169;
    border-color: #286169;
}

/* Payment Method Cards - Desktop */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-method-card {
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.payment-method-card:hover {
    border-color: #91B6BF;
    box-shadow: 0 2px 8px rgba(40, 97, 105, 0.1);
}

.payment-method-card.selected {
    border-color: #286169;
    background: rgba(40, 97, 105, 0.02);
    box-shadow: 0 2px 12px rgba(40, 97, 105, 0.15);
}

.payment-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-card-label {
    display: block;
    padding: 20px;
    margin: 0;
    cursor: pointer;
}

.payment-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.payment-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 97, 105, 0.08);
    border-radius: 10px;
    color: #286169;
    flex-shrink: 0;
}

.payment-details {
    flex: 1;
}

.payment-title {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 4px;
}

.payment-subtitle {
    font-size: 14px;
    color: #6B7280;
}

.payment-checkmark {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E5E7EB;
    border-radius: 50%;
    color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.payment-method-card.selected .payment-checkmark {
    background: #286169;
    color: white;
}

/* Payment Info Alerts - Desktop */
.checkout-step .alert {
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid;
}

.checkout-step .alert-info {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E40AF;
}

.checkout-step .alert-success {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.checkout-step .alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Coupon Form - Desktop */
.coupon-form h5 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 16px;
}

.coupon-form .input-group {
    max-width: 400px;
}

.coupon-form .form-control {
    border: 2px solid #E5E7EB;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 12px 16px;
}

.coupon-form .btn {
    border-radius: 0 8px 8px 0;
    padding: 12px 24px;
    font-weight: 600;
}

.coupon-form .btn-outline-success {
    border: 2px solid #286169;
    color: #286169;
}

.coupon-form .btn-outline-success:hover {
    background: var(--orgref-bg);
    border-color: transparent;
    color: white;
}

/* Review Order - Step 3 Desktop */
.checkout-step h5 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 16px;
}

.checkout-step .card {
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.checkout-step .card:hover {
    border-color: #D1D5DB;
}

.checkout-step .card-body {
    padding: 20px;
}

.checkout-step .btn-sm {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
}

.checkout-step .btn-outline-secondary {
    border: 2px solid #286169;
    color: #286169;
    transition: all 0.2s ease;
}

.checkout-step .btn-outline-secondary:hover {
    background: var(--orgref-bg);
    border-color: transparent;
    color: white;
}

/* Order Items - Desktop */
.order-items .d-flex {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #E5E7EB;
}

.order-items .d-flex:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.order-items img {
    width: 70px !important;
    height: 110px !important;
    object-fit: cover;
    border-radius: 8px;
}

.order-items h6 {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 6px;
}

.order-items .text-muted {
    font-size: 13px;
    color: #6B7280;
}

.order-items .text-end {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    white-space: nowrap;
}

/* Error Alert - Desktop */
.checkout-step .alert-danger {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 15px;
    color: #991B1B;
}

.checkout-step hr {
    border-color: #E5E7EB;
    margin: 32px 0;
}

/* Subscription Plans */
body .subscribtion h3.font-script {
    font-size: 30px;
    margin-bottom: 0 !important;
    color: #202020;
}
.pink-weeklyPlan-panel {
    background-color: #FFDDD3;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    color: #202020;
}
.green-weeklyPlan-panel {
    background-color: #91B6BF;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
}
.yellow-weeklyPlan-panel {
    background-color: #FFFBE9;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
}
.weeklyPlan-panel .icon-center{
    margin-bottom: 5px;
}
.weeklyPlan-panel .tile-center-weekly {
    line-height: 15px;
}
.subscribtion {
    margin-top: 60px;
}
.weeklyPlans-Section {
    margin-top: 20px;
}
.productHDimage-sm {
    height: 150px;
    object-fit: contain;
    width: 100%;
}
.product-tabs ul.nav.nav-tabs {
    border: 0;
}

/* Cart Styles */
.shoppingBasket-bg {
    background-color: #FFDDD3;
    padding: 25px 20px !important;
}
.mini-cart-product {
    padding-left: 20%;
}
.mini-cart-product button {
    color: #202020 !important;
    font-size: 14px;
    font-weight: 500;
}
.mini-cart-product button.btn-link {
    color: #202020 !important;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}
.mini-cart-product h5.mb-0 {
    font-size: 20px;
    margin-bottom: 20px !important;
}
.mini-cart-product .input-group {
    border: solid 1px #D9D9D9;
    border-radius: 8px;
}
.mini-cart-product .input-group button.btn.btn-outline-secondary {
    border: 0 !important;
    font-size: 24px;
    font-weight: 400;
}
.mini-cart-product .input-group input.form-control.text-center {
    border: 0;
}
.mini-cart-product .input-group button.btn.btn-outline-secondary:hover {
    background-color: transparent;
    color: #202020;
}
.product-button-fixed {
    position: absolute;
    bottom: 30px;
    width: 95%;
    left: 0;
    margin: 0 auto;
    right: 0;
    display: block;
}
.product-button-fixed a.btn.btn-outline-success.btn-lg {
    border-color: #286169;
    color: #286169;
    font-size: 16px;
    padding: 14px 20px;
    font-weight: 500;
}
.product-button-fixed a.btn.btn-outline-success.btn-lg:hover{
  color: #ffffff !important;
}
.product-button-fixed a.btn.btn-success{
  font-size: 16px;
  padding: 14px 20px;
  font-weight: 500;
}

.cart-product-quantity {
    border: solid 1px #D9D9D9;
    border-radius: 8px;
    width: 140px;
}
.cart-product-quantity .input-group button.btn.btn-outline-secondary {
    border: 0 !important;
    font-size: 24px;
    font-weight: 400;
}
.cart-product-quantity .input-group input.form-control.text-center {
    border: 0;
}
.cart-product-quantity .input-group button.btn.btn-outline-secondary:hover {
    background-color: transparent;
    color: #202020;
}
.product-name-cart h6.mb-0 {
    font-size: 20px;
}
.remove-productcart {
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
tr.productTr {
    padding: 50px 0;
    margin: 30px 0;
    height: 200px;
    border-bottom: solid 1px #e9e9e9;
}
.shopping-basket-total button.btn.btn-outline-success.btn-lg {
    border-color: #286169;
    color: #286169;
    font-weight: 500;
    font-size: 17px;
}
.shopping-basket-total button.btn.btn-outline-success.btn-lg:hover{
  color: #fff;
}
.shopping-basket-total span {
    font-weight: 500;
}
.note-payment p.mb-0 {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

/* Desktop: Sticky Order Summary for Cart Page */
@media (min-width: 992px) {
  .cart-page .shopping-basket-total {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
.OrderSummary {
    background-color: #f9f9f9;
    z-index: 5;
}
input[type="text"], input[type="email"],input[type="password"]{
  height: 50px;
  box-shadow: none !important;
}
label.form-check-label a {
    color: #000;
    font-weight: 500;
}

/* Dashboard Quick Views */
.dashboardLogos img {
    width: 120px;
}
.dashboard-Tp {
    margin-bottom: 25px;
}
.cardQuickview{
  background-color: #ffffff;
  box-shadow: 0 0 20px #E2E0E0;
  border-radius: 25px;
  overflow: hidden;
}
.cardQuickview.blu-cardQuickview .rw {
    background-color: #A3D9FF;
}
.cardQuickview .rw {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    min-height: 126px;
}
.cardQuickview .rw .icon-card {
    width: 50%;
}
.cardQuickview .rw .cardCount {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    font-size: 44px;
    font-weight: 700;
}
.cardQuickview.blu-cardQuickview .rw .cardCount {
    color: #0068B2;
    opacity: 0.5;
}
.cardQuickview .quick-content {
    padding: 15px 20px 5px;
}
.cardQuickview .quick-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px;
}
.cardQuickview .quick-content p {
    font-size: 14px;
}
.cardQuickview.Org-cardQuickview .rw {
    background-color: #F9EEEB;
}
.cardQuickview.TotalOrder-cardQuickview .rw {
    background-color: #CDFFF3;
}
.cardQuickview.TotalOrder-cardQuickview .rw .cardCount {
    color: #1BC29A;
    opacity: 0.5;
}

/* Contact Page */
.contact-hero {
  background: #91b6bf;
  color: white;
}

.contact-hero h1 {
  color: white;
  font-weight: 700;
}

.contact-hero .lead {
  color: rgba(255, 255, 255, 0.9);
}

.contact-content {
  background: #fff;
}

.contact-content .card {
  border-radius: 16px;
}

.contact-content .form-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.contact-content .form-control,
.contact-content .form-control:focus {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
}

.contact-content .form-control:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.15);
}

.contact-content textarea.form-control {
  resize: vertical;
}

.contact-info {
  position: sticky;
  top: 20px;
}

.contact-info h3 {
  color: #1f2937;
  font-weight: 700;
  margin-bottom: 24px;
}

.contact-item {
  padding: 20px 0;
  border-bottom: 1px solid #e5e7eb;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: rgba(40, 97, 105, 0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item h5 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.contact-item a {
  color: #6b7280;
  transition: color 0.2s;
}

.contact-item a:hover {
  color: #10b981;
}

.contact-item p,
.contact-item .text-muted {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
}

.contact-info .card {
  border-radius: 12px;
  border: none;
  background: #f9fafb;
}

.contact-info .card h5 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.contact-info .card p {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 8px;
}

.contact-content .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact-content .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.contact-content .btn-success:disabled {
  opacity: 0.6;
  transform: none;
}

.contact-content .alert {
  border-radius: 12px;
  border: none;
  padding: 16px 20px;
}

.contact-content .alert-success {
  background-color: #dcfce7;
  color: #16a34a;
}

.contact-content .alert-danger {
  background-color: #fee2e2;
  color: #dc2626;
}

@media (max-width: 991.98px) {
  .contact-info {
    position: static;
    margin-top: 30px;
  }
}

/* Under Construction Modal */
.construction-modal {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.construction-modal .modal-header {
  padding: 1rem 1.5rem 0;
}

.construction-modal .modal-body {
  padding: 2rem 2.5rem 2.5rem;
}

.construction-modal .construction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.construction-modal .construction-icon svg {
  color: #f59e0b;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.construction-modal .modal-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.construction-modal .text-muted {
  color: #6b7280 !important;
  font-size: 15px;
}

.construction-modal .alert-info {
  background-color: #e6f2ff !important;
  border: 1px solid #b3d9ff;
}

.construction-modal .alert-info strong {
  color: #0066cc;
}

.construction-modal .alert-info small {
  color: #1e3a5f;
}

.construction-modal .btn-success {
  background-color: var(--orgref-to);
  background-image: var(--orgref-bg);
  border-color: transparent;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.construction-modal .btn-success:hover {
  background-color: var(--orgref-to);
  background-image: var(--orgref-bg);
  border-color: transparent;
  filter: brightness(0.94);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 97, 105, 0.3);
}

.construction-modal .btn-close {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.construction-modal .btn-close:hover {
  opacity: 1;
}

/* Modal animation */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
}

.modal.fade.show .modal-dialog {
  transform: none;
}

@media (max-width: 576px) {
  .construction-modal .modal-body {
    padding: 1.5rem 1.25rem 2rem;
  }

  .construction-modal .modal-title {
    font-size: 20px;
  }

  .construction-modal .text-muted {
    font-size: 14px;
  }
}

.selectedButton {
  background: var(--orgref-bg) !important;
  color: #fff;
  border: 2px solid transparent !important;
}

/* Recent orders table */
.recent-orders th {
  font-weight: 600;
  border-top: none;
  color: var(--gray-600);
}

.recent-orders td {
  vertical-align: middle;
}

/* Subscription status badges */
.badge-active {
  background-color: var(--success-light);
  color: var(--primary-color);
}

.badge-paused {
  background-color: var(--light-yellow);
  color: #856404;
}

.badge-cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

/* Calendar view for deliveries */
.calendar-day {
  height: 100px;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.calendar-day:hover {
  background-color: var(--light-peach);
}

.calendar-day.has-delivery {
  background-color: var(--light-green);
  position: relative;
}

.calendar-day.has-delivery::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50%;
  top: 5px;
  right: 5px;
}

.calendar-day .day-number {
  font-weight: 600;
}

/* Address book */
.address-card {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  height: 100%;
}

.address-card.default {
  border-color: var(--primary-color);
  background-color: var(--light-peach);
}

/* Support tickets */
.ticket-card {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.ticket-status-open {
  color: #28a745;
}

.ticket-status-closed {
  color: #dc3545;
}

/* Payment methods */
.payment-method-card {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.payment-method-card.default {
  border-color: var(--primary-color);
  background-color: var(--light-peach);
}

/* Action Cards */
.action-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background-color: var(--light-peach);
  color: var(--primary-color);
}

/* Dashboard metrics cards */
.metric-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  height: 100%;
}

.metric-card h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--primary-color);
}

.metric-card h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.metric-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

/* ============================================
   BLOG CARD STYLES
   ============================================ */

.blog-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.blog-card-image-wrapper {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 16px;
}

.blog-author,
.blog-date {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-author svg,
.blog-date svg {
  color: #9ca3af;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #286169;
  font-weight: 600;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
}

.blog-read-more:hover {
  color: #3a8469;
  gap: 12px;
}

.blog-read-more svg {
  transition: transform 0.2s ease;
}

.blog-read-more:hover svg {
  transform: translateX(4px);
}

/* ============================================
   BLOG DETAIL BOTTOM SHEET STYLES (Mobile)
   ============================================ */

.blog-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.blog-detail-overlay.active {
  opacity: 1;
  visibility: visible;
}

.blog-detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 24px 24px 0 0;
  z-index: 1051;
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-detail-sheet.open {
  transform: translateY(0);
}

.blog-sheet-handle {
  padding: 12px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.handle-bar {
  width: 40px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
}

.blog-sheet-header {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 8px;
}

.blog-sheet-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.blog-sheet-close:hover {
  background: #e5e7eb;
}

.blog-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 40px;
  -webkit-overflow-scrolling: touch;
}

.blog-detail-image-wrapper {
  margin: 0 -20px 20px;
}

.blog-detail-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-detail-title {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.3;
}

.blog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #6b7280;
}

.blog-detail-author,
.blog-detail-date,
.blog-detail-views {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-detail-excerpt {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
}

.blog-detail-content {
  font-size: 15px;
  color: #374151;
  line-height: 1.8;
}

.blog-detail-content p {
  margin-bottom: 16px;
}

.blog-detail-tags {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.blog-detail-tags h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  background: #f3f4f6;
  color: #374151;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

footer a {
  text-decoration: none;
}

.mobile-filter-sheet{
  display: none;
}

/* Hide dashboard floating bottom-sheet menu button (kept in code for future use) */
.dashboard-mobile-menu {
  display: none !important;
}

/* Mobile drawer - dashboard nav active link */
.mobile-nav-link.active {
  background-color: rgba(40, 97, 105, 0.08);
  color: #286169;
  font-weight: 600;
}

.mobile-nav-link svg {
  vertical-align: middle;
}

/* WhatsApp Floating Button - Global (all screen sizes) */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.whatsapp-float:active {
  transform: scale(0.95);
}

.whatsapp-float svg {
  color: #fff;
}

/* ================================================
   ORGREF — site-wide subscribe CTA
   `.btn-subscribe-now-mobile` sits in the global mobile drawer (every page) but
   was only styled inside the /subscribe-now page's own <style> block, so it
   rendered unstyled everywhere else. Defined here so the drawer CTA is ORGREF
   on every route. Same for the desktop header variant.
   ================================================ */
.btn-subscribe-now,
.btn-subscribe-now-mobile {
  background: var(--orgref-bg);
  color: #fff !important;
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-subscribe-now {
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
}

.btn-subscribe-now-mobile {
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 16px;
  box-shadow: var(--orgref-shadow);
}

.btn-subscribe-now:hover,
.btn-subscribe-now-mobile:hover {
  background: var(--orgref-bg);
  color: #fff !important;
  filter: brightness(0.94);
}


/* ================================================
   ORGREF brand chrome utilities
   Used in place of Bootstrap's .bg-success / .text-success / .bg-success-subtle
   wherever the green was BRANDING (wizard steps, tabs, panel headers, plan
   badges, prices, discounts) rather than STATUS. Genuine status feedback
   ("Phone verified!", "Delivery available!", the Paid badge, in-stock ticks)
   deliberately stays green, and the WhatsApp button keeps its official
   #25D366, so the success signal still reads as a success signal.
   ================================================ */
.brand-fill {
  background: var(--orgref-bg) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.brand-text {
  color: var(--orgref-edge) !important;
}

.brand-soft {
  background-color: rgba(40, 97, 105, 0.10) !important;
  color: var(--orgref-edge) !important;
}

/* Bootstrap's .border-success is used purely as a "this card is selected" marker
   (address cards, plan cards, loyalty tier). Brand it rather than rewriting the
   JS that toggles the class. */
.border-success {
  border-color: var(--orgref-edge) !important;
}