/* ==========================================================================
   Bikaoo — cascading address picker (Province → City → Area)
   Styles the selects on the classic checkout and the account address book so
   they match the theme. The COD form carries its own styles already.
   ========================================================================== */

.woocommerce form .form-row select.bikaoo-address-select,
.woocommerce-page form .form-row select.bikaoo-address-select,
.bikaoo-address__city select,
.bikaoo-address__area select,
.bikaoo-address__area input[type="text"],
.bikaoo-address__province select{
  width:100%;
  padding:1.4rem 4rem 1.4rem 1.6rem;
  font-family:inherit;font-size:1.5rem;line-height:1.4;
  color:#151719;background-color:#fff;
  border:1px solid rgba(23,25,27,.2);
  border-radius:10px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23151719' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.4rem center;
  transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
}
.bikaoo-address__area input[type="text"]{
  background-image:none;padding-right:1.6rem;
}
.bikaoo-address__city select:focus,
.bikaoo-address__area select:focus,
.bikaoo-address__area input:focus,
.bikaoo-address__province select:focus{
  outline:none;border-color:#151719;box-shadow:0 0 0 3px rgba(23,25,27,.07);
}

/* a select still waiting on its parent choice */
.bikaoo-address__city select.is-waiting,
.bikaoo-address__area select.is-waiting,
select.is-waiting{
  opacity:.55;cursor:not-allowed;background-color:#f7f3ec;color:#77716a;
}

/* ---- the same three fields inside the COD form ---- */
.bikaoo-cod select.is-waiting{
  opacity:.55;cursor:not-allowed;background-color:#f7f3ec;color:#77716a;
}
.bikaoo-cod__field input[name="landmark"]{width:100%;}

/* ---- classic checkout, brought in line with the theme ---- */
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout .form-row label{
  display:block;margin-bottom:.6rem;
  font-size:1.15rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#151719;
}
.woocommerce-checkout .form-row .required{color:#ff735f;text-decoration:none;border:0;}
.woocommerce-checkout .form-row{margin-bottom:1.8rem;}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{flex:1 1 32rem;}

/* two-up on wider screens, matching Daraz's grouping */
@media screen and (min-width:750px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;
  }
  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout .bikaoo-address__area,
  .woocommerce-checkout #billing_address_1_field,
  .woocommerce-checkout #billing_address_2_field,
  .woocommerce-checkout #shipping_address_1_field,
  .woocommerce-checkout #shipping_address_2_field{grid-column:1 / -1;}
}

/* WooCommerce hides the address_2 label by default; we use it for the landmark */
.woocommerce-checkout .bikaoo-address__label,
.woocommerce-address-fields .bikaoo-address__label{
  position:static!important;width:auto!important;height:auto!important;
  margin:0 0 .6rem!important;overflow:visible!important;clip:auto!important;
  clip-path:none!important;white-space:normal!important;
  display:block;font-size:1.15rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#151719;
}

/* Country is fixed to the store's own, so its row is hidden. WooCommerce
   still renders a hidden input inside it, which keeps the value posting. */
.woocommerce-checkout .bikaoo-address__country,
.woocommerce-address-fields .bikaoo-address__country,
.woocommerce form .form-row.bikaoo-address__country{
  display:none !important;
}

/* Should any of these fields be handed to select2 by another plugin, match
   its box to the plain selects rather than let it fall back to its own look. */
.bikaoo-address__province .select2-container .select2-selection--single,
.bikaoo-address__city .select2-container .select2-selection--single,
.bikaoo-address__area .select2-container .select2-selection--single{
  height:auto;padding:1.4rem 1.6rem;
  border:1px solid rgba(23,25,27,.2);border-radius:10px;background-color:#fff;
}
.bikaoo-address__province .select2-container .select2-selection__rendered,
.bikaoo-address__city .select2-container .select2-selection__rendered,
.bikaoo-address__area .select2-container .select2-selection__rendered{
  padding:0;line-height:1.4;font-size:1.5rem;color:#151719;
}
.bikaoo-address__province .select2-container .select2-selection__arrow,
.bikaoo-address__city .select2-container .select2-selection__arrow,
.bikaoo-address__area .select2-container .select2-selection__arrow{
  height:100%;right:1.1rem;
}