/* ===========================================================================
   theme_common.css - shared layout, structure, and component rules
   ---------------------------------------------------------------------------
   This file contains everything that does NOT change between skins.
   Color, font, and shadow values come from CSS variables defined in each
   skin file, so this file is loaded BEFORE the skin file in header.php.
   
   To change a layout/spacing/structure rule across all themes, edit it here.
   To change colors, edit the relevant skin file.
   =========================================================================== */


/* ---------- Body ---------- */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}


/* ---------- Links ---------- */
a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}


/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  color: var(--primary-color);
}


/* ---------- Buttons ---------- */
.btn,
input[type="submit"],
button,
.btn-login,
.btn-logout,
#login-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  transition: background 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover,
.btn:hover,
input[type="submit"]:hover,
button:hover,
.btn-login:hover,
.btn-logout:hover,
#login-button:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

/* Secondary button: less prominent than primary, used for "back" / "cancel" actions */
.btn-secondary {
  background-color: transparent !important;
  color: var(--secondary-btn-color) !important;
  border: 1px solid var(--secondary-btn-color) !important;
  padding: 0.4rem 0.9rem !important;
  font-weight: normal !important;
}

.btn-secondary:hover {
  background-color: var(--secondary-btn-color) !important;
  color: var(--secondary-btn-hover-text) !important;
}


/* ---------- Form Controls ---------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 4px var(--focus-shadow);
}

label {
  font-weight: bold;
  display: block;
  margin-top: 10px;
  color: var(--text-color);
}


/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

th, td {
  padding: 10px;
  border: 1px solid var(--border-color);
}

th {
  background-color: var(--primary-color);
  color: white;
}

tr:nth-child(even) {
  background-color: var(--row-alt-bg);
}


/* ---------- Cards / Modals ---------- */
.card,
.modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.modal-content {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 8px;
}

.modal-content h2,
.modal-content h3,
.modal-content h4 {
  margin-top: 0;
  color: var(--primary-color);
}


/* ---------- Navbar / Footer ---------- */
.navbar, .footer {
  background-color: var(--secondary-color);
  color: var(--text-color);
  padding: 1rem;
  font-weight: bold;
}


/* ---------- Header Bar ---------- */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

.header-bar .left,
.header-bar .right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-bar .left {
  flex: 1;
  justify-content: flex-start;
}

.header-bar .right {
  flex: 1;
  justify-content: flex-end;
  text-align: right;
}


/* ---------- Cart Dropdown ---------- */
.cart-container {
  position: relative;
  display: inline-block;
}

#cart-icon {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  color: var(--primary-color);
  font-weight: bold;
}

.remove-cart-item {
  background: none;
  border: none;
  color: red;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
}

.cart-dropdown {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--dropdown-shadow);
  padding: 10px;
  min-width: 220px;
  font-size: 13px;
  border-radius: 5px;
  z-index: 1500;
  text-align: left;
}

.cart-dropdown.visible {
  display: block !important;
}

#cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

#cart-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
}

#cart-items li:last-child {
  border-bottom: none;
}

#cart-empty {
  font-size: 13px;
  color: gray;
  text-align: center;
  padding: 5px;
}

.checkout-button {
  background: var(--accent-color);
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  display: block;
  margin-top: 8px;
  text-align: center;
}

.checkout-button:hover {
  background: var(--primary-color);
}

.header-actions table {
  border-collapse: collapse;
}

.header-actions td {
  padding: 0;
  vertical-align: middle;
  white-space: nowrap;
}


/* ---------- Event Page ---------- */
.event-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.event-image {
  flex: 1;
  max-width: 260px;
  width: 260px;
  text-align: center;
}

.event-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.event-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 55%;
  gap: 5px;
}

.event-details h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.event-details p {
  margin: 5px 0;
}

.event-description {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
}


/* ---------- Ticket Options (event page) ---------- */
.ticket-option {
  display: grid;
  grid-template-columns: minmax(190px, max-content) 80px max-content;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.ticket-option input {
  width: 80px;
  text-align: center;
}

.ticket-option span {
  font-weight: bold;
}


/* ---------- Summary Page ---------- */
.summary-container {
  max-width: 850px;
  margin: 20px auto;
  padding: 20px;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

.summary-container h1 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.summary-container form {
  margin-top: 1rem;
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  max-width: 600px;
}

.summary-row {
  display: grid;
  grid-template-columns: 160px 1fr 140px;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.summary-button {
  margin: 0;
  white-space: nowrap;
  width: 100%;     /* fill the third column */
}

.summary-row.totals-row {
  /* Totals only have label + value, no third column */
  grid-template-columns: 160px 1fr;
}

.summary-row.coupon-warning {
  display: block;
  color: red;
  font-weight: bold;
  margin-top: -0.25rem;
}

.summary-label {
  font-weight: bold;
  margin: 0;
}

.summary-value {
  font-weight: normal;
}

.summary-input {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.summary-button {
  margin: 0;
  white-space: nowrap;
}


/* ---------- Mobile Breakpoints ---------- */
@media (max-width: 768px) {
  .event-container {
    flex-direction: column;
    align-items: center;
  }

  .event-image, .event-details {
    margin-right: 0;
    max-width: 100%;
  }

  .ticket-option {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 600px) {
  .summary-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .summary-row.totals-row {
    grid-template-columns: max-content 1fr;
  }
}