body {
      font-family: 'Poppins', sans-serif;
      color: #333;
      background-color: #f8fafc;
    }

    .hero-section {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2017/07/31/22/42/fish-2561197_1280.jpg');
      background-size: cover;
      background-position: center;
      min-height: 70vh;
    }

    .section-header {
      position: relative;
      display: inline-block;
      margin-bottom: 2rem;
    }

    .section-header::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      height: 3px;
      width: 60px;
      background-color: #0891b2;
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background-color: #0891b2;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .product-card {
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .category-card {
      transition: transform 0.3s;
    }

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

    .featured-carousel .slick-slide {
      margin: 0 10px;
    }

    .featured-carousel .slick-prev,
    .featured-carousel .slick-next {
      z-index: 1;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    .featured-carousel .slick-prev:before,
    .featured-carousel .slick-next:before {
      color: #0891b2;
      font-size: 20px;
    }

    .featured-carousel .slick-prev {
      left: -15px;
    }

    .featured-carousel .slick-next {
      right: -15px;
    }

    .auth-tabs .tab {
      cursor: pointer;
      transition: all 0.3s;
    }

    .auth-tabs .tab.active {
      border-bottom: 2px solid #0891b2;
      color: #0891b2;
    }

    .form-input {
      transition: border 0.3s, box-shadow 0.3s;
    }

    .form-input:focus {
      border-color: #0891b2;
      box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2);
    }

    .loader {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #0891b2;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .order-timeline-item {
      position: relative;
      padding-bottom: 20px;
      padding-left: 30px;
      border-left: 2px dashed #cbd5e1;
    }

    .order-timeline-item:last-child {
      border-left: 2px solid transparent;
    }

    .order-timeline-item .timeline-point {
      position: absolute;
      left: -9px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      border: 2px solid #0891b2;
    }

    .order-timeline-item.active .timeline-point {
      background: #0891b2;
    }

    .order-timeline-item.completed .timeline-point {
      background: #10b981;
      border-color: #10b981;
    }

    #map {
      height: 300px;
      width: 100%;
      border-radius: 8px;
    }
    
    .custom-checkbox-container {
      display: block;
      position: relative;
      padding-left: 30px;
      cursor: pointer;
      user-select: none;
    }

    .custom-checkbox-container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
    }

    .custom-checkbox-container:hover input ~ .checkmark {
      background-color: #f1f5f9;
    }

    .custom-checkbox-container input:checked ~ .checkmark {
      background-color: #0891b2;
      border-color: #0891b2;
    }

    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    .custom-checkbox-container input:checked ~ .checkmark:after {
      display: block;
    }

    .custom-checkbox-container .checkmark:after {
      left: 7px;
      top: 3px;
      width: 6px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .notification-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      padding: 2px 5px;
      border-radius: 50%;
      background-color: #ef4444;
      color: white;
      font-size: 0.7rem;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Mobile menu animation */
    .mobile-menu {
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
    }

    .mobile-menu.open {
      transform: translateX(0);
    }

    /* Temperature graph styling */
    .temp-compliance-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .temp-compliance-badge::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
    }

    .temp-compliance-badge.compliant {
      background-color: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }

    .temp-compliance-badge.compliant::before {
      background-color: #10b981;
    }

    .temp-compliance-badge.warning {
      background-color: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
    }

    .temp-compliance-badge.warning::before {
      background-color: #f59e0b;
    }

    .temp-compliance-badge.violated {
      background-color: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }

    .temp-compliance-badge.violated::before {
      background-color: #ef4444;
    }

    .rating-stars i {
      cursor: pointer;
      transition: color 0.2s;
    }

    .rating-stars i:hover {
      color: #f59e0b;
    }

    /* Dashboard sidebar styling */
    .sidebar {
      transition: width 0.3s, transform 0.3s;
    }

    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
      }

      .sidebar.open {
        transform: translateX(0);
      }
    }

    .sidebar-link {
      border-left: 3px solid transparent;
      transition: all 0.2s;
    }

    .sidebar-link:hover, .sidebar-link.active {
      background-color: rgba(8, 145, 178, 0.1);
      border-left-color: #0891b2;
      color: #0891b2;
    }

    /* Payment methods styling */
    .payment-method {
      transition: all 0.2s;
    }

    .payment-method:hover {
      transform: translateY(-2px);
    }

    .payment-method.selected {
      border-color: #0891b2;
      background-color: rgba(8, 145, 178, 0.05);
    }

    .pulse-animation {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(8, 145, 178, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(8, 145, 178, 0);
      }
    }

    /* KYC upload area */
    .upload-area {
      border: 2px dashed #cbd5e1;
      transition: border-color 0.3s;
    }

    .upload-area:hover {
      border-color: #0891b2;
    }

    .upload-area.dragging {
      border-color: #0891b2;
      background-color: rgba(8, 145, 178, 0.05);
    }