/* ============================================================
   HUBB THEME – SHARED COMPONENT STYLES
   Design tokens, button system, modals, location, access table
   Replaces the duplicated <style> blocks in page templates.
============================================================ */

/* ── Design tokens ── */
:root {
    --blue-dark:    #0f2744;
    --blue-mid:     #195cb5;
    --blue-soft:    #4884a7;
    --blue-pale:    #dceeff;
    --accent:       #3A8FD4;
    --accent-pale:  #e8f4fd;
    --amber:        #FFB84D;
    --amber-dark:   #f59e0b;
    --slate:        #475569;
    --slate-light:  #94a3b8;
    --off-white:    #f7f9fc;
}

/* ── Eyebrow label ── */
.hubb-eyebrow { font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: inline-block; margin-bottom: .6rem; }

/* ── Button system ── */
.hubb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .92rem; padding: .85rem 2rem; border-radius: 12px; border: none; cursor: pointer; text-decoration: none; transition: transform .22s, box-shadow .22s, background .22s, color .22s, border-color .22s; line-height: 1; white-space: nowrap; }
.hubb-btn svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hubb-btn--amber { background: var(--amber); color: #0f172a; box-shadow: 0 4px 16px rgba(255,184,77,.38); }
.hubb-btn--amber:hover { background: var(--amber-dark); color: #0f172a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,184,77,.48); }
.hubb-btn--dark-outline { background: #fff; color: var(--blue-dark); border: 2px solid var(--blue-dark); box-shadow: none; }
.hubb-btn--dark-outline:hover { background: var(--blue-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.18); }
.hubb-btn--dark-outline:hover svg { stroke: #fff; }
.hubb-btn--ghost { background: transparent; color: rgba(255,255,255,.88); border: 2px solid rgba(255,255,255,.35); box-shadow: none; }
.hubb-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.65); color: #fff; transform: translateY(-2px); }
.hubb-btn--blue { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 16px rgba(15,39,68,.2); }
.hubb-btn--blue:hover { background: var(--blue-mid); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,39,68,.28); }
.hubb-btn--blue-outline { background: #fff; color: var(--blue-dark); border: 1.5px solid #dde3ed; box-shadow: none; }
.hubb-btn--blue-outline:hover { border-color: var(--accent); color: var(--blue-mid); box-shadow: 0 4px 16px rgba(58,143,212,.12); }

/* ── Modal submit button ── */
.modal-submit-btn { width: 100%; margin-top: 1.25rem; background: var(--amber); color: #0f172a; border: none; border-radius: 12px; padding: .95rem 1rem; font-family: 'Poppins', sans-serif; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .22s, transform .2s, box-shadow .22s; box-shadow: 0 4px 16px rgba(255,184,77,.35); }
.modal-submit-btn:hover { background: var(--amber-dark); color: #0f172a; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,184,77,.45); }
.modal-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Directions button ── */
.loc-directions-btn { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.5rem; margin-left: calc(44px + 1.25rem); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; background: var(--amber); color: #0f172a; padding: .9rem 2rem; border-radius: 12px; transition: all .22s; text-decoration: none; border: none; box-shadow: 0 4px 14px rgba(255,184,77,.32); }
.loc-directions-btn:hover { background: var(--amber-dark); color: #0f172a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,184,77,.42); }
.loc-directions-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Access table ── */
.access-table { margin-top: .6rem; border-collapse: collapse; width: 100%; font-size: .85rem; }
.access-table thead th { font-family: 'Poppins', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); padding: 0 1rem .5rem 0; text-align: left; border-bottom: 1.5px solid #e2e8f0; }
.access-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.access-table tbody tr:last-child { border-bottom: none; }
.access-table tbody td { padding: .55rem 1rem .55rem 0; vertical-align: middle; }
.access-badge { font-family: 'Poppins', sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; white-space: nowrap; display: inline-block; }
.access-badge--fix     { background: #0f2744; color: #fff; }
.access-badge--flex    { background: #dceeff; color: #195cb5; }
.access-badge--day     { background: #f0f8ff; color: #3a8fd4; border: 1px solid #b3d9f5; }
.access-badge--meeting { background: #f1f5f9; color: #64748b; }
.access-time-cell { font-weight: 600; color: var(--blue-dark); white-space: nowrap; }
.access-days { font-size: .75rem; color: var(--slate-light); white-space: nowrap; }
.access-days--always { color: #16a34a; font-weight: 600; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 2px 8px; border-radius: 20px; font-size: .68rem; }

/* ── Location section ── */
.location-section { padding: 6rem 1.5rem; background: #fff; }
.location-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: center; }
.location-info h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; color: var(--blue-dark); margin-bottom: 2.5rem; line-height: 1.2; }
.loc-items { display: flex; flex-direction: column; gap: 1.75rem; }
.loc-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.loc-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loc-icon-wrap svg { width: 20px; height: 20px; stroke: var(--blue-mid); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.loc-item-text strong { font-family: 'Poppins', sans-serif; font-size: .85rem; font-weight: 700; color: var(--slate-light); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .3rem; }
.loc-item-text p, .loc-item-text a { font-size: .95rem; color: var(--blue-dark); line-height: 1.65; font-weight: 500; }
.loc-item-text a { text-decoration: none; }
.loc-item-text a:hover { color: var(--blue-mid); }
.location-map-wrap { position: relative; }
.map-img-wrap { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(15,39,68,.14); transition: box-shadow .35s; margin-bottom: 1.25rem; }
.map-img-wrap:hover { box-shadow: 0 28px 60px rgba(15,39,68,.22); }
.map-img-wrap img { width: 100%; height: auto; display: block; }
.map-pill { position: absolute; bottom: 1.25rem; left: 1.25rem; background: #fff; border-radius: 12px; padding: .8rem 1.2rem; display: flex; align-items: center; gap: .75rem; box-shadow: 0 4px 20px rgba(15,39,68,.18); }
.map-pill p { font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 700; color: var(--blue-dark); line-height: 1.3; margin: 0; }
.map-pill p span { display: block; font-weight: 400; color: var(--slate); font-size: .73rem; }

/* ── CTA box ── */
.cta-box { position: relative; background: var(--blue-dark); border-radius: 24px; padding: 4.5rem 4rem; max-width: 900px; margin: 0 auto; overflow: hidden; text-align: center; }
.cta-box::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(58,143,212,.18) 0%, transparent 65%); pointer-events: none; }
.cta-box::after  { content: ''; position: absolute; bottom: -60px; left: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(25,92,181,.25) 0%, transparent 65%); pointer-events: none; }
.cta-box .hubb-eyebrow { position: relative; z-index: 1; color: rgba(255,255,255,.5); }
.cta-box h2 { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.cta-box h2 em { font-style: normal; color: var(--accent); }
.cta-box p { color: rgba(255,255,255,.6); font-size: 1.05rem; line-height: 1.75; max-width: 520px; margin: 0 auto 2.5rem; position: relative; z-index: 1; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Package chooser modal ── */
.hubb-pkg-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.72); backdrop-filter: blur(4px); z-index: 10000; align-items: center; justify-content: center; padding: 1rem; }
.hubb-pkg-overlay.is-open { display: flex; }
.hubb-pkg-modal { background: #fff; border-radius: 22px; width: 100%; max-width: 480px; box-shadow: 0 30px 80px rgba(10,20,40,.3); animation: modalIn .28s cubic-bezier(.16,1,.3,1); overflow: hidden; border: 1px solid #9d9d9d; }
.hubb-pkg-head { background: var(--blue-dark); border-radius: 20px 20px 0 0; padding: 1.5rem 2rem 1.25rem; position: relative; }
.hubb-pkg-head .modal-eyebrow { font-family: 'Poppins', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.55); display: block; margin-bottom: .4rem; }
.hubb-pkg-head h3 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.25; }
.hubb-pkg-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.12); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: rgba(255,255,255,.8); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.hubb-pkg-close:hover { background: rgba(255,255,255,.22); color: #fff; }
.hubb-pkg-body { padding: 1.5rem 1.75rem 2rem; display: flex; flex-direction: column; gap: .75rem; }
.hubb-pkg-option { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1.5px solid #e2e8f0; border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; background: #f8fafc; text-align: left; width: 100%; font-family: inherit; }
.hubb-pkg-option:hover { border-color: var(--accent); background: #eef6ff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58,143,212,.15); }
.hubb-pkg-option-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hubb-pkg-option-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hubb-pkg-option--fix  .hubb-pkg-option-icon { background: #0f2744; }
.hubb-pkg-option--flex .hubb-pkg-option-icon { background: var(--blue-mid); }
.hubb-pkg-option--day  .hubb-pkg-option-icon { background: #4884a7; }
.hubb-pkg-option-text { display: flex; flex-direction: column; gap: .15rem; }
.hubb-pkg-option-label { font-family: 'Poppins', sans-serif; font-size: .92rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.hubb-pkg-option-desc { font-size: .8rem; color: #64748b; line-height: 1.45; }
.hubb-pkg-option-arrow { margin-left: auto; color: #cbd5e1; font-size: 1.1rem; flex-shrink: 0; transition: color .2s, transform .2s; }
.hubb-pkg-option:hover .hubb-pkg-option-arrow { color: var(--accent); transform: translateX(3px); }

/* ── Order modal ── */
@keyframes modalIn { from { transform: translateY(28px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.hubb-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.72); backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; }
.hubb-modal-overlay.is-open { display: flex; }
.hubb-modal { background: #fff; border-radius: 15px 0 0 15px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 30px 80px rgba(10,20,40,.3); animation: modalIn .28s cubic-bezier(.16,1,.3,1); }
.hubb-modal-head { background: var(--blue-dark); border-radius: 14px 0 0; padding: 1.75rem 2rem 1.5rem; position: relative; }
.hubb-modal-head .modal-eyebrow { font-family: 'Poppins', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); display: block; margin-bottom: .35rem; }
.hubb-modal-head h3 { font-family: 'Poppins', sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.25; }
.hubb-modal-head h3 em { font-style: normal; color: var(--accent); }
.hubb-modal-close { position: absolute; top: 1.1rem; right: 1.25rem; background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.7); width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.hubb-modal-close:hover { background: rgba(255,255,255,.22); color: #fff; }
.hubb-modal-body { padding: 1.75rem 2rem 2rem; }
.hubb-modal-body .mf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.hubb-modal-body .mf-group { display: flex; flex-direction: column; margin-bottom: .85rem; }
.hubb-modal-body .mf-group:last-of-type { margin-bottom: 0; }
.hubb-modal-body label { font-family: 'Poppins', sans-serif; font-size: .75rem; font-weight: 700; color: var(--slate); margin-bottom: .35rem; letter-spacing: .02em; }
.hubb-modal-body input[type="text"],
.hubb-modal-body input[type="email"],
.hubb-modal-body input[type="tel"],
.hubb-modal-body textarea,
.hubb-modal-body select { border: 1.5px solid #e2e8f0; border-radius: 10px; padding: .7rem .95rem; font-size: .9rem; font-family: inherit; color: var(--blue-dark); background: #f8fafc; width: 100%; box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
.hubb-modal-body input:focus,
.hubb-modal-body textarea:focus,
.hubb-modal-body select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,143,212,.14); background: #fff; }
.hubb-modal-body textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.modal-package-badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--blue-pale); color: var(--blue-mid); font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 700; padding: .45rem 1rem; border-radius: 20px; margin-bottom: 1.25rem; }
.modal-package-badge svg { width: 14px; height: 14px; stroke: var(--blue-mid); fill: none; stroke-width: 2.5; }
.modal-gdpr { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1rem; padding: .9rem 1rem; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; }
.modal-gdpr input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.modal-gdpr label { font-size: .8rem; color: var(--slate); line-height: 1.55; font-weight: 400; letter-spacing: 0; }
.modal-gdpr label a { color: var(--blue-mid); }
.modal-result { display: none; text-align: center; padding: 2rem 1rem; }
.modal-result.is-success .modal-result-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.modal-result.is-success h4 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: #16a34a; margin-bottom: .5rem; }
.modal-result.is-success p, .modal-result.is-error p { color: var(--slate); font-size: .9rem; line-height: 1.6; }
.modal-result.is-error h4 { color: #dc2626; }
.modal-hint { font-size: .76rem; color: var(--slate-light); margin-top: 1rem; text-align: center; line-height: 1.5; }

/* ── Utility classes ── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ── Form feedback messages ── */
.form-message-success { padding: 1rem 1.25rem; border-radius: 12px; font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #15803d; }
.form-message-error   { padding: 1rem 1.25rem; border-radius: 12px; font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; background: #fef2f2; border: 1.5px solid #fecaca; color: #dc2626; }

/* ── Social strip ── */
.newsletter-section { padding: 4rem 1.5rem; background: var(--off-white); }
.newsletter-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.newsletter-inner h2 { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--blue-dark); margin-bottom: .75rem; }
.newsletter-inner p { color: var(--slate); line-height: 1.7; margin-bottom: 1.5rem; }
.social-icons-row { display: flex; gap: 1.25rem; justify-content: center; }
.social-icon { color: var(--slate-light); transition: color .25s, transform .25s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.social-icon:hover { color: var(--blue-mid); transform: translateY(-3px); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .location-grid { grid-template-columns: 1fr; }
    .location-map-wrap { order: -1; }
}
@media (max-width: 620px) {
    .cta-box { padding: 3rem 1.5rem; }
    .cta-btns { flex-direction: column; align-items: center; }
    .loc-directions-btn { margin-left: 0; }
}
@media (max-width: 540px) {
    .hubb-modal-body .mf-row { grid-template-columns: 1fr; }
    .hubb-modal-head, .hubb-modal-body { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (max-width: 480px) {
    .hubb-pkg-body { padding: 1.25rem 1.25rem 1.5rem; }
    .hubb-pkg-option { padding: .85rem 1rem; }
}