/* Buzi Checkout — Web 2.4 (Henri, 09.10.2026): the shop's own pages on a phone, and the order buttons. */

/* "Qyteti": the county's cities, looking like the other fields, across the whole row (the 1-click popup too) */
.woocommerce form .buzi-city-row,
.wpcbn-area .buzi-city-row {
  float: none !important;
  clear: both;
  width: 100% !important;
  max-width: 100% !important;
  /* the 1-click popup lays the fields out on a two-column grid */
  grid-column: 1 / -1;
}
.woocommerce form .buzi-city-row .woocommerce-input-wrapper,
.wpcbn-area .buzi-city-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce form .buzi-city-select,
.wpcbn-area .buzi-city-select {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #d5d9df;
  border-radius: 4px;
  background-color: #fff;
  color: inherit;
  font-size: 16px;
  line-height: 1.3;
}

/* My account → Orders: room between "Shiheni" and "Ndiq porosinë" (Web 2.4 §3) */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-table--order-details .order-actions-button,
.woocommerce-order-details .order-again .button {
  margin: 4px 8px 4px 0 !important;
}
.woocommerce-orders-table__cell-order-actions .button:last-child { margin-right: 0 !important; }

@media (max-width: 768px) {
  /* ---- My account: the menu is one line that scrolls sideways with a finger ---- */
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 !important;
    padding: 4px 2px 8px !important;
    list-style: none !important;
    border: 0 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    scroll-snap-align: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li::before,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li::after,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a::after { display: none !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 16px !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 999px;
    background: #fff;
    font-size: 15px !important;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    border-color: #e3342f !important;
    background: #e3342f;
    color: #fff !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }

  /* ---- My account → Orders: one card per order — number, date, status, total, the two buttons ---- */
  .woocommerce table.woocommerce-orders-table,
  .woocommerce table.woocommerce-orders-table tbody { display: block !important; width: 100%; border: 0 !important; }
  .woocommerce table.woocommerce-orders-table thead { display: none !important; }
  .woocommerce table.woocommerce-orders-table tbody tr {
    display: block !important;
    margin: 0 0 14px;
    padding: 14px 14px 12px;
    border: 1px solid #e4e7eb !important;
    border-radius: 12px;
    background: #fff !important;
  }
  .woocommerce table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
    display: flex !important;
    align-items: baseline;
    gap: 6px;
    padding: 0 0 8px !important;
    border: 0 !important;
    background: none !important;
    font-size: 17px;
    font-weight: 700;
    text-align: left !important;
  }
  .woocommerce table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before {
    content: attr(data-title);
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
  }
  .woocommerce table.woocommerce-orders-table tbody td {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 4px;
    padding: 6px 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 15px;
    text-align: right !important;
  }
  .woocommerce table.woocommerce-orders-table tbody td::before {
    content: attr(data-title) !important;
    float: none !important;
    margin-right: auto;
    padding-right: 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
  }
  .woocommerce table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
    padding-top: 12px !important;
  }
  .woocommerce table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before { display: none !important; }
  .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    flex: 1 1 140px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0 !important;
    font-size: 15px !important;
  }

  /* ---- "Faleminderit" / an order's page: the details one under the other ---- */
  .woocommerce ul.woocommerce-order-overview {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
  }
  .woocommerce ul.woocommerce-order-overview li {
    /* the theme makes each detail half the width (ul.order_details > li: flex 0 0 50%) */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef0f3 !important;
    font-size: 14px !important;
    text-transform: none !important;
  }
  .woocommerce ul.woocommerce-order-overview li strong {
    display: block;
    min-width: 0;
    margin: 0 !important;
    font-size: 15px !important;
    text-align: right;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .woocommerce ul.woocommerce-order-overview { margin-left: 0 !important; margin-right: 0 !important; }
  .woocommerce .woocommerce-customer-details .col2-set,
  .woocommerce .woocommerce-customer-details .woocommerce-columns--2 { display: block !important; }
  .woocommerce .woocommerce-customer-details .col2-set .col-1,
  .woocommerce .woocommerce-customer-details .col2-set .col-2,
  .woocommerce .woocommerce-customer-details .woocommerce-column {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
  }
  .woocommerce .woocommerce-table--order-details th,
  .woocommerce .woocommerce-table--order-details td { font-size: 15px !important; }

  /* ---- buttons a finger can press, fields iPhone does not zoom ---- */
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce .woocommerce-message .button,
  .woocommerce .woocommerce-info .button,
  .woocommerce-notices-wrapper .button {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
  }
  .woocommerce .select2-container .select2-selection--single { min-height: 44px; }

  /* ---- the theme's small print on these pages (13 px): 14 px at least ---- */
  .woocommerce-breadcrumb,
  .woocommerce-breadcrumb a,
  .woocommerce .woocommerce-message .button,
  .woocommerce .woocommerce-info .button,
  .woocommerce-notices-wrapper .button,
  .woocommerce-info .info-message-subtitle,
  .woocommerce-info .info-message-subtitle a,
  .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text,
  .woocommerce-terms-and-conditions-wrapper a,
  .place-order-button-wrapper .review-order-totals th { font-size: 14px !important; }
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td { font-size: 15px !important; }

  /* ---- the cart: the update button across, the totals readable ---- */
  .woocommerce-cart .woocommerce-cart-form .actions .button { width: 100%; }
  .woocommerce-cart .cart_totals .shop_table th,
  .woocommerce-cart .cart_totals .shop_table td { font-size: 15px !important; }
}