/* FoodOrd Mobile Cart - Fixed footer cart for screens 1024px and below */

/* Mobile Cart visible only on screens 1024px and below */
:root {
  --background-color: #f7f7f7;
  --primary-color: #c9386f;
  --primary-hover: #b92a61;
  --text-color: #323232;
  --text-hover: #313131;
  --secondary-text: #6b6b6b;
  --button-bg: #c9386f;
  --button-text-color: #ffffff;
  --button-on-hover: #b92a61;
  --header-bg: #ffffff;
  --footer-bg: #ffffff;
  --footer-bottom-bg: #ffffff;
  --border-color: #f4f4f4;
}

.foodord-mobile-cart,
.foodord-mobile-cart__modal {
  display: none;
}

.foodord-mobile-cart.foodord-mobile-cart--hidden {
  display: none;
}

@media (max-width: 1024px) {

  /* Mobile Cart Container - Fixed Footer */
  .foodord-mobile-cart {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 16px;
    right: 16px;
    z-index: 9999;
  }

  /* Mobile Cart when hidden */
  .foodord-mobile-cart.hidden {
    transform: translateY(100%);
  }

  /* Mobile Cart Header - Button Style */
  .foodord-mobile-cart__header {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--button-bg);
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    transition: background-color 0.2s ease;
  }

  .foodord-mobile-cart__header:hover {
    background: var(--button-on-hover);
  }

  .foodord-mobile-cart__header:active {
    background: var(--button-bg);
  }

  /* Cart Info - Left side */
  .foodord-mobile-cart__info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Cart Count Badge */
  .foodord-mobile-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    min-width: 24px;
  }

  /* Cart Title */
  .foodord-mobile-cart__title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
  }

  .foodord-mobile-cart__total .woocommerce-Price-amount {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
  }

  .foodord-mobile-cart__total .woocommerce-Price-currencySymbol,
  .foodord-mobile-cart__total .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    color: #ffffff;
  }

  /* Bottom Footer - Checkout Button Container */
  .foodord-mobile-cart__bottom-footer {
    padding: 12px 16px;
    display: none;
  }

  /* Show bottom footer only when cart is expanded */
  .foodord-mobile-cart.expanded .foodord-mobile-cart__bottom-footer {
    display: block;
  }

  /* Bottom Checkout Button - Same style as header */
  .foodord-mobile-cart__bottom-checkout-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: #d63384;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .foodord-mobile-cart__bottom-checkout-btn:hover {
    background: #b92a61;
  }

  .foodord-mobile-cart__bottom-checkout-btn:active {
    background: #a02456;
  }

  .foodord-mobile-cart__bottom-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;
  }

  /* Full Screen Modal - Separate from cart button */
  .foodord-mobile-cart__modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(var(--foodord-vh, 1vh) * 100);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }

  .foodord-mobile-cart__modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  /* Show modal footer when active */
  .foodord-mobile-cart__modal.active .foodord-mobile-cart__footer {
    display: block;
  }

  /* Modal Overlay */
  .foodord-mobile-cart__modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Modal Content - Full screen white area */
  .foodord-mobile-cart__modal-content {
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Modal Header */
  .foodord-mobile-cart__modal-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
  }

  .foodord-mobile-cart__modal-title {
    margin: 0;
  }

  .foodord-mobile-cart__close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #323232;
    cursor: pointer;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  .foodord-mobile-cart__close-btn:hover {
    background: #f3f4f6;
  }

  /* Modal Body */
  .foodord-mobile-cart__modal-body {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    padding: 16px;
  }

  /* Modal Footer */
  .foodord-mobile-cart__modal .foodord-mobile-cart__footer {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
    display: block;
    /* Always show in modal */
  }

  .foodord-mobile-cart__modal .foodord-mobile-cart__actions {
    display: flex;
    gap: 12px;
  }

  /* Checkout Button in Modal - Same style as header */
  .foodord-mobile-cart__modal .foodord-mobile-cart__checkout-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: var(--button-bg);
    color: #ffffff;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .foodord-mobile-cart__modal .foodord-mobile-cart__checkout-btn:hover {
    background: var(--button-on-hover);
  }

  .foodord-mobile-cart__modal .foodord-mobile-cart__checkout-btn:active {
    background: var(--button-bg);
  }

  .foodord-mobile-cart__modal .foodord-mobile-cart__checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;
  }

  /* Cart Items Container */
  .foodord-mobile-cart__items {
    padding: 0;
  }

  /* Individual Cart Item */
  .foodord-mobile-cart__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .foodord-mobile-cart__item:last-child {
    border-bottom: none;
  }

  /* Product Image */
  .foodord-mobile-cart__item-image {
    flex-shrink: 0;
    width: 70px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
  }

  .foodord-mobile-cart__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Product Details */
  .foodord-mobile-cart__item-details {
    flex: 1;
    min-width: 0;
  }

  .foodord-mobile-cart__item-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: underline;
  }

  .foodord-mobile-cart__item-price {
    font-size: 16px;
    margin: 0;
  }

  .foodord-mobile-cart__note {
    margin-top: 6px;
  }

  .foodord-mobile-cart__note-toggle {
    font-size: 14px;
    font-weight: 400;
    appearance: none;
    text-decoration: underline;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--text-color);
    cursor: pointer;
  }

  .foodord-mobile-cart__note-toggle:hover,
  .foodord-mobile-cart__note-toggle:focus {
    text-decoration: underline;
  }

  .foodord-mobile-cart__note-form {
    margin-top: 6px;
    padding: 10px 10px 12px 0;
    position: relative;
    padding-bottom: 52px;
  }

  .foodord-mobile-cart__note-input {
    width: 100%;
    min-height: 52px;
    resize: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 8px;
    background: #ffffff;
    font-family: inherit;
  }

  .foodord-mobile-cart__note-input:focus {
    outline: none;
  }

  .foodord-mobile-cart__note-actions {
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: absolute;
    right: 0;
    bottom: 30px;
  }

  .foodord-mobile-cart__note-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .foodord-mobile-cart__note-btn--cancel {
    color: #6b7280;
  }

  .foodord-mobile-cart__note-btn--add {
    color: var(--text-color);
  }

  .foodord-mobile-cart__note-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .foodord-mobile-cart__note-display {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #d9e4ff78;
  }

  .foodord-mobile-cart__note-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 4px;
  }

  .foodord-mobile-cart__note-text {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    word-break: break-word;
  }

  .foodord-mobile-cart__note-feedback {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #b91c1c;
  }

  .foodord-mobile-cart__note[data-note-saving="1"] .foodord-mobile-cart__note-btn {
    opacity: 0.65;
    cursor: wait;
  }

  /* Product Toppings */
  .foodord-mobile-cart__item-toppings {
    font-size: 15px;
    font-weight: 400;
    margin: 2px 0 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Quantity */
  .foodord-mobile-cart__item-quantity {
    position: relative;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
  }

  .foodord-mobile-cart__item-quantity:hover {
    background: #f9fafb;
    border-color: #d1d5db;
  }

  .foodord-mobile-cart__item-quantity:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  /* Empty Cart State */
  .foodord-mobile-cart__empty {
    padding: 24px 16px;
    text-align: center;
  }

  .foodord-mobile-cart__empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
  }

  .foodord-mobile-cart__empty-text {
    margin: 0 0 4px 0;
  }

  .foodord-mobile-cart__empty-subtext {
    margin: 0;
  }

  /* Mobile Cart Footer - Action Buttons */
  .foodord-mobile-cart__footer {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    display: none;
    /* Only visible in expanded state */
  }

  /* Summary Section - Subtotal and Delivery Fee */
  .foodord-mobile-cart__summary {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f4f4f4;
  }

  .foodord-mobile-cart__fees {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #f4f4f4;
  }

  .foodord-mobile-cart__fee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: #0f172a;
  }

  .foodord-mobile-cart__fee-label {
    flex: 1;
    margin-right: 12px;
  }

  .foodord-mobile-cart__fee-amount {
    color: #047857;
    font-weight: 600;
  }

  /* Minimum order notice */
  .foodord-mobile-cart__notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin: 8px 0 0 0;
    border-radius: 6px;
  }

  .foodord-mobile-cart__notice--warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: 14px;
    color: #9a3412;
  }

  .foodord-mobile-cart__notice svg {
    flex-shrink: 0;
    margin-top: 1px;
  }

  .foodord-mobile-cart__subtotal,
  .foodord-mobile-cart__delivery-fee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
  }

  .foodord-mobile-cart.expanded .foodord-mobile-cart__footer {
    display: block;
  }

  .foodord-mobile-cart__actions {
    display: flex;
    gap: 8px;
  }

  /* Clear Cart Button */
  .foodord-mobile-cart__clear-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .foodord-mobile-cart__clear-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
  }

  .foodord-mobile-cart__clear-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Checkout Button - Same style as header */
  .foodord-mobile-cart__checkout-btn {
    flex: 2;
    padding: 12px 16px;
    border: none;
    background: #d63384;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .foodord-mobile-cart__checkout-btn:hover {
    background: #b92a61;
  }

  .foodord-mobile-cart__checkout-btn:active {
    background: #a02456;
  }

  .foodord-mobile-cart__checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;
  }

  /* Body padding bottom when mobile cart is visible */
  body.has-foodord-mobile-cart {
    padding-bottom: 60px;
    /* Space for header height only */
  }

  body.has-foodord-mobile-cart.mobile-cart-expanded {
    overflow: hidden;
    /* Disable body scroll in expanded state */
  }

  /* Hide mobile cart on desktop */
  @media (min-width: 1025px) {
    .foodord-mobile-cart {
      display: none;
    }

    body.has-foodord-mobile-cart {
      padding-bottom: 0;
    }
  }

  /* Loading state */
  .foodord-mobile-cart.loading .foodord-mobile-cart__header {
    opacity: 0.7;
    pointer-events: none;
  }

  .foodord-mobile-cart.loading .foodord-mobile-cart__count {
    background: #9ca3af;
  }



  /* Responsive adjustments for very small screens */
  @media (max-width: 480px) {
    .foodord-mobile-cart__header {
      padding: 13px 12px;
    }

    .foodord-mobile-cart__count {
      width: 28px;
      height: 28px;
    }

    .foodord-mobile-cart__item {
      padding: 10px 12px;
      gap: 10px;
    }

    .foodord-mobile-cart__item-image {
      width: 70px;
      height: 60px;
    }
  }

  /* Hide desktop sidebar when mobile cart is active */
  .has-foodord-mobile-cart .foodord-layout__sidebar,
  .has-foodord-mobile-cart .foodord-sidebar {
    display: none;
  }

  .has-foodord-mobile-cart .foodord-layout__content,
  .has-foodord-mobile-cart .site-main {
    width: 100%;
    max-width: 100%;
  }
}