/* PostWifi - modern white/light theme. One class per parent container, children styled via parent selectors. */

body.postwifi {
    margin: 0;
    background: #fafafa;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

body.postwifi h1 { font-size: 1.8em; margin: 0 0 8px; font-weight: 700; }
body.postwifi h2 { font-size: 1.2em; margin: 16px 0 8px; font-weight: 600; }
body.postwifi a { color: #2563eb; }
.postwifi-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin: 0 -24px 16px;
    padding: 0 24px;
}
.postwifi-tabs a {
    padding: 12px 16px;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    color: #666;
    margin-bottom: -2px;
}
.postwifi-tabs a:hover { color: #2563eb; }
.postwifi-tabs a.active { color: #2563eb; border-bottom-color: #2563eb; }
.postwifi-tabs-info {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #e5e7eb;
    color: #666;
    font-size: 0.75em;
    font-weight: 700;
    margin-left: 4px;
    cursor: help;
}
.postwifi-tabs a:hover .postwifi-tabs-info { background: #d1d5db; }
body.postwifi input[type=text],
body.postwifi input[type=email],
body.postwifi textarea,
body.postwifi select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    background: #fff;
}
body.postwifi input[type=submit] {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}
body.postwifi input[type=submit]:hover { background: #1d4ed8; }
body.postwifi .panel {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 24px;
}
body.postwifi .panel .panel-header {
    margin: -24px -24px 16px;
    padding: 12px 24px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
}

/* Landing page (main domain) */
.landing-page {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 960px;
    margin: 60px auto 20px;
    padding: 0 20px;
}
.landing-page .landing-intro { flex: 1 1 380px; }
.landing-page .landing-intro .tagline { font-size: 1.2em; color: #444; }
.landing-page .landing-points div {
    padding: 8px 0 8px 28px;
    position: relative;
}
.landing-page .landing-points div:before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}
.landing-page .landing-card { flex: 1 1 380px; }
.landing-page .field { margin-bottom: 14px; }
.landing-page .field > div:first-child { font-size: 0.85em; font-weight: 600; color: #555; margin-bottom: 4px; }
.landing-page .field span { font-size: 0.85em; color: #888; }
.landing-page .divider { border-top: 1px solid #eee; margin: 20px 0; }
.landing-page .location-list { margin-bottom: 20px; }
.landing-page .location-list div { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.landing-page .location-list div span { display: block; font-size: 0.8em; color: #999; }
.landing-footer { text-align: center; color: #999; font-size: 0.85em; padding: 30px 0; }

/* Printable page (tenant root) */
.print-page {
    max-width: 520px;
    margin: 50px auto 20px;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.print-page .panel { padding: 40px 30px; position: relative; }
.print-page-options {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.print-option {
    flex: 1;
    text-align: left;
}
.print-option-label {
    font-size: 0.75em;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.print-option-input,
.print-option-select {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85em;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.print-page h2 { color: #2563eb; letter-spacing: 0.04em; text-transform: uppercase; }
.print-page #postwifi_qrcode { display: flex; justify-content: center; margin: 20px 0; }
.print-page p { color: #555; }
.print-page.theme-horizontal {
    max-width: 840px;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}
.print-page.theme-horizontal .panel { flex: 1; }
.print-page.theme-horizontal .print-page-text { flex: 1; text-align: left; }
.print-page.theme-horizontal #postwifi_qrcode { justify-content: flex-start; margin: 0; }
.print-page.theme-minimal { max-width: 420px; }
.print-page.theme-minimal .panel { display: flex; flex-direction: column; justify-content: flex-end; }
.print-page.theme-minimal .print-page-text { margin-bottom: 30px; }
.print-page.theme-minimal h1 { font-size: 1.2em; margin: 0 0 4px; }
.print-page.theme-minimal p { font-size: 0.85em; margin: 0; }
.print-page-footer { position: absolute; bottom: 12px; right: 12px; font-size: 0.75em; color: #aaa; }
.setup-warning {
    max-width: 520px;
    margin: 16px auto;
    padding: 14px 18px;
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: 8px;
    text-align: center;
}
.page-actions { text-align: center; padding: 16px 0 40px; }
.page-actions a { margin: 0 10px; font-size: 0.9em; }

/* Scan page (guest flow) */
.design-toolbar + * .scan-page,
.scan-page {
    max-width: 440px;
    margin: 40px auto 20px;
    padding: 0 20px;
    text-align: center;
}
.design-toolbar ~ .scan-page {
    margin-top: 80px;
}
.scan-page .panel { padding: 30px 24px; }
.scan-page form { text-align: left; }
.scan-page .field { margin-bottom: 14px; }
.scan-page .field > div:first-child { font-size: 0.85em; font-weight: 600; color: #555; margin-bottom: 4px; }
.scan-page input[type=submit] { width: 100%; }
.scan-page #postwifi_wifiqr { display: flex; justify-content: center; }
.scan-page .wifi-credentials {
    margin-top: 18px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
    font-family: monospace;
    text-align: left;
}
.scan-page .credential-row {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.scan-page .credential-row:last-child { border-bottom: none; }

/* Design toolbar (WYSIWYG) */
.design-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 2px solid #2563eb;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.design-controls {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
.control-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
    margin-right: 6px;
}
.design-input {
    padding: 6px 8px;
    font-size: 0.9em;
    max-width: 140px;
}
.design-input[type=color] {
    cursor: pointer;
    height: 32px;
}
.collect-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}
.collect-controls input[type=radio] {
    margin: 0 4px 0 0;
}
.radio-label {
    font-size: 0.85em;
    margin-right: 12px;
    color: #555;
}
.design-done-btn {
    margin-left: auto;
    background: #10b981;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
}
.design-done-btn:hover {
    background: #059669;
}
.design-toggle-btn {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85em;
    color: #2563eb;
    text-decoration: none;
}
.design-toggle-btn:hover {
    background: #f0f6ff;
    border-color: #2563eb;
}

/* How It Works page */
.how-overview { margin-bottom: 20px; }
.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.how-step {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    text-align: center;
}
.step-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-weight: 700;
    margin-bottom: 8px;
}
.how-step h3 { font-size: 0.95em; margin: 4px 0; }
.how-step p { font-size: 0.85em; color: #666; margin: 4px 0; }
.how-faq { margin-top: 24px; }
.how-faq h3 { margin-bottom: 12px; }
.faq-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 600; margin-bottom: 6px; color: #333; }
.faq-q strong { color: #2563eb; }
.faq-a p { margin: 0; font-size: 0.9em; color: #666; }

/* Pulsing border around the join-wifi QR */
.wifi-qr-pulse {
    display: inline-block;
    padding: 18px;
    border-radius: 16px;
    border: 3px solid #2563eb;
    animation: postwifi-pulse 1.6s ease-in-out infinite;
    margin-top: 60px;
}
@keyframes postwifi-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Admin settings and design */
.admin-page {
    max-width: 640px;
    margin: 30px auto 20px;
    padding: 0 20px;
}
.design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.design-col { padding: 12px; background: #f9f9f9; border-radius: 8px; }
.design-col > div:first-child { font-size: 0.85em; font-weight: 600; color: #555; margin-bottom: 8px; }
.design-link { display: inline-block; margin-top: 12px; font-size: 0.9em; }
.admin-page .panel { margin-bottom: 24px; }
.admin-page .field { margin-bottom: 14px; }
.admin-page .field > div:first-child { font-size: 0.85em; font-weight: 600; color: #555; margin-bottom: 4px; }
.admin-page .settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.admin-page .settings-row .field { margin-bottom: 0; }
.admin-page .settings-row .field > div:first-child { margin-bottom: 4px; }
.admin-page .settings-inline { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.admin-page .settings-inline .label { flex: 0 0 auto; font-size: 0.85em; font-weight: 600; color: #555; white-space: nowrap; }
.admin-page .settings-inline select { flex: 0 0 120px; width: 120px; }
.admin-page table { width: 100%; border-collapse: collapse; }
.admin-page th { text-align: left; font-size: 0.8em; color: #888; padding: 6px 8px; border-bottom: 1px solid #eee; }
.admin-page td { padding: 8px; border-bottom: 1px solid #f4f4f4; font-size: 0.9em; }

/* Owner sign-in */
.signin-page {
    max-width: 420px;
    margin: 60px auto 20px;
    padding: 0 20px;
}
.signin-page a { display: inline-block; margin-top: 12px; font-size: 0.9em; }

/* Post-claim / post-login confirmation */
.bold-page {
    max-width: 520px;
    margin: 80px auto;
    padding: 40px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bold-page .url {
    font-family: monospace;
    font-size: 1.2em;
    background: #f0f6ff;
    border: 1px solid #c7dbff;
    border-radius: 8px;
    padding: 12px;
    margin: 14px 0;
}
.bold-page .btn {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    border-radius: 8px;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
}

/* Print: just the card */
@media print {
    body.postwifi { background: #fff; }
    .page-actions { display: none; }
    .setup-warning { display: none; }
    .messages { display: none; }
    .print-page { margin: 0 auto; }
    .print-page .panel { border: none; box-shadow: none; }
}