/**
 * Flexibo Page Builder - Frontend Styles
 * Original design system. No third-party code.
 *
 * @package FlexiboPageBuilder
 */

:root {
	--flexibo-color-bg: #ffffff;
	--flexibo-color-fg: #1a1c21;
	--flexibo-color-muted: #5a6072;
	--flexibo-color-primary: #4a6cf7;
	--flexibo-color-primary-hover: #3a5be0;
	--flexibo-color-border: #e6e8ee;
	--flexibo-color-surface: #f7f8fb;
	--flexibo-radius: 12px;
	--flexibo-radius-lg: 20px;
	--flexibo-shadow: 0 6px 24px rgba(26, 28, 33, 0.08);
	--flexibo-shadow-lg: 0 18px 48px rgba(26, 28, 33, 0.12);
	--flexibo-container: 1180px;
	--flexibo-gap: 28px;
	--flexibo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.flexibo-page { font-family: var(--flexibo-font); color: var(--flexibo-color-fg); line-height: 1.6; }
.flexibo-page * { box-sizing: border-box; }
.flexibo-container { max-width: var(--flexibo-container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.flexibo-section { padding-top: 72px; padding-bottom: 72px; }

.flexibo-hero { background: linear-gradient(160deg, #f7f8fb 0%, #eef1fb 100%); text-align: center; }
.flexibo-hero .flexibo-kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--flexibo-color-primary); margin-bottom: 16px; }
.flexibo-hero h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em; }
.flexibo-hero p { font-size: 19px; color: var(--flexibo-color-muted); max-width: 640px; margin: 0 auto 32px; }

.flexibo-button { display: inline-block; background: var(--flexibo-color-primary); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 14px 30px; border-radius: var(--flexibo-radius); transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 14px rgba(74, 108, 247, 0.35); }
.flexibo-button:hover { background: var(--flexibo-color-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(74, 108, 247, 0.45); color: #fff; }

.flexibo-features h2, .flexibo-pricing h2, .flexibo-testimonials h2, .flexibo-faq h2, .flexibo-stats h2, .flexibo-team h2 { text-align: center; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 48px; }

.flexibo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--flexibo-gap); }
.flexibo-card { background: var(--flexibo-color-bg); border: 1px solid var(--flexibo-color-border); border-radius: var(--flexibo-radius-lg); padding: 32px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.flexibo-card:hover { transform: translateY(-4px); box-shadow: var(--flexibo-shadow-lg); border-color: transparent; }
.flexibo-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.flexibo-card p { color: var(--flexibo-color-muted); margin: 0; font-size: 15px; }
.flexibo-price { font-size: 34px; font-weight: 800; color: var(--flexibo-color-primary); margin: 8px 0 16px; }

.flexibo-cta { background: linear-gradient(135deg, #4a6cf7 0%, #6a4cf7 100%); text-align: center; color: #fff; }
.flexibo-cta h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0 0 24px; color: #fff; }
.flexibo-cta .flexibo-button { background: #fff; color: var(--flexibo-color-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.flexibo-cta .flexibo-button:hover { background: #f2f4ff; color: var(--flexibo-color-primary); }

.flexibo-container-section .flexibo-row { display: flex; flex-wrap: wrap; gap: var(--flexibo-gap); }
.flexibo-col { flex: 1 1 0; min-width: 0; }
.flexibo-col-1 { flex-basis: 8.333%; } .flexibo-col-2 { flex-basis: 16.666%; } .flexibo-col-3 { flex-basis: 25%; }
.flexibo-col-4 { flex-basis: 33.333%; } .flexibo-col-5 { flex-basis: 41.666%; } .flexibo-col-6 { flex-basis: 50%; }
.flexibo-col-7 { flex-basis: 58.333%; } .flexibo-col-8 { flex-basis: 66.666%; } .flexibo-col-9 { flex-basis: 75%; }
.flexibo-col-10 { flex-basis: 83.333%; } .flexibo-col-11 { flex-basis: 91.666%; } .flexibo-col-12 { flex-basis: 100%; }

.flexibo-widget-heading { font-size: 24px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
.flexibo-widget-text { color: var(--flexibo-color-muted); margin: 0 0 16px; font-size: 16px; }
.flexibo-widget-image { max-width: 100%; height: auto; border-radius: var(--flexibo-radius); }
.flexibo-spacer { width: 100%; }
.flexibo-widget-divider { border: none; border-top: 1px solid var(--flexibo-color-border); margin: 20px 0; }

@media (max-width: 782px) {
	.flexibo-section { padding-top: 48px; padding-bottom: 48px; }
	.flexibo-container-section .flexibo-row { flex-direction: column; }
	.flexibo-col { flex-basis: 100% !important; }
}

/* ---------------------------------------------------------------------------
 * Flexibo Responsive Utilities (v0.9.0)
 * Implements the responsive classes written by the admin responsive controls:
 * hide-desktop/tablet/mobile, tablet-stack, stack-mobile,
 * mobile-align-center, mobile-reverse.
 * Breakpoints: desktop > 1024px, tablet 768-1024px, mobile < 768px.
 * ------------------------------------------------------------------------- */

/* Desktop and up ( > 1024px ) */
@media (min-width: 1025px) {
	.flexibo-page .flexibo-hide-desktop { display: none !important; }
}

/* Tablet ( 768px - 1024px ) */
@media (min-width: 768px) and (max-width: 1024px) {
	.flexibo-page .flexibo-hide-tablet { display: none !important; }
	.flexibo-page .flexibo-tablet-stack.flexibo-col,
	.flexibo-page .flexibo-tablet-stack .flexibo-col { flex-basis: 100% !important; }
	.flexibo-page .flexibo-container-section .flexibo-row.flexibo-tablet-stack { flex-direction: column; }
}

/* Mobile ( < 768px ) */
@media (max-width: 767px) {
	.flexibo-page .flexibo-hide-mobile { display: none !important; }
	.flexibo-page .flexibo-stack-mobile.flexibo-col,
	.flexibo-page .flexibo-stack-mobile .flexibo-col { flex-basis: 100% !important; }
	.flexibo-page .flexibo-container-section .flexibo-row.flexibo-stack-mobile { flex-direction: column; }
	.flexibo-page .flexibo-mobile-align-center { text-align: center !important; }
	.flexibo-page .flexibo-mobile-align-center .flexibo-button { margin-left: auto; margin-right: auto; }
	.flexibo-page .flexibo-container-section .flexibo-row.flexibo-mobile-reverse { flex-direction: column-reverse; }
}

/* ===== Flexibo Image / Gallery / Flipbook widgets ===== */
.flexibo-widget-image{max-width:100%;height:auto;border-radius:8px;display:block}
.flexibo-widget-gallery{display:grid;gap:10px;margin:14px 0}
.flexibo-gallery-cols-1{grid-template-columns:repeat(1,1fr)}
.flexibo-gallery-cols-2{grid-template-columns:repeat(2,1fr)}
.flexibo-gallery-cols-3{grid-template-columns:repeat(3,1fr)}
.flexibo-gallery-cols-4{grid-template-columns:repeat(4,1fr)}
.flexibo-gallery-cols-5{grid-template-columns:repeat(5,1fr)}
.flexibo-gallery-cols-6{grid-template-columns:repeat(6,1fr)}
.flexibo-gallery-item{display:block;overflow:hidden;border-radius:8px;line-height:0}
.flexibo-gallery-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .35s ease}
.flexibo-gallery-item:hover img{transform:scale(1.06)}
@media(max-width:768px){.flexibo-gallery-cols-3,.flexibo-gallery-cols-4,.flexibo-gallery-cols-5,.flexibo-gallery-cols-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flexibo-widget-gallery{grid-template-columns:repeat(1,1fr)!important}}

.flexibo-widget-flipbook{max-width:720px;margin:20px auto;text-align:center}
.flexibo-flip-stage{position:relative;background:#f4f4f7;border-radius:12px;padding:14px;box-shadow:0 10px 30px rgba(20,20,50,.12);min-height:120px}
.flexibo-flip-page{display:none}
.flexibo-flip-page img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.15);animation:flexiboFlipIn .5s ease}
@keyframes flexiboFlipIn{from{opacity:0;transform:rotateY(-12deg) scale(.98)}to{opacity:1;transform:none}}
.flexibo-flip-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}
.flexibo-flip-nav button{width:44px;height:44px;border-radius:50%;border:0;background:#6d4aff;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .2s,transform .15s}
.flexibo-flip-nav button:hover{background:#5a37e0;transform:scale(1.08)}
.flexibo-flip-nav button:disabled{background:#c9c6d6;cursor:not-allowed;transform:none}
.flexibo-flip-count{font-weight:600;color:#444;min-width:60px}

/* Ad / AdSense widget */
.flexibo-widget-ad{margin:16px 0;text-align:center;min-height:1px;overflow:hidden}
.flexibo-widget-ad ins{margin:0 auto}