/* =====================================================
   Online Plot Booking System - Frontend Styles
   Refactored: 3-step, no-scroll layout, all UX fixes
   ===================================================== */

/* ---- Floating Button ---- */
.opbs-floating-btn {
    /* Positioning handled by #opbs-floating-wrapper (PHP-rendered inline style) */
    position: relative;
    z-index: 0;
    padding: 13px 22px;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.opbs-floating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}
.opbs-floating-btn:active { transform: translateY(0); }
.opbs-floating-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Main Modal ---- */
.opbs-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; }
.opbs-modal.active { display: flex; align-items: center; justify-content: center; }

.opbs-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
}

.opbs-modal-container {
    position: relative;
    width: 96%;
    max-width: 1100px;
    /* Fixed height — overflow is on the inner content-wrapper so the
       header, progress bar and navigation never scroll out of view */
    max-height: 88vh;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

/* ---- Close Button ---- */
/* Simple clean X icon — no background circle, just the stroke.
   Color is 100% customizable from the admin UI settings panel. */
.opbs-close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10002 !important;
    line-height: 0 !important;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease !important;
    opacity: 0.9 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.opbs-close-btn:focus,
.opbs-close-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.opbs-close-btn svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) !important;
}
.opbs-close-btn:hover {
    transform: rotate(90deg) scale(1.1) !important;
    opacity: 1 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.opbs-close-btn:active { transform: rotate(90deg) scale(0.9) !important; }

/* ---- Header ---- */
.opbs-header { position: relative; text-align: center; flex-shrink: 0; }
.opbs-header-content { padding: 18px 30px 14px; }
.opbs-logo { max-width: 120px; margin-bottom: 8px; }
.opbs-header h2 { margin: 6px 0 4px; font-size: 26px; }
.opbs-header p { margin: 0; font-size: 14px; opacity: 0.85; }

/* ---- Progress Bar ---- */
.opbs-progress-bar {
    height: 5px;
    background: #e9ecef;
    flex-shrink: 0;  /* Never scroll the progress bar out of view */
}
.opbs-progress-fill {
    height: 100%;
    width: 33.33%;
    transition: width 0.45s ease, box-shadow 0.3s ease;
    position: relative;
}
/* When all steps complete: brighter glow + slight height increase */
.opbs-progress-fill.opbs-progress-complete {
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
    height: 100%;
}
/* Show the progress bar container at full width on step 3 */
.opbs-progress-bar.opbs-bar-complete {
    height: 6px;
}

/* ---- Content Wrapper ---- */
.opbs-content-wrapper {
    padding: 16px 22px 8px;
    flex: 1;
    /* Scroll happens HERE, not on the outer container.
       Header, progress bar and navigation are outside this div
       so they always remain visible. */
    overflow-y: auto;
    min-height: 0; /* Required for flex children to scroll properly */
}
.opbs-form-section { width: 100%; }

/* ---- Steps ---- */
.opbs-step { display: none; }
.opbs-step.active { display: block; animation: opbsFadeIn 0.3s ease; }
@keyframes opbsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.opbs-step h3 { font-size: 20px; margin: 0 0 10px; }

/* Screen intro text (heading/subheading) */
.opbs-screen-intro { margin: -4px 0 12px; }
.opbs-screen-heading { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: #444; }
.opbs-screen-subheading { font-size: 13px; color: #6c757d; margin: 0; }

/* ---- Form Styles ---- */
.opbs-form { width: 100%; }
.opbs-form-group { margin-bottom: 12px; }
.opbs-form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.opbs-form-group .required { color: #dc3545; }

.opbs-input, .opbs-select {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 5px;
    font-size: 13px; box-sizing: border-box;
    transition: border-color 0.25s ease;
}
.opbs-input:focus, .opbs-select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.12); }

/* Two-column form row for personal info on step 3 */
.opbs-form-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.opbs-personal-info-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
}

/* ---- Phone Selector ---- */
.opbs-phone-group { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: start; }
.opbs-country-selector { position: relative; user-select: none; }
.opbs-selected-country {
    display: flex; align-items: center; gap: 5px;
    padding: 9px 9px; border: 1px solid #ddd; border-radius: 5px;
    cursor: pointer; background: #fff; font-size: 13px;
    transition: border-color 0.2s; white-space: nowrap;
}
.opbs-selected-country:focus, .opbs-selected-country.open { outline: none; border-color: #007bff; }
.opbs-flag { font-size: 11px; font-weight: 700; color: #555; min-width: 20px; }
.opbs-country-dial { font-weight: 600; color: #333; flex: 1; }
.opbs-dropdown-arrow { font-size: 9px; color: #999; transition: transform 0.2s; }
.opbs-selected-country.open .opbs-dropdown-arrow { transform: rotate(180deg); }

.opbs-country-dropdown {
    display: none; position: absolute; top: calc(100% + 3px); left: 0;
    width: 280px; background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 99999; overflow: hidden;
}
.opbs-country-dropdown.open { display: block; animation: dropdownFadeIn 0.15s ease; }
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.opbs-country-search-wrap { padding: 8px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; }
.opbs-country-search { width: 100%; padding: 7px 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 12px; box-sizing: border-box; }
.opbs-country-search:focus { outline: none; border-color: #007bff; }
.opbs-country-list { list-style: none; margin: 0; padding: 4px 0; max-height: 200px; overflow-y: auto; }
.opbs-country-list::-webkit-scrollbar { width: 4px; }
.opbs-country-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.opbs-country-item { display: flex; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer; font-size: 12px; transition: background 0.15s; }
.opbs-country-item:hover, .opbs-country-item.active { background: #e7f3ff; }
.opbs-item-iso { font-size: 10px; font-weight: 700; color: #888; min-width: 22px; }
.opbs-item-name { flex: 1; color: #333; }
.opbs-item-code { color: #007bff; font-weight: 600; font-size: 11px; }
.opbs-country-item.hidden { display: none; }
.opbs-no-results { padding: 10px 12px; color: #999; font-size: 12px; text-align: center; }

/* ---- Block Cards Grid (Step 1) ---- */
.opbs-blocks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 10px;
    width: 100%;
}

.opbs-block-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-width: 0;
    /* Larger cards */
}
.opbs-block-card:hover {
    border-color: #007bff;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,123,255,0.18);
}
.opbs-block-card.selected { border-color: #007bff; background: #e7f3ff; }
.opbs-block-card.sold-out { opacity: 0.6; cursor: not-allowed; }
.opbs-block-card.sold-out::after {
    content: 'SOLD OUT'; position: absolute; top: 8px; right: 8px;
    background: #dc3545; color: white; padding: 4px 8px;
    border-radius: 3px; font-size: 10px; font-weight: bold;
}

.opbs-block-image {
    width: 100%;
    height: 140px;    /* Taller image for bigger cards */
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
}

.opbs-block-info { padding: 12px 10px 14px; text-align: center; }
.opbs-block-name { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.opbs-block-plots-preview { font-size: 12px; color: #6c757d; line-height: 1.4; }
.opbs-plot-sizes-list { display: block; color: #007bff; font-weight: 500; font-size: 12px; }
.opbs-loading-plots { display: block; color: #bbb; font-style: italic; font-size: 11px; }
.opbs-no-plots { display: block; color: #bbb; font-size: 11px; }

/* ---- Plot Size Grid (Step 2) ---- */
.opbs-plot-sizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
    width: 100%;
}
.opbs-plot-size-card {
    border: 2px solid #e9ecef; border-radius: 8px;
    padding: 16px 12px; text-align: center;
    cursor: pointer; transition: all 0.3s ease;
}
.opbs-plot-size-card:hover { border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,123,255,0.15); }
.opbs-plot-size-card.selected { border-color: #007bff; background: #e7f3ff; }
.opbs-plot-size-name { font-weight: 700; font-size: 16px; }

/* ---- Payment Plan Display (Step 2) ---- */
.opbs-payment-plan-display {
    margin-top: 14px;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 14px;
    background: #f8fff9;
}
.opbs-payment-plan-display h4 { margin: 0 0 10px; color: #28a745; font-size: 14px; }
.opbs-payment-details { display: flex; flex-direction: column; gap: 6px; }
.opbs-payment-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px; background: white; border-radius: 4px; font-size: 13px;
}
.opbs-payment-row.highlight { background: #fff3cd; font-weight: 600; }
.opbs-payment-row.total { background: #28a745; color: white; font-weight: 700; }

/* Payment plan value — base state.
   All transitions are applied via inline CSS in frontend.js so that the
   admin-selected animation type drives the behaviour without CSS specificity
   conflicts. will-change hints allow the browser to promote these elements
   onto their own compositor layer for smooth animation. */
.opbs-plan-value {
    will-change: opacity, transform;
}
/* The panel itself also needs a compositor hint for slide/expand animations */
.opbs-payment-plan-display {
    will-change: opacity, transform, max-height;
}

/* ---- Payment Options (Step 3) ---- */
.opbs-payment-options { width: 100%; }
.opbs-payment-summary {
    background: #f8f9fa; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 12px;
}
.opbs-payment-summary h4 { margin: 0 0 10px; font-size: 14px; }
.opbs-summary-details { display: flex; flex-direction: column; gap: 6px; }
.opbs-summary-row {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid #e9ecef;
    font-size: 13px;
}
.opbs-summary-row.highlight { font-size: 15px; font-weight: 700; color: #28a745; border-bottom: none; }

/* ---- Terms & Conditions ---- */
.opbs-terms-section {
    margin: 12px 0;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
.opbs-terms-label {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; font-size: 13px; font-weight: 500; color: #333;
    user-select: none;
}
.opbs-terms-checkbox {
    width: 16px; height: 16px; margin-top: 2px;
    flex-shrink: 0; cursor: pointer; accent-color: #007bff;
}
.opbs-terms-link {
    color: #007bff; text-decoration: underline; cursor: pointer;
    font-weight: 600;
}
.opbs-terms-link:hover { color: #0056b3; }
.opbs-terms-error {
    display: block; margin-top: 6px; color: #dc3545;
    font-size: 12px; font-weight: 500;
}

/* ---- Payment Buttons ---- */
.opbs-payment-buttons { display: flex; flex-direction: column; gap: 10px; }

/* Complete Payment button — prominent green CTA */
.opbs-btn-complete-pay {
    background: #28a745;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(40,167,69,0.3);
    transition: all 0.25s ease;
}
.opbs-btn-complete-pay:hover {
    background: #1e7e34 !important;
    box-shadow: 0 5px 18px rgba(40,167,69,0.45);
    transform: translateY(-2px);
}
.opbs-btn-complete-pay:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---- Terms Modal ---- */
.opbs-terms-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 20000; display: flex; align-items: center; justify-content: center;
}
.opbs-terms-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
}
.opbs-terms-modal-content {
    position: relative; z-index: 20001;
    background: #fff; border-radius: 10px;
    width: 90%; max-width: 600px;
    max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
.opbs-terms-close-btn {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 24px;
    cursor: pointer; color: #666; line-height: 1;
    transition: color 0.2s;
}
.opbs-terms-close-btn:hover { color: #333; }
.opbs-terms-body {
    padding: 28px 28px 20px;
    overflow-y: auto;
    flex: 1;
    font-size: 14px; line-height: 1.7; color: #333;
}
.opbs-terms-body h3, .opbs-terms-body h2 { margin-top: 0; }
.opbs-terms-footer {
    padding: 14px 24px;
    border-top: 1px solid #e9ecef;
    display: flex; gap: 12px; justify-content: flex-end;
    background: #f8f9fa;
}

/* ---- Messages ---- */
.opbs-message {
    padding: 12px 16px; border-radius: 6px;
    margin: 10px 0; font-size: 13px; line-height: 1.5;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.opbs-message-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.opbs-message-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.opbs-message-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.opbs-message h4 { margin: 0 0 5px; font-size: 14px; }
.opbs-message p { margin: 3px 0; }
.opbs-message strong { display: block; margin-top: 6px; }

/* ---- Navigation Buttons ---- */
.opbs-navigation {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px 14px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0; /* Never scroll navigation out of view */
    background: inherit; /* Inherit modal background so it doesn't look detached */
}
.opbs-btn {
    padding: 10px 26px; border: none; border-radius: 5px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: all 0.25s ease;
}
.opbs-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.opbs-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.opbs-btn-primary { color: white; }
.opbs-btn-secondary { background: #6c757d; color: white; }
.opbs-btn-back { background: transparent; color: #6c757d; border: 1px solid #6c757d; }
.opbs-btn svg { width: 15px; height: 15px; }

/* ---- Loader ---- */
.opbs-loader { text-align: center; padding: 30px; color: #6c757d; font-size: 14px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .opbs-blocks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .opbs-modal-container { width: 96%; max-height: 95vh; }
    .opbs-content-wrapper { padding: 12px 14px 6px; }
    .opbs-blocks-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .opbs-block-image { height: 100px; }
    .opbs-plot-sizes-grid { grid-template-columns: repeat(2, 1fr); }
    .opbs-form-row-double { grid-template-columns: 1fr; gap: 0; }
    .opbs-phone-group { grid-template-columns: 130px 1fr; }
    .opbs-country-dropdown { width: 250px; }
    .opbs-navigation { flex-direction: row; gap: 10px; }
    .opbs-btn { padding: 9px 18px; font-size: 13px; }
    .opbs-terms-modal-content { width: 95%; max-height: 85vh; }
}

@media (max-width: 480px) {
    .opbs-blocks-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .opbs-header h2 { font-size: 20px; }
    .opbs-header-content { padding: 12px 16px 10px; }
    .opbs-navigation { padding: 10px 14px; }
    .opbs-floating-btn { padding: 11px 16px; font-size: 13px; }
    /* Ensure floating button never overflows on small screens */
    #opbs-floating-wrapper { max-width: calc(100vw - 24px); }
}

/* ---- Floating wrapper: ensure transform-origin works correctly for center alignment ---- */
#opbs-floating-wrapper {
    /* No overflow so shadow and bounce animations show fully */
    overflow: visible;
}