/* ===========================================================================
   Pickup Mtaani – Refined Palette  ·  2025-06-26 (Alignment FIX v2)
   ========================================================================== */

/* 1 · Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Poppins:wght@500;600;700&display=swap');

/* 2 · Design tokens */
:root {
  --pm-font-primary: 'Inter', sans-serif;
  --pm-font-heading: 'Poppins', sans-serif;

  --pm-green:  #1ab271;
  --pm-green-10: #e7f9ef;
  --pm-green-20: #c8f0db;

  --pm-blue:   #3aa9ff;
  --pm-blue-10: #e7f3ff;

  --pm-orange: #ff7a1a;

  --pm-text:   #1d2939;
  --pm-muted:  #667085;

  --pm-border: #d0d5dd;
  --pm-bg-surface: #fafafa;
  --pm-bg-card:    #ffffff;

  --pm-radius: 12px;
  --pm-shadow: 0 4px 16px rgba(0,0,0,.05);
}

/* Global form-control reset (prevents clipping) */
select,
input,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.5 !important;  /* fixes vertical mis-align */
  box-sizing: border-box;
}

/* ===========================================================================
   WRAPPER
   ========================================================================== */
.pm-checkout-wrapper {
  font-family: var(--pm-font-primary);
  color: var(--pm-text);
  max-width: 1080px;
  margin: 40px auto;
  padding: 2rem 2.2rem;
  background: var(--pm-bg-card);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.pm-checkout-wrapper .pm-left input {
  height: 45px;
  padding: 10px;
  font-size: 18px;
}
@media (max-width: 640px) {
  .pm-checkout-wrapper { padding: 1.4rem; }
  .pm-left, .pm-right { min-width: 100% !important; }
}
.pm-left, .pm-right { flex: 1 1 340px; min-width: 340px; }

/* ===========================================================================
   LEFT column – customer info
   ========================================================================== */
.pm-left h2 {
  font: 600 1.35rem var(--pm-font-heading);
  margin-bottom: 1.4rem;
}
.pm-left label {
  display: block;
  margin: .9rem 0 .35rem;
  font: 600 .95rem var(--pm-font-primary);
}
.pm-left input,
.pm-left textarea {
  width: 100%;
  padding: .75rem;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  font-size: .95rem;
  background: #fff;
  color: var(--pm-text);
}
.pm-left input:focus,
.pm-left textarea:focus {
  outline: none;
  border-color: var(--pm-blue);
  box-shadow: 0 0 0 2px var(--pm-blue-10);
}
.pm-left textarea { resize: vertical; min-height: 90px; }

/* ===========================================================================
   WIDGET (right column)
   ========================================================================== */
#pickup-mtaani-widget {
  max-width: 500px;
  margin: 0 auto;
  padding: 30px 20px;
  background: var(--pm-bg-card);
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  box-shadow: var(--pm-shadow);
}
#pickup-mtaani-widget h2 {
  font: 700 22px var(--pm-font-heading);
  text-align: center;
  color: var(--pm-green);
  margin-bottom: 25px;
}

.pm-error{
  margin-top:10px;
  padding:10px 12px;
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fca5a5;
  border-radius:8px;
  font-size:.9rem;
}

#pickup-mtaani-widget label {
  font: 600 14px var(--pm-font-heading);
  margin: 15px 0 5px;
}
#pickup-mtaani-widget select,
#pickup-mtaani-widget input[type="text"] {
  width: 100%;
  padding: 10px 14px;        /* balanced vertical padding */
  font-size: 18px;
  line-height: 1.5;          /* ensures full glyph ascent */
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: #fff;
  color: var(--pm-text);
  appearance: none;          /* consistent arrow */
  vertical-align: middle;
}
#pickup-mtaani-widget select:focus,
#pickup-mtaani-widget input[type="text"]:focus {
  outline: none;
  border-color: var(--pm-green);
  box-shadow: 0 0 0 2px var(--pm-green-20);
}

/* ===========================================================================
   Toggle buttons
   ========================================================================== */
.toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.toggle button {
  flex: 1 1 48%;
  padding: 12px;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-bg-surface);
  font: 600 15px var(--pm-font-primary);
  color: var(--pm-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: .2s;
}
.toggle button:hover { background: var(--pm-blue-10); }
.toggle button.active {
  background: var(--pm-green);
  border-color: var(--pm-green);
  color: #fff;
}
@media (max-width: 480px) {
  .toggle button { flex: 1 1 100%; font-size: 14px; }
}

/* ===========================================================================
   Combo (autocomplete list)
   ========================================================================== */
.combo-wrapper { position: relative; }
.pm-step {
  margin-top: 1.2rem;
}
.pm-step-hidden {
  display: none;
}
.pm-step-hint {
  margin: 0 0 .65rem;
  color: var(--pm-muted);
  font-size: .92rem;
}
.combo-list {
  display: none;
  position: absolute;
  top: 105%;
  inset-inline: 0 auto;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  box-shadow: var(--pm-shadow);
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
}
.combo-list .item {
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.combo-list .item:hover { background: var(--pm-blue-10); }
.combo-list .item.nores {
  cursor: default;
  color: var(--pm-muted);
  font-style: italic;
}

/* ===========================================================================
   Agents grid
   ========================================================================== */
#agentList {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pm-agent {
  background: var(--pm-bg-surface);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  padding: .9rem;
  cursor: pointer;
  transition: .17s;
}
.pm-agent strong { font-size: .96rem; color: var(--pm-text); }
.pm-agent small  { font-size: .8rem;  color: var(--pm-muted); }
.pm-agent:hover {
  transform: translateY(-3px);
  border-color: var(--pm-green);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.pm-agent input[type="radio"] {
  accent-color: var(--pm-green);
  transform: scale(1.2);
  cursor: pointer;
}

/* ===========================================================================
   Spinner
   ========================================================================== */
#spinner {
  display: none;
  margin: 1.2rem auto;
  width: 28px;
  height: 28px;
  border: 3px solid var(--pm-border);
  border-top-color: var(--pm-green);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   Summary & Totals
   ========================================================================== */
.summary {
  display: none;
  margin-top: 1.2rem;
  background: var(--pm-blue-10);
  padding: 1rem;
  border-radius: var(--pm-radius);
}
.summary .price {
  color: var(--pm-orange);
  font-weight: 700;
  font-size: 1.05rem;
}
#order-summary {
  margin-top: 1.2rem;
  background: var(--pm-bg-surface);
  border: 1px solid var(--pm-border);
  padding: 1.1rem;
  border-radius: var(--pm-radius);
}
#order-summary p {
  display: flex;
  justify-content: space-between;
  margin: .55rem 0;
  font-size: .93rem;
}
#order-summary p strong { color: var(--pm-text); }

/* ===========================================================================
   Continue button
   ========================================================================== */
#continue {
  display: none;
  margin-top: 1.3rem;
  width: 100%;
  padding: .9rem;
  font: 600 1.05rem var(--pm-font-primary);
  background: var(--pm-green);
  color: #fff;
  border: none;
  border-radius: var(--pm-radius);
  cursor: pointer;
  transition: .18s;
}
#continue:hover  { background: var(--pm-blue); }
#continue:active { transform: translateY(1px); }
#continue.processing{ animation: blinker 3s linear infinite; }

@keyframes blinker { 50% { opacity: 0.2; }}

/* ===========================================================================
   Payment box
   ========================================================================== */
.wc-payment-form {
  background: var(--pm-bg-surface);
  border: 1px solid var(--pm-border);
  padding: 1.6rem;
  border-radius: var(--pm-radius);
  margin-top: 2rem;
}
.wc-payment-form h3 {
  margin-top: 0;
  font: 600 1.15rem var(--pm-font-heading);
}

.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wc_payment_method {
  margin-top: 1rem;
}
.wc_payment_method label {
  display: block;
  font-weight: 600;
  cursor: pointer;
}
.pm-single-gateway input[type="radio"] {
  display: none;
}
.pm-single-gateway {
  cursor: default;
}