/*
Theme Name: Glozin Child
Theme URI: https://wpglozin.com/
Author: UIXThemes
Author URI: https://uix.store
Description: Multipurpose WooCommerce WordPress Theme
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 7.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glozin
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: glozin
*/

/* ===============================
   ADD-ON REMINDER POPUP (FIXED)
=============================== */

#addon-reminder-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#addon-reminder-modal.active {
  display: flex;
}

.addon-reminder-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.addon-reminder-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 520px;
  width: 90%;
  z-index: 2;
}

.addon-reminder-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
}

.addon-reminder-list {
  margin: 16px 0;
  padding-left: 18px;
}

.addon-reminder-list li {
  margin-bottom: 8px;
  font-size: 14px;
}

.addon-reminder-continue {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: #673de6;
  color: #fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
}


/* =========================================
   ADD-ON POPUP — WIDER + 4 COLUMN GRID - Popup only
========================================= */

/* Make popup wider */
#addon-reminder-modal .addon-reminder-box {
  max-width: 900px;   /* was ~520px earlier */
  width: 95%;
}

/* Grid layout ONLY inside popup */
#addon-reminder-modal .event-addon-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;

  max-height: 460px;   /* vertical scroll area */
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px;  /* scrollbar space */
}

/* Cards fill grid cells */
#addon-reminder-modal .event-addon-card {
  flex: unset !important;
  width: 100% !important;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  #addon-reminder-modal .event-addon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
  #addon-reminder-modal .event-addon-grid {
    grid-template-columns: 1fr;
    max-height: 65vh;
  }
}



/* =========================================
CHECKOUT CARDS
========================================= */


.checkout-booking-summary {
  padding: 18px;
  margin-bottom: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Shared row layout (Order Details + Customizations) */
/* .booking-summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
 */


.checkout-booking-summary .booking-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.checkout-booking-summary .booking-summary-row {
  display: flex;
  justify-content: space-between;
  color: #555;
}


/* Keep borders for headings */
.booking-heading-row th,
.booking-heading-row td {
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
}

/* Remove borders for info rows */
.booking-summary-row th,
.booking-summary-row td {
  border-bottom: none;
}

/* Align edit button */
.booking-edit {
  text-align: right;
}


/* --- Column widths --- */
.shop_table tr.fee th.booking-data-row,
.shop_table tr.fee th.booking-heading-row {
  width: 40%;
}

.shop_table tr.fee td.booking-data-row,
.shop_table tr.fee td.booking-heading-row {
  width: 0%;
  text-align: right;
}

/* --- Headings --- */
.booking-heading-row {
  font-weight: 600;
  border-bottom: 1px solid #e5e5e5;
}

/* --- Data rows --- */
.booking-data-row {
  font-size: 14px;
  font-weight: 400;
  color: #444;
  border-bottom: none;
  padding: 10px 0 0px 0;
}

/* --- Edit button visibility (important) --- */
.edit-booking-btn {
  display: inline-block !important;
  font-size: 13px;
  padding: 4px 10px;
  background: none;
  border: 1px solid #ccc;
  cursor: pointer;
}

.booking-edit-cell {
  text-align: right;
}

.edit-booking-btn{
    top:12px;
    right:12px;
    background:none;
    border:none;
    padding:0;
    font-size:14px;
    font-weight:500;
    color:#6b63ff;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:all 0.2s ease;
}

/* Remove default button hover */
.edit-booking-btn:hover,
.edit-booking-btn:focus,
.edit-booking-btn:active{
    background:none !important;
    border:none !important;
    outline:none;
    box-shadow:none;
}

/* Subtle hover */
.edit-booking-btn:hover{
    color:#3d36c7;
    transform:translateY(-1px);
}


/* Checkout fee rows */
.woocommerce-checkout-review-order-table tfoot tr.fee {
    display: table-row;
}

/* Force Add-ons first */
.woocommerce-checkout-review-order-table tfoot tr.fee:has(th:contains("Add-ons Total")) {
    order: 1;
}

/* Force Logistics below */
.woocommerce-checkout-review-order-table tfoot tr.fee:has(th:contains("Event Logistics Fee")) {
    order: 2;
}



/* ================================
   EVENT DATE + TIME — 2 COLUMN ROW
================================ */
.event-date-field,
.event-time-field {
  width: 100%;
}

.event-date-field,
.event-time-field {
  display: none; /* JS controls visibility */
}

.event-date-time-row {
  display: flex;
  gap: 16px;
}

.event-date-time-row .event-date-field,
.event-date-time-row .event-time-field {
  flex: 1;
}

/* Mobile fallback */
@media (max-width: 768px) {
  .event-date-time-row {
    flex-direction: column;
  }
}


.checkout-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 420px;
}

.checkout-edit-grid .field label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  opacity: 0.8;
}



/* ORDER DETAILS MODAL — FIX */
#order-details-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

#order-details-modal.active {
  display: block;
}

#order-details-modal .addon-reminder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

#order-details-modal .addon-reminder-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  max-width: 520px;
  width: 90%;
  padding: 24px;
  border-radius: 12px;
  z-index: 100000;
}


.order-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.order-field-row {
  display: flex;
  gap: 20px;
}

.order-field-row .order-field {
  flex: 1;
}

.field-error {
  color: #e53935;
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
}

.order-field input,
.order-field select {
  height: 48px;
  border-radius: 28px;
  padding: 0 20px;
}


/* CATEGORY TABS */
.event-addon-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.addon-tab {
  padding: 10px 18px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #000000;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.addon-tab.active {
  background: #000;
  color: #fff;
}

/* ADDON INPUT POPUP */

#addon-input-modal {
  display: none;
	  z-index: 2000;
}

#addon-input-modal.active {
  display: block;
}

.addon-input-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2001;   /* 🔥 HIGHER */
}

.addon-input-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  z-index: 2002;   /* 🔥 HIGHER */
}

.addon-input-close {
  position: absolute;
  right: 12px;
  top: 12px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

.addon-input-field {
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.addon-input-error {
  color: red;
  font-size: 13px;
  margin-top: 8px;
}

.addon-input-confirm {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.addon-customize {
  font-size: 13px;
  color: #ff5200; /*  orange vibe */
  margin-bottom: 6px;
  cursor: pointer;
  font-weight: 600;
}

.addon-note {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.3;
}