/*
 * Pro Taxi Booking Styles (v3.0.22 - Final Tab Fix Attempt)
 */

:root {
    --ptb-primary-color: #0d6efd; /* Blue */
    --ptb-secondary-color: #ffc107; /* Yellow */
    --ptb-text-color: #495057;
    --ptb-label-color: #6c757d;
    --ptb-border-color: #dee2e6;
    --ptb-input-bg: #fff;
    --ptb-input-focus-border: #86b7fe;
    --ptb-input-focus-shadow: rgba(13, 110, 253, .25);
    --ptb-body-bg: #f8f9fa;
    --ptb-form-bg: #ffffff;
    --ptb-success-bg: #d1e7dd;
    --ptb-success-text: #0f5132;
    --ptb-error-bg: #f8d7da;
    --ptb-error-text: #842029;
    --ptb-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === Main Container === */
.ptb-form-container {
    max-width: 768px;
    margin: 25px auto;
    background: var(--ptb-form-bg);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    border: 1px solid var(--ptb-border-color);
    font-family: var(--ptb-font-family);
}

/* === Tab Navigation === */
.ptb-tabs-nav {
    display: flex;
    background: var(--ptb-body-bg);
    padding: 10px 10px 0 10px;
    gap: 6px;
    border-bottom: 1px solid var(--ptb-border-color);
    position: relative;
}
.ptb-tab-link {
    flex-grow: 1;
    padding: 12px 10px 9px 10px; /* Adjusted padding-bottom (12px - 3px border height) */
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    color: var(--ptb-text-color);
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
    transition: color 0.2s ease-in-out;
    position: relative;
    line-height: 1.5; /* Ensure consistent line height */
    vertical-align: top; /* Align tabs consistently */
}
/* Underline effect using ::after */
.ptb-tab-link::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position exactly at the bottom */
    left: 0;
    right: 0;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
}

.ptb-tab-link:hover {
    color: #000;
}
/* Style the ::after element for the active tab */
.ptb-tab-link.active::after {
    background-color: var(--ptb-primary-color);
}
.ptb-tab-link.active {
    color: var(--ptb-primary-color);
    background: transparent;
}

/* === Tab Content === */
.ptb-tabs-content {
    padding: 25px;
    /* transition: height 0.3s ease-out; */ /* Keep commented out */
    /* overflow: hidden; */
}
.ptb-tab-panel { display: none; } .ptb-tab-panel.active { display: block; }

/* === Form Styles (Labels Above) === */
.ptb-form { padding: 0; max-width: 100%; margin: 0; box-shadow: none; }
.ptb-form-row { margin-bottom: 18px; }
.ptb-form-row-half { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; gap: 20px; }
.ptb-form-col { flex-basis: 100%; }
@media (min-width: 600px) { .ptb-form-col { flex-basis: calc(50% - 10px); } }
.ptb-form label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--ptb-label-color); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; }
.ptb-form input[type="text"], .ptb-form input[type="email"], .ptb-form input[type="tel"], .ptb-form input[type="datetime-local"], .ptb-form select, .ptb-form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--ptb-border-color); border-radius: 5px; box-sizing: border-box; font-size: 0.95rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: var(--ptb-input-bg); color: var(--ptb-text-color); box-shadow: none; }
.ptb-form select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; padding-right: 2.5rem; }
.ptb-form input[type="datetime-local"] { padding: 9px 14px; }
.ptb-form input:focus, .ptb-form select:focus, .ptb-form textarea:focus { border-color: var(--ptb-input-focus-border); outline: 0; box-shadow: 0 0 0 0.25rem var(--ptb-input-focus-shadow); }
.ptb-form input::placeholder { color: #adb5bd; opacity: 1; }

/* === Customer Details Fieldset & Trigger === */
.ptb-customer-details { border: none; padding: 0; margin: 25px 0 0 0; }
.ptb-customer-details hr { border: none; border-top: 1px solid var(--ptb-border-color); margin: 25px 0; }
.ptb-details-trigger { margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid var(--ptb-border-color); padding-bottom: 8px; font-size: 1.2em; color: #343a40; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.ptb-details-trigger:hover { color: var(--ptb-primary-color); }
.ptb-details-arrow { font-size: 0.9em; margin-left: 10px; transition: transform 0.3s ease-out; }
.ptb-customer-details-content { overflow: hidden; padding-top: 15px; /* Starts hidden via inline style in PHP */ }

/* === Informational Text Style === */
.ptb-info-text { font-size: 0.8rem; color: var(--ptb-label-color); margin-top: 5px; margin-bottom: 18px; text-align: center; line-height: 1.4; }

/* === Button Styles === */
.ptb-form button { width: 100%; padding: 12px 15px; color: #fff; background-color: var(--ptb-primary-color); border: none; border-radius: 5px; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: background-color 0.2s, opacity 0.2s, box-shadow 0.2s; text-transform: uppercase; letter-spacing: 0.8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ptb-form button:hover { background-color: #0b5ed7; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.ptb-form button:disabled { background-color: #adb5bd; background-image: none; opacity: 0.65; cursor: not-allowed; box-shadow: none; }

/* === Message Boxes === */
.ptb-message { padding: 12px 15px; margin-top: 18px; border-radius: 5px; text-align: center; font-size: 0.9rem; }
.ptb-success { background-color: var(--ptb-success-bg); border: 1px solid rgba(15, 81, 50, 0.2); color: var(--ptb-success-text); }
.ptb-error { background-color: var(--ptb-error-bg); border: 1px solid rgba(132, 32, 41, 0.2); color: var(--ptb-error-text); }

/* === Fix Tabs Jumping (Lock tab bar in place) === */
.ptb-tabs-nav {
    position: sticky; /* keep it anchored within container */
    top: 0;
    z-index: 10;
    background: var(--ptb-form-bg);
    padding-bottom: 0;
}

/* Smooth fade effect for tab content */
.ptb-tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.ptb-tab-panel.active {
    display: block;
    opacity: 1;
}

/* Ensure content below tabs always starts from same point */
.ptb-tabs-content {
    padding-top: 25px;
    min-height: 400px; /* Adjust as needed so form area doesn’t collapse */
}

/* Prevent sudden container height jumps */
.ptb-form-container {
    transition: height 0.3s ease-in-out;
    overflow: hidden;
}
/* === 📱 Mobile Optimization – Enhanced Readability (v3.0.24) === */
@media (max-width: 600px) {
  html, body {
    font-size: 17px;
  }

  .ptb-form-container {
    margin: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  /* Tabs */
  .ptb-tabs-nav {
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
  }

  .ptb-tab-link {
    font-size: 1.1rem;
    padding: 12px 8px;
    font-weight: 600;
  }

  /* Labels */
  .ptb-form label {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
  }

  /* Inputs */
  .ptb-form input[type="text"],
  .ptb-form input[type="email"],
  .ptb-form input[type="tel"],
  .ptb-form input[type="datetime-local"],
  .ptb-form select,
  .ptb-form textarea {
    font-size: 1.05rem;
    padding: 16px 18px;
    border-radius: 8px;
  }

  /* Placeholder text larger */
  .ptb-form input::placeholder {
    font-size: 1rem;
  }

  /* Adjust form rows */
  .ptb-form-row,
  .ptb-form-row-half {
    margin-bottom: 20px;
    flex-direction: column;
    gap: 15px;
  }

  /* Buttons */
  .ptb-form button {
    font-size: 1.1rem;
    padding: 16px;
    border-radius: 8px;
  }

  /* Section titles */
  .ptb-details-trigger {
    font-size: 1.2rem;
  }

  /* Info text */
  .ptb-info-text {
    font-size: 1rem;
  }

  /* Make the overall form breathe more */
  .ptb-tabs-content {
    padding: 25px 18px;
  }
}
/* === ✅ Mobile Tab Enhancement (v3.0.26 – Stable Layout Fix) === */
@media (max-width: 600px) {
  .ptb-tabs-nav {
    flex-wrap: wrap; /* allow wrapping */
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background: #ffffff;
  }

  .ptb-tab-link {
    flex: 1 1 calc(48% - 4px); /* two buttons per row */
    text-align: center;
    white-space: nowrap;
    border-radius: 8px;
    background: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    font-size: 1rem;
    padding: 12px 0;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: all 0.25s ease;
  }

  .ptb-tab-link.active {
    background: var(--ptb-primary-color);
    color: #fff;
    border-color: var(--ptb-primary-color);
    box-shadow: 0 3px 8px rgba(13, 110, 253, 0.2);
  }

  .ptb-tab-link:hover {
    background: #e9ecef;
  }
}

/* === FIX: Prevent right-side cut on mobile (datetime & select fields) === */
@media (max-width: 600px) {
  .ptb-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .ptb-form input[type="datetime-local"],
  .ptb-form select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure rows and columns don’t overflow */
  .ptb-form-row,
  .ptb-form-row-half {
    width: 100% !important;
    margin: 0 auto 18px auto !important;
    display: block !important;
    flex-wrap: wrap !important;
  }

  /* Prevent layout stretch from background or shadow */
  .ptb-tabs-content {
    overflow-x: hidden !important;
  }
}


/* === Fix header spacing conflict caused by plugin === */
body.home .top_panel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body .top_panel_navi {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure the booking form doesn't push header down */
.booking-container,
.tbf-form-wrapper,
.taxi-booking-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep header consistent across all pages */
.top_panel_default.without_bg_image.scheme_default {
    margin-bottom: 0 !important;
}