/* ══════════════════════════════════════════════════
   Archistech Booking v3.1 — Centered, White Logo
   ══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap');

/* ──────────────────────────────────────────────────
   THEME RESET — injected here AND via wp_head hook
   ────────────────────────────────────────────────── */
body { background: #eef2f7 !important; }

.entry-header,
.page-header,
.post-header,
.wp-block-post-title,
h1.entry-title,
h1.page-title,
.page .entry-title { display: none !important; }

/* Zero out all theme top spacing */
.site-main, #main, main[role="main"],
#primary, .content-area,
.wp-site-blocks,
.wp-block-post-content,
.entry-content,
.post-content,
.page-content { padding-top: 0 !important; margin-top: 0 !important; }

/* Prevent theme from constraining width on the content column */
.entry-content .acb-outer,
.post-content  .acb-outer,
.page-content  .acb-outer { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* ──────────────────────────────────────────────────
   OUTER CENTERING WRAPPER
   We wrap acb-wrap in acb-outer via PHP template
   ────────────────────────────────────────────────── */
.acb-outer {
    width: 100%;
    background: #eef2f7;
    display: flex;
    justify-content: center;
    padding: 32px 16px 48px;
}

/* ──────────────────────────────────────────────────
   INNER CARD — fixed width, centered
   ────────────────────────────────────────────────── */
.acb-wrap {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #0a1628;
    width: 100%;
    max-width: 740px;
    -webkit-font-smoothing: antialiased;
}
.acb-wrap * { box-sizing: border-box; }

/* ──────────────────────────────────────────────────
   Variables
   ────────────────────────────────────────────────── */
:root {
    --navy:     #0a1628;
    --blue1:    #1565c0;
    --blue2:    #1e88e5;
    --blue3:    #42a5f5;
    --grad:     linear-gradient(135deg, #0a1628 0%, #1565c0 55%, #1e88e5 100%);
    --grad-btn: linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
    --green:    #00897b;
    --red:      #e53935;
    --ink:      #0a1628;
    --ink2:     #1e3a5f;
    --muted:    #5c7a9e;
    --light:    #8baac7;
    --border:   #dce6f0;
    --border2:  #c5d8eb;
    --surface:  #ffffff;
    --r-sm:     6px;
    --r:        12px;
    --r-lg:     16px;
    --shadow:   0 4px 20px rgba(10,22,40,.08);
    --shadow-lg:0 12px 48px rgba(10,22,40,.14);
    --ease:     cubic-bezier(.4,0,.2,1);
}

/* ──────────────────────────────────────────────────
   HERO — white bg so color logo shows perfectly
   ────────────────────────────────────────────────── */
.acb-hero {
    background: #ffffff;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 28px 40px 22px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 0 0 #1e88e5;
}
.acb-hero-logo {
    height: 62px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
    position: relative;
    z-index: 1;
}
.acb-hero-sub {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* ──────────────────────────────────────────────────
   STEP BAR — gradient blue, brand color carrier
   ────────────────────────────────────────────────── */
.acb-steps {
    display: flex;
    background: var(--grad);
    margin: 0;
}
.acb-step {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px 8px;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3);
    letter-spacing: .8px; text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,.07);
    transition: all .2s var(--ease); user-select: none;
}
.acb-step:last-child { border-right: none; }
.acb-step span {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3);
    flex-shrink: 0; transition: all .2s var(--ease);
}
.acb-step.active { color: #fff; background: rgba(255,255,255,.05); }
.acb-step.active span { background: var(--blue2); border-color: var(--blue2); color: #fff; }
.acb-step.done span { background: var(--green); border-color: var(--green); color: #fff; }

/* ──────────────────────────────────────────────────
   FORM PANEL
   ────────────────────────────────────────────────── */
.acb-panel {
    background: var(--surface);
    padding: 34px 36px 38px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: slideIn .22s var(--ease);
}
@keyframes slideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

@media (max-width: 580px) {
    .acb-outer { padding: 0 0 32px; }
    .acb-hero { padding: 26px 18px 20px; border-radius: 0; }
    .acb-steps .acb-step { font-size: 0; padding: 13px; gap: 0; }
    .acb-panel { padding: 22px 18px 28px; border-radius: 0; }
}

.acb-panel-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 21px; font-weight: 400; color: var(--ink);
    margin: 0 0 24px; padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.acb-panel-title::before {
    content: ''; display: block;
    width: 4px; height: 22px;
    background: var(--grad-btn); border-radius: 2px; flex-shrink: 0;
}

/* ──────────────────────────────────────────────────
   FIELDS
   ────────────────────────────────────────────────── */
.acb-field-group { margin-bottom: 18px; }
.acb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .acb-field-row { grid-template-columns: 1fr; } }

.acb-label {
    display: block; font-size: 11px; font-weight: 700;
    color: var(--ink2); margin-bottom: 6px;
    letter-spacing: .7px; text-transform: uppercase;
}
.acb-label .req { color: var(--blue2); margin-left: 2px; }

.acb-input {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border2); border-radius: var(--r-sm);
    font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--ink);
    background: #f7fafd; transition: all .18s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.acb-input:focus {
    outline: none; border-color: var(--blue2);
    background: #fff; box-shadow: 0 0 0 3px rgba(30,136,229,.1);
}
.acb-input::placeholder { color: var(--light); }
.acb-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.acb-hint { font-size: 11px; color: var(--light); margin-top: 4px; display: block; }

/* ──────────────────────────────────────────────────
   ROOM CARDS
   ────────────────────────────────────────────────── */
.acb-location-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin-bottom: 2px;
}
.acb-location-card {
    border: 2px solid var(--border); border-radius: var(--r);
    padding: 20px 14px 18px; cursor: pointer;
    position: relative; overflow: hidden;
    transition: all .2s var(--ease);
    background: #f7fafd; text-align: center;
}
.acb-location-card::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-btn);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s var(--ease);
}
.acb-location-card:hover { border-color: var(--blue2); transform: translateY(-2px); box-shadow: var(--shadow); }
.acb-location-card:hover::after { transform: scaleX(1); }
.acb-location-card.selected {
    border-color: var(--blue1);
    background: linear-gradient(135deg,#e3f0fd,#f0f7ff);
    box-shadow: 0 0 0 3px rgba(21,101,192,.12), var(--shadow);
}
.acb-location-card.selected::after { transform: scaleX(1); }
.acb-location-icon { font-size: 26px; display: block; margin-bottom: 8px; }
.acb-location-name { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.acb-location-meta { font-size: 12px; color: var(--muted); font-weight: 500; }
.acb-location-check {
    position: absolute; top: 9px; right: 9px;
    width: 20px; height: 20px; background: var(--blue1);
    color: #fff; border-radius: 50%;
    font-size: 10px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
}
.acb-location-card.selected .acb-location-check { display: flex; }

/* ──────────────────────────────────────────────────
   TIME SLOTS
   ────────────────────────────────────────────────── */
.acb-time-section {
    background: #f4f8fc; border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 16px; margin-top: 4px;
}
.acb-time-section-label {
    font-size: 11px; font-weight: 700; color: var(--muted);
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px;
}
.acb-time-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.acb-time-placeholder { color: var(--light); font-size: 13px; width: 100%; text-align: center; padding: 14px 0; font-style: italic; }
.acb-time-slot {
    padding: 8px 12px; border: 1.5px solid var(--border2);
    border-radius: var(--r-sm); font-size: 13px;
    font-family: 'DM Sans', sans-serif; cursor: pointer;
    background: #fff; font-weight: 600; color: var(--ink2);
    transition: all .15s var(--ease);
}
.acb-time-slot:hover:not(:disabled) { border-color: var(--blue2); color: var(--blue1); background: #e3f0fd; }
.acb-time-slot.selected { background: var(--grad-btn); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(21,101,192,.28); }
.acb-time-slot.unavailable { background: #f4f8fc; color: #bdd0e4; border-color: var(--border); cursor: not-allowed; text-decoration: line-through; opacity: .55; }

.acb-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 10px 0; }
.acb-spinner { width: 16px; height: 16px; border: 2px solid var(--border2); border-top-color: var(--blue2); border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────
   SUMMARY BAR
   ────────────────────────────────────────────────── */
.acb-summary-bar {
    background: linear-gradient(135deg,#e3f0fd,#f0f7ff);
    border: 1.5px solid #b3d4f5; border-radius: var(--r);
    padding: 12px 16px; display: flex;
    justify-content: space-between; align-items: center;
    font-size: 13px; margin-top: 16px;
    font-weight: 500; color: var(--ink2);
}

/* ──────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────── */
.acb-actions {
    display: flex; gap: 12px; justify-content: flex-end;
    margin-top: 26px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.acb-btn {
    padding: 12px 26px; border-radius: var(--r-sm);
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; border: 2px solid transparent;
    transition: all .18s var(--ease);
    display: inline-flex; align-items: center; gap: 6px;
}
.acb-btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 4px 14px rgba(21,101,192,.3); }
.acb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(21,101,192,.4); }
.acb-btn-success { background: linear-gradient(135deg,#00695c,#00897b); color: #fff; box-shadow: 0 4px 14px rgba(0,105,92,.22); }
.acb-btn-success:hover { transform: translateY(-1px); }
.acb-btn-ghost { background: transparent; color: var(--muted); border-color: var(--border2); }
.acb-btn-ghost:hover { border-color: var(--blue2); color: var(--blue1); background: #e3f0fd; }
.acb-btn-danger { background: linear-gradient(135deg,#c62828,#e53935); color: #fff; }
.acb-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ──────────────────────────────────────────────────
   REVIEW CARD
   ────────────────────────────────────────────────── */
.acb-review-card { background: #f4f8fc; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.acb-review-heading { background: var(--grad-btn); color: #fff; padding: 11px 16px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.acb-review-row { display: flex; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 14px; align-items: flex-start; }
.acb-review-row:last-child { border-bottom: none; }
.acb-review-label { width: 120px; font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; flex-shrink: 0; }
.acb-review-value { color: var(--ink); font-weight: 500; }

/* ──────────────────────────────────────────────────
   TERMS
   ────────────────────────────────────────────────── */
.acb-terms {
    font-size: 13px; color: var(--muted);
    display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
    background: #fffbeb; border: 1px solid #f6d860;
    border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 4px;
}
.acb-terms input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; accent-color: var(--blue1); cursor: pointer; }
.acb-terms a { color: var(--blue1); font-weight: 600; }

/* ──────────────────────────────────────────────────
   SUCCESS
   ────────────────────────────────────────────────── */
.acb-success-panel { text-align: center; padding: 52px 36px; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.acb-success-icon {
    width: 68px; height: 68px;
    background: linear-gradient(135deg,#00695c,#00897b);
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(0,105,92,.25);
}
.acb-success-panel h2 { font-family: 'DM Serif Display', Georgia, serif; font-size: 27px; font-weight: 400; margin: 0 0 10px; }
.acb-success-msg { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.acb-success-ref {
    display: inline-block; font-size: 16px; font-weight: 800;
    color: var(--blue1); background: linear-gradient(135deg,#e3f0fd,#f0f7ff);
    border: 1.5px solid #b3d4f5; padding: 10px 26px;
    border-radius: var(--r-sm); margin-bottom: 16px; letter-spacing: 2px;
}
.acb-success-note { font-size: 13px; color: var(--light); max-width: 320px; margin: 0 auto 24px; line-height: 1.6; }

/* ──────────────────────────────────────────────────
   ERROR
   ────────────────────────────────────────────────── */
.acb-error-box {
    background: #fff5f5; border: 1.5px solid #f5a5a5;
    color: #b91c1c; border-radius: var(--r-sm);
    padding: 12px 16px; font-size: 14px; margin-top: 12px;
    display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.acb-error-box::before { content: '⚠'; font-size: 15px; }

/* ──────────────────────────────────────────────────
   MANAGE BOOKING
   ────────────────────────────────────────────────── */
.acb-manage-wrap .acb-wrap { max-width: 660px; }
.acb-manage-lookup { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.acb-manage-lookup-body { padding: 30px 34px 34px; }
.acb-manage-lookup h2 { font-family: 'DM Serif Display', Georgia, serif; margin: 0 0 8px; font-size: 22px; font-weight: 400; }
.acb-manage-lookup p { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.6; }
.acb-manage-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.acb-manage-card-header { background: var(--grad); padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; }
.acb-manage-card-header h2 { font-family: 'DM Serif Display', Georgia, serif; margin: 0 0 4px; font-size: 19px; font-weight: 400; color: #fff; }
.acb-ref-badge { background: rgba(255,255,255,.2); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 1.5px; display: inline-block; }
.acb-manage-card-body { padding: 22px 26px; }
.acb-status-badge { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: .8px; text-transform: uppercase; }
.acb-status-confirmed { background: #d1fae5; color: #065f46; }
.acb-status-cancelled { background: #fee2e2; color: #991b1b; }
.acb-status-completed { background: #dbeafe; color: #1e40af; }
.acb-detail-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14px; }
.acb-detail-table th { width: 130px; padding: 10px 12px; background: #f4f8fc; font-weight: 700; color: var(--muted); text-align: left; border: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.acb-detail-table td { padding: 10px 12px; border: 1px solid var(--border); color: var(--ink); font-weight: 500; }
.acb-action-section { background: #f4f8fc; border: 1.5px solid var(--border); border-radius: var(--r); padding: 18px; margin-top: 14px; }
.acb-action-section h3 { margin: 0 0 14px; font-family: 'DM Serif Display', Georgia, serif; font-size: 17px; font-weight: 400; }
.acb-action-buttons { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acb-cancelled-msg { color: var(--muted); font-size: 14px; padding: 12px 0; }
.acb-cancelled-msg a { color: var(--blue1); font-weight: 600; }