/*
 Theme Name:   Astra_Child_4_GoldenGhat
 Theme URI:    Astra_Child_4_GoldenGhat
 Description:  Mainly for including the Interakt supplied WhatsApp Chat widget in the site and to enforce mobile number validation on checkout.
 Author:       Siby Plavuvachathil Varkey
 Author URI:   https://natureandlife.in
 Template:     astra
 Version:      1.0.0
*/

/* 🔖 Tracking Status Badges */
.gg-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.gg-shipped, .gg-with-courier     { background-color: #28a745; } /* Green */
.gg-in-transit, .gg-pre-shipping  { background-color: #17a2b8; } /* Blue */
.gg-delivered, .gg-reached-destination { background-color: #6f42c1; } /* Purple */
.gg-pending, .gg-returned         { background-color: #ffc107; } /* Yellow */
.gg-cancelled, .gg-booked, .gg-refunded { background-color: #dc3545; } /* Red */

/* 📦 Tracking Form Container */
.woocommerce-account .track-order-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff8f0;
  border: 1px solid #e0c8a0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: 'Mukti Narrow', sans-serif;
  box-sizing: border-box;
}

.woocommerce-account .track-order-container h2 {
  color: #8b4513;
  font-size: 22px;
  margin-bottom: 10px;
}

/* 🧭 Tabs and Buttons */
.woocommerce-account .tabs button {
  margin-right: 10px;
  padding: 10px 20px;
  background-color: #007c3e;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.woocommerce-account .tab-content {
  margin-top: 20px;
}

/* 📋 Tracking Results */
.woocommerce-account .tracking-result p {
  background: #f9f9f9;
  padding: 10px;
  border-left: 4px solid #007c3e;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
}

/* 🔗 Tracking Button */
.woocommerce-account .track-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #007c3e;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

/* 📱 Mobile Responsiveness */
@media screen and (max-width: 600px) {
  .woocommerce-account .track-order-container {
    padding: 10px;
    font-size: 15px;
  }

  .woocommerce-account .tabs button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 🧾 Legacy Tracking Container (if still used elsewhere) */
.tracking-container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}

.tracking-container a {
    color: #0073aa;
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    .tracking-container {
        padding: 10px;
        font-size: 15px;
    }
}

.shipment-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0;
  padding: 10px;
  background: #fdf6e3;
  border-radius: 8px;
  font-family: 'Mukti Narrow', sans-serif;
}

.timeline-step {
  flex: 1 1 120px;
  text-align: center;
  padding: 10px;
  color: #999;
  position: relative;
  font-size: 14px;
}

.timeline-step.completed {
  color: #007c3e;
  font-weight: bold;
}

.timeline-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  width: 20px;
  height: 2px;
  background: #ccc;
  transform: translateY(-50%);
}

.timeline-step:last-child::after {
  display: none;
}

@media screen and (max-width: 600px) {
  .shipment-timeline {
    flex-direction: column;
  }

  .timeline-step {
    margin-bottom: 10px;
  }

  .timeline-step::after {
    display: none;
  }
}

.gg-address-block {
  background: #f9f9f9;
  border-left: 4px solid #007cba;
  padding: 12px 16px;
  margin: 20px 0;
  font-family: 'Segoe UI', sans-serif;
  border-radius: 6px;
}

.gg-address-block h3 {
  margin-top: 0;
  font-size: 16px;
  color: #333;
}

.gg-address-lines {
  margin-top: 8px;
}

.gg-address-line {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.gg-shipment-viewer ul {
  list-style: disc;
  margin-left: 20px;
}
.gg-shipment-viewer h3, .gg-shipment-viewer h4 {
  margin-bottom: 5px;
}
.order_actions .gg-update-shipment::after {
    content: "🚚"; /* Or use Dashicons */
    font-size: 16px;
}
#gg-shipment-modal {
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    border-radius: 8px;
    width: 400px;
}
#gg-shipment-modal h2 {
    margin-top: 0;
}
#gg-shipment-modal label {
    display: block;
    margin-top: 10px;
}
#gg-shipment-modal input, #gg-shipment-modal select {
    width: 100%;
}
#gg-shipment-modal button {
    margin-top: 15px;
    margin-right: 10px;
}
.order_actions .gg-update-shipment::after {
    content: "🚚"; /* or use Dashicons like \f174 */
    font-size: 16px;
    margin-left: 4px;
}
.gg-shipment-modal label input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.gg-shipment-modal label {
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
    font-weight: normal;
}
.gg-shipment-modal label {
    padding-left: 4px;
    font-size: 14px;
}
/* Scope to modal only */
#gg-shipment-modal label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
}

#gg-shipment-modal input[type="checkbox"],
#gg-shipment-modal input[type="radio"] {
    width: auto;
    height: 16px;
    margin: 0;
    vertical-align: middle;
}
.gg-tracking-box { background: #f9f9f9; padding: 20px; border-radius: 8px; }
.gg-tracking-timeline li { margin-bottom: 8px; font-family: monospace; }
.gg-thankyou { margin-top: 20px; font-style: italic; color: #555; }