/* ==========================================================================
   CAI Conference Portal — stylesheet
   All page styling lives here. Views should carry class="" only; the few
   style="--x:..." attributes left in views set a per-record value (an
   uploaded image URL, a status color) that only PHP knows at render time —
   everything else is a class.
   ========================================================================== */

:root {
  --c-primary: #1043A5;
  --c-primary-dark: #0D3480;
  --c-text: #221C10;
  --c-body: #3A3226;
  --c-muted: #5B5140;
  --c-muted-2: #8B7F63;
  --c-border: #D5DAE0;
  --c-input-border: #CBD1D9;
  --c-cream: #FBF6EA;
  --c-cream-light: #F3E6BE;
  --c-cream-light-2: #E8DFC9;
  --c-hero-text: #F3EAD3;
  --c-hero-text-2: #DCD0AE;
  --c-hero-accent: #4C7FD6;
  --c-success: #2E7D32;
  --c-warning: #B98900;
  --c-danger: #B3261E;
  --c-danger-bg: #FDECEA;
  --c-gray-bg: #F3F4F6;
  --c-gray-text: #6B7280;
  --c-swatch: #DCE4F3;
  --c-swatch-2: #B9C8E8;
  --c-hover:#c9dbff;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Source Sans 3', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; font-family: var(--font-sans); }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-hover); text-decoration: underline; }
input, select, textarea, button { font-family: var(--font-sans); }

@keyframes cf-spin { to { transform: rotate(360deg); } }

/* ---- page chrome ---- */
.cf-page { min-height: 100vh; display: flex; flex-direction: column; color: var(--c-text); background: #fff; }

.cf-topbar { background: var(--c-primary); color: #fff; font-size: 13px; }
.cf-topbar-inner { max-width: 1180px; margin: 0 auto; padding: 6px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }

.cf-header { background: #fff; border-bottom: 3px solid var(--c-primary); }
.cf-header-inner { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cf-brand { display: flex; align-items: center; gap: 14px; }
.cf-brand img { width: 64px; height: 64px; object-fit: contain; }
.cf-brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--c-text); line-height: 1.15; }
.cf-brand-tag { font-size: 12.5px; letter-spacing: .06em; color: var(--c-primary); text-transform: uppercase; font-weight: 600; }

.cf-backbar { background: #fff; border-bottom: 1px solid var(--c-border); }
.cf-backbar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 24px; font-size: 14px; }
.cf-backbar-inner a { font-weight: 600; }

.cf-nav { background: var(--c-primary); }
.cf-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; gap: 2px; flex-wrap: wrap; }
.cf-nav-link { padding: 12px 13px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; background: transparent; color: #fff; }
.cf-nav-link:hover { text-decoration: none; background: rgba(255,255,255,.12); }
.cf-nav-link.is-active { background: #fff; color: var(--c-primary); }
.cf-nav-link.is-active:hover { background: #fff; }

.cf-main { flex: 1; max-width: 1180px; margin: 0 auto; padding: 40px 24px; width: 100%; box-sizing: border-box; background: #fff; }

.cf-footer { background: var(--c-primary); color: #D8CDA8; margin-top: 40px; }
.cf-footer-grid { max-width: 1180px; margin: 0 auto; padding: 36px 24px; display: grid; gap: 32px; grid-template-columns: 1fr; }
.cf-footer-grid--full { grid-template-columns: 2fr 1fr 1fr; }
.cf-footer-brand { font-family: var(--font-serif); color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.cf-footer-text { font-size: 13.5px; line-height: 1.7; margin: 0; color: #fff; }
.cf-footer-text + .cf-footer-text { margin-top: 10px; }
.cf-footer-col-title { color: #fff; font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.cf-footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.cf-footer-links a { color: #fff; }
.cf-footer-bottom { border-top: 1px solid #3A3226; text-align: center; padding: 14px; font-size: 12.5px; color: #fff; }

/* ---- typography ---- */
.cf-page-title { font-family: var(--font-serif); font-size: 30px; margin: 0 0 6px; }
.cf-page-title--lg { font-size: 32px; }
.cf-page-title--tight { margin-bottom: 4px; }
.cf-page-title--spaced { margin-bottom: 20px; }
.cf-page-title--loose { margin-bottom: 24px; }

.cf-page-subtitle { color: var(--c-muted); margin: 0 0 28px; font-size: 14.5px; }
.cf-page-subtitle--gray { color: var(--c-gray-text); }
.cf-page-subtitle--lg { font-size: 15px; margin-bottom: 32px; }
.cf-page-subtitle--spaced { margin-bottom: 32px; }
.cf-page-subtitle--close { margin-bottom: 24px; }

.cf-section-title { font-family: var(--font-serif); font-size: 20px; margin: 28px 0 12px; }
.cf-section-title--list { margin: 36px 0 16px; font-size: 22px; }

.cf-box-title { font-family: var(--font-serif); margin: 0 0 16px; font-size: 18px; }
.cf-box-title--compact { margin: 0 0 4px; font-size: 16px; }
.cf-box-title--section { margin: 16px 0 4px; font-size: 16px; }

.cf-note { margin-top: 28px; font-size: 13.5px; color: #000; }

.cf-bullet-list { padding-left: 20px; font-size: 15px; line-height: 1.8; color: var(--c-body); }

/* These three render admin-authored HTML as-is (Quill/Summernote output,
   often pasted straight from Word). The operator isn't technical and can't
   be relied on to keep it clean or size images sensibly, so the container
   has to defend itself: images and tables can't be wider than the column,
   and any unbroken text (a stray URL, a raw pasted image string) wraps
   instead of blowing out the page width. */
.cf-body-copy, .cf-body-copy--page, .cf-body-copy--prose {
  overflow-wrap: anywhere;
  max-width: 100%;
  overflow-x: auto;
}
.cf-body-copy img, .cf-body-copy--page img, .cf-body-copy--prose img {
  max-width: 100%;
  height: auto;
}
.cf-body-copy table, .cf-body-copy--page table, .cf-body-copy--prose table {
  max-width: 100%;
}
.cf-body-copy { font-size: 15.5px; line-height: 1.7; color: var(--c-body); }
.cf-body-copy--page { font-size: 15px; line-height: 1.7; color: var(--c-body); }
.cf-body-copy--prose { font-size: 15px; line-height: 1.9; color: var(--c-body); }

/* ---- empty / dashed placeholder state ---- */
.cf-empty-state { border: 1px dashed var(--c-border); padding: 60px 24px; text-align: center; }
.cf-empty-title { font-family: var(--font-serif); font-size: 22px; margin: 0 0 8px; }
.cf-empty-text { color: var(--c-muted); font-size: 15px; margin: 0; }

/* ---- cards / boxes ---- */
.cf-card { background: #fff; border: 1px solid var(--c-border); }
.cf-card--content { padding: 32px; max-width: 760px; }
.cf-card--pad28 { padding: 28px; }
.cf-card--pad48 { padding: 48px; text-align: center; }

.cf-sidebar-card { background: #fff; border: 1px solid var(--c-border); padding: 24px; align-self: start; }
.cf-sidebar-card--sticky { position: sticky; top: 24px; }
.cf-sidebar-link { margin-top: 14px; font-size: 13px; text-align: center; }

/* Fee names can run long ("Members - Basic Course (2 Days)"), and the
   sidebar card is narrow — trying to keep name and amount on one flex line
   just wraps the name internally while the amount stays stranded at the
   top, detached from the rest of it. A predictable two-line stack (name,
   then amount right below) never has that failure mode regardless of how
   long the name or how narrow the card is. */
.cf-fee-row { padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.cf-fee-row span { display: block; }
.cf-fee-row strong { display: block; text-align: right; margin-top: 4px; font-size: 15px; }
.cf-fee-note { font-size: 12.5px; color: #000; margin: 14px 0 18px; }

.cf-fee-label-row { font-size: 14px; font-weight: 600; padding: 8px 0; color: var(--c-text); }
.cf-fee-line { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--c-border); }
.cf-fee-total { display: flex; justify-content: space-between; font-size: 16px; padding: 12px 0; border-top: 2px solid var(--c-text); margin-top: 4px; }
.cf-fee-total span { font-weight: 700; }
.cf-fee-total strong { color: var(--c-primary); }
.cf-fee-disclaimer { font-size: 12px; color: var(--c-gray-text); margin-top: 14px; }

/* ---- hero (conference detail page) ---- */
.cf-hero { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); color: var(--c-hero-text); padding: 48px 40px; margin: -8px -8px 32px; }
.cf-hero-date { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-hero-accent); font-weight: 700; }
.cf-hero-title { font-family: var(--font-serif); font-size: 40px; margin: 10px 0 8px; }
.cf-hero-desc { font-size: 17px; max-width: 640px; margin: 0 0 24px; color: var(--c-hero-text-2); }

/* ---- content grids ---- */
.cf-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.cf-content-grid--venue { grid-template-columns: 1.1fr 1fr; }

.cf-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.cf-card-grid--sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

/* ---- cover / placeholder images ---- */
.cf-cover-image { height: 280px; margin-bottom: 32px; background: var(--c-cream-light) var(--cf-bg-image) center/cover no-repeat; }
.cf-cover-image--placeholder { background: linear-gradient(135deg, var(--c-cream-light), var(--c-cream-light-2)); }
.cf-cover-image--sm { height: 220px; margin-bottom: 20px; }

.cf-conf-card { background: #fff; border: 1px solid var(--c-border); overflow: hidden; }
.cf-conf-card-image { height: 245px; background: var(--c-cream-light) var(--cf-bg-image) center/cover no-repeat; }
.cf-conf-card-image--placeholder { background: linear-gradient(135deg, var(--c-cream-light), var(--c-cream-light-2)); }
.cf-conf-card-body { padding: 20px; }
.cf-conf-card-title { font-family: var(--font-serif); font-size: 20px; margin: 12px 0 4px; }
.cf-conf-card-date { margin: 0 0 14px; font-size: 14px; color: var(--c-muted); }

.cf-speaker-photo { width: 140px; height: 170px; background: var(--c-swatch) var(--cf-bg-image) center/cover no-repeat; }
.cf-speaker-photo--placeholder { background: linear-gradient(135deg, var(--c-swatch), var(--c-swatch-2)); }

/* ---- badges ---- */
.cf-badge { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; text-transform: uppercase; }
.cf-badge--live { background: var(--c-success); }
.cf-badge--closed { background: var(--c-muted-2); }

/* ---- buttons ---- */
.cf-btn { display: inline-block; border: none; padding: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer; text-align: center; }
.cf-btn--primary { background: var(--c-primary); color: #fff; }
.cf-btn--secondary { background: var(--c-muted); color: #fff; }
.cf-btn--block { display: block; width: 100%; box-sizing: border-box; }
.cf-btn--block-spaced { margin-top: 20px; }
.cf-btn--sm { padding: 10px 18px; font-size: 14px; font-weight: 600; }
.cf-btn--sm2 { padding: 12px 22px; font-size: 14px; font-weight: 600; }
.cf-btn--lg { padding: 14px 28px; font-size: 15px; margin-top: 22px; }
.cf-btn--outline { background: #fff; color: var(--c-primary); border: 1px solid var(--c-primary); padding: 10px 22px; font-size: 13.5px; font-weight: 600; }
.cf-btn--disabled-look { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--c-gray-bg); color: var(--c-gray-text); border: 1px solid var(--c-border); padding: 13px; font-size: 14px; font-weight: 600; }

/* ---- forms ---- */
.cf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field-grid--full { grid-column: 1 / -1; }
.cf-field-grid--name3 { grid-column: 1 / -1; display: grid; grid-template-columns: 120px 1fr 1fr; gap: 16px; }
.cf-field-grid--name2 { grid-column: 1 / -1; display: grid; grid-template-columns: 120px 1fr; gap: 16px; }

.cf-label { font-size: 13px; font-weight: 600; }
.cf-required { color: var(--c-danger); }

.cf-input, .cf-select, textarea.cf-input {
  width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--c-input-border); margin-top: 6px;
}
textarea.cf-input { resize: vertical; }
.cf-input--disabled { background-color: var(--c-gray-bg); }

.cf-select {
  padding: 10px 32px 10px 10px;
  background-color: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235B5140'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.cf-radio-row { display: flex; gap: 20px; margin-top: 8px; }
.cf-radio-option { display: flex; align-items: center; gap: 6px; font-size: 14px; }

.cf-checkbox-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; font-size: 13.5px; color: var(--c-body); }
.cf-checkbox-row input { margin-top: 3px; }
.cf-checkbox-row--inline { align-items: center; margin-top: -6px; }

.cf-error-box { color: var(--c-danger); font-size: 13.5px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--c-danger); background: var(--c-danger-bg); display: none; }
.cf-hidden { display: none; }
.cf-recaptcha-wrap { margin-top: 20px; }

.cf-loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.85); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; }
.cf-spinner { width: 44px; height: 44px; border: 4px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; animation: cf-spin .8s linear infinite; }
.cf-loading-text { margin-top: 15px; font-weight: 600; color: var(--c-text); }

/* ---- delegates table ---- */
.cf-table-search { width: 100%; max-width: 360px; box-sizing: border-box; padding: 10px; border: 1px solid var(--c-input-border); margin-bottom: 16px; }
.cf-table-wrap { overflow: auto; border: 1px solid var(--c-border); background: #fff; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cf-table thead tr { background: var(--c-primary); color: var(--c-hero-text); text-align: left; }
.cf-table th, .cf-table td { padding: 12px 16px; }
.cf-table tbody tr { border-top: 1px solid var(--c-border); }
.cf-table td.cf-cell-index { color: var(--c-muted-2); }
.cf-table td.cf-cell-strong { font-weight: 600; }
.cf-table-empty { display: none; font-size: 14px; color: var(--c-muted); margin-top: 16px; }
.cf-table-more { text-align: center; margin-top: 18px; }

/* ---- sponsors / speakers detail bits ---- */
.cf-sponsor-item { border: 1px solid var(--c-border); padding: 20px; text-align: center; background: #fff; }
.cf-sponsor-item img { max-width: 100%; height: 90px; object-fit: contain; margin: 0 auto 12px; }
.cf-sponsor-name { font-weight: 600; margin: 0 0 4px; }
.cf-sponsor-package { font-size: 12px; color: var(--c-primary); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; }
.cf-sponsor-desc { font-size: 13.5px; color: var(--c-body); margin: 0; }

.cf-speaker-list { display: flex; flex-direction: column; gap: 24px; }
.cf-speaker-card { background: #fff; border: 1px solid var(--c-border); }
.cf-speaker-card-body { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 28px; }
.cf-speaker-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .02em; margin: 0 0 12px; color: var(--c-primary); }
.cf-speaker-title { font-size: 13px; font-weight: 600; color: var(--c-muted); margin: 0 0 10px; }
.cf-speaker-bio { font-size: 14.5px; line-height: 1.75; color: var(--c-body); margin: 0 0 12px; }
.cf-speaker-bio:last-child { margin-bottom: 0; }
.cf-speaker-org { border-top: 1px solid var(--c-border); background: var(--c-cream); padding: 14px 28px; }
.cf-speaker-org strong { font-size: 14px; color: var(--c-primary); }

/* ---- venue map ---- */
.cf-map-frame { height: 340px; border: 1px solid var(--c-border); }
.cf-map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---- payment status card ---- */
.cf-status-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--c-border); padding: 36px; text-align: center; }
.cf-status-icon { width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; background: var(--cf-status-color); }
.cf-status-title { font-family: var(--font-serif); margin: 0 0 6px; font-size: 24px; color: var(--cf-status-color); }
.cf-status-message { color: var(--c-muted); font-size: 14.5px; margin: 0 0 24px; text-align: center; line-height: 1.6; }
.cf-status-details { text-align: left; background: var(--c-cream); border: 1px solid var(--c-border); padding: 18px; font-size: 14px; }
.cf-status-details-row { display: flex; justify-content: space-between; padding: 6px 0; }

/* ---- payment gateway (auto-submit) ---- */
.cf-gateway-wrap { max-width: 480px; margin: 60px auto; text-align: center; }
.cf-gateway-spinner { width: 44px; height: 44px; margin: 0 auto 18px; border: 4px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; animation: cf-spin .8s linear infinite; }
.cf-gateway-text { font-weight: 600; color: var(--c-text); }

/* ---- 404 ---- */
.cf-notfound-title { font-family: var(--font-serif); font-size: 26px; margin: 0 0 10px; }
.cf-notfound-text { color: var(--c-muted); font-size: 15px; margin: 0 0 20px; }