/* ==========================================================
 * Flow Extras — front-end styles
 * Drop-in CSS, scoped to .flowx-* — won't fight Divi.
 * ========================================================== */

/* Notices */
.flowx-notice{padding:.85em 1em;border-radius:10px;margin:.6em 0;font:500 14px/1.45 system-ui,sans-serif}
.flowx-notice--success{background:#e8f6ec;color:#176b2f;border:1px solid #c4e6cf}
.flowx-notice--error{background:#fdecec;color:#8a1f1f;border:1px solid #f1c2c2}
.flowx-notice--warn{background:#fff4d6;color:#7a5b00;border:1px solid #f0d97a}

/* Forms */
.flowx-form{display:block;max-width:680px}
.flowx-form p{margin:.65em 0}
.flowx-form label{display:block;font-weight:600;font-size:.92em;color:#222;margin-bottom:.25em}
.flowx-form input[type=text],
.flowx-form input[type=email],
.flowx-form input[type=url],
.flowx-form input[type=tel],
.flowx-form input[type=number],
.flowx-form input[type=date],
.flowx-form input[type=file],
.flowx-form select,
.flowx-form textarea{
  width:100%;padding:.65em .8em;border:1px solid #d3d6dc;border-radius:10px;background:#fff;
  font:inherit;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;
}
.flowx-form textarea{min-height:90px;resize:vertical}
.flowx-form input:focus,.flowx-form select:focus,.flowx-form textarea:focus{outline:none;border-color:#0072ff;box-shadow:0 0 0 3px rgba(0,114,255,.15)}

/* Buttons */
.flowx-btn{display:inline-block;padding:.7em 1.2em;border-radius:999px;font:600 .92em/1 system-ui,sans-serif;text-decoration:none;cursor:pointer;border:0;transition:transform .12s, box-shadow .12s, background .12s}
.flowx-btn--primary{background:linear-gradient(135deg,#0072ff,#00c6ff);color:#fff;box-shadow:0 6px 18px -8px rgba(0,114,255,.7)}
.flowx-btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(0,114,255,.85)}
.flowx-btn--ghost{background:transparent;color:#0072ff;border:1px solid #0072ff}
.flowx-btn--ghost:hover{background:#0072ff;color:#fff}

/* Cards / Grid */
.flowx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;margin:1rem 0}
.flowx-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 #ececec, 0 14px 28px -22px rgba(0,0,0,.18);transition:transform .15s, box-shadow .15s;display:flex;flex-direction:column;border:1px solid #f0f0f3}
.flowx-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 #ececec, 0 28px 42px -24px rgba(0,0,0,.25)}
.flowx-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#eef0f3}
.flowx-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.flowx-card:hover .flowx-card__media img{transform:scale(1.04)}
.flowx-card__body{padding:1rem 1.1rem 1.15rem}
.flowx-card__title{margin:0 0 .35em;font:700 1.05rem/1.3 inherit}
.flowx-card__title a{color:#1a1d22;text-decoration:none}
.flowx-card__title a:hover{color:#0072ff}
.flowx-card__excerpt{font-size:.92em;color:#5a6273;margin:.25em 0 .75em}

.flowx-meta{list-style:none;margin:0;padding:0;font-size:.85em;color:#566;display:flex;flex-direction:column;gap:.18em}
.flowx-meta li{padding:0}
.flowx-meta a{color:#0072ff;text-decoration:none}

.flowx-badge{position:absolute;top:.7rem;left:.7rem;padding:.25em .65em;border-radius:999px;font:700 .72rem/1 system-ui;color:#fff;background:#222}
.flowx-badge--gold{background:linear-gradient(135deg,#d4a017,#ffd56b);color:#3b2700}
.flowx-card.is-featured{border-color:#ffd56b;box-shadow:0 1px 0 #ececec, 0 18px 32px -22px rgba(212,160,23,.45)}

.flowx-open{position:absolute;bottom:.7rem;left:.7rem;font:600 .72em/1 system-ui;padding:.3em .6em;border-radius:999px;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.flowx-open.is-open{background:#1e8e3e}
.flowx-open.is-closed{background:#c0392b}

.flowx-evdate{position:absolute;bottom:.7rem;right:.7rem;background:#111;color:#fff;font:700 .8em/1.1 system-ui;padding:.5em .7em;border-radius:10px;text-align:center}

/* Stars */
.flowx-stars{display:inline-flex;align-items:center;gap:.15em;font-size:1em;line-height:1}
.flowx-star{color:#ddd}
.flowx-star.is-on{color:#ffb302}
.flowx-stars small{margin-left:.35em;color:#888;font-weight:500;font-size:.8em}

/* Star picker (rating form) */
.flowx-stars-pick{direction:rtl;display:inline-flex;justify-content:flex-end;font-size:1.6em;gap:.05em}
.flowx-stars-pick input{display:none}
.flowx-stars-pick label{color:#ddd;cursor:pointer;transition:color .15s}
.flowx-stars-pick input:checked ~ label,
.flowx-stars-pick label:hover,
.flowx-stars-pick label:hover ~ label{color:#ffb302}

/* Directory filter bar */
.flowx-directory__filter{display:flex;flex-wrap:wrap;gap:.5em;margin:.5em 0 1.25em}
.flowx-directory__filter input,
.flowx-directory__filter select{flex:1 1 200px}
.flowx-directory__filter button{flex:0 0 auto}

.flowx-pagination{margin-top:1rem;display:flex;justify-content:center;gap:.4em;flex-wrap:wrap}
.flowx-pagination .page-numbers{padding:.4em .7em;border-radius:8px;background:#f1f2f4;color:#222;text-decoration:none}
.flowx-pagination .page-numbers.current{background:#0072ff;color:#fff}

/* Ad block */
.flowx-ad{position:relative;margin:1.2rem 0;text-align:center}
.flowx-ad__link{display:inline-block;position:relative;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:#fafbfc;border:1px solid #ececec}
.flowx-ad__link img{display:block;max-width:100%;height:auto}
.flowx-ad__link strong{display:block;padding:.5em .75em;background:#fff}
.flowx-ad__badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.7);color:#fff;font:700 .65em/1 system-ui;padding:.25em .5em;border-radius:6px;letter-spacing:.06em}

/* Booking */
.flowx-booking{padding:1.25rem 1.4rem;border-radius:16px;background:linear-gradient(135deg,#f7fbff,#eef7ff);border:1px solid #d8e8fa;margin:1.5rem 0}
.flowx-booking h3{margin-top:0}
.flowx-capacity{font-size:.9em;color:#0072ff}
.flowx-total{font-size:1.15em}
.flowx-methods{display:flex;gap:.9em;flex-wrap:wrap;margin:.6em 0 0}
.flowx-methods label{display:flex;align-items:center;gap:.4em;background:#fff;border:1px solid #e0e6ee;border-radius:10px;padding:.5em .85em;cursor:pointer;font-weight:500}
.flowx-soldout{font-size:1.2em;color:#c0392b;font-weight:700}

/* Reading progress bar */
.flowx-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:9999;pointer-events:none}
.flowx-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0072ff,#00c6ff);transition:width .08s linear}

/* Dark mode toggle button */
.flowx-darkmode{position:fixed;bottom:1.1rem;right:1.1rem;width:44px;height:44px;border-radius:50%;border:0;background:#111;color:#fff;font-size:1.2em;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);z-index:9998;display:grid;place-items:center;transition:transform .15s}
.flowx-darkmode:hover{transform:scale(1.06)}
.flowx-darkmode__moon{display:none}
.flowx-dark .flowx-darkmode__sun{display:none}
.flowx-dark .flowx-darkmode__moon{display:inline}

/* Dark mode palette */
.flowx-dark, .flowx-dark body{background:#0e1116 !important;color:#dfe3ea !important}
.flowx-dark a{color:#7cc1ff}
.flowx-dark .flowx-card,
.flowx-dark .flowx-booking,
.flowx-dark .flowx-form input,
.flowx-dark .flowx-form select,
.flowx-dark .flowx-form textarea{background:#1a1f27 !important;color:#dfe3ea !important;border-color:#2a3140 !important}
.flowx-dark .flowx-card__title a{color:#f1f4f9}
.flowx-dark .flowx-meta{color:#9aa3b3}
.flowx-dark .flowx-booking{background:linear-gradient(135deg,#1a2230,#11192a) !important;border-color:#293247 !important}

/* Floating WhatsApp */
.flowx-floating-wa{position:fixed;bottom:1.1rem;left:1.1rem;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.65em;text-decoration:none;box-shadow:0 12px 28px -8px rgba(37,211,102,.55);z-index:9998;transition:transform .15s}
.flowx-floating-wa:hover{transform:scale(1.07)}

/* Trending widget */
.flowx-trending{counter-reset:tr;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.6em}
.flowx-trending li{counter-increment:tr;display:flex;align-items:center;gap:.7em;background:#fafbfc;border:1px solid #eef0f3;border-radius:12px;padding:.55em .8em;position:relative}
.flowx-trending li::before{content:counter(tr);font:800 1.4em/1 system-ui;color:#0072ff;width:1.4em;text-align:center}
.flowx-trending img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0}
.flowx-trending a{display:flex;align-items:center;gap:.7em;text-decoration:none;color:inherit;flex:1}

/* Claim */
.flowx-claim{padding:1.1rem 1.2rem;border-radius:14px;border:1px dashed #d3d6dc;background:#fdfdfe;margin:1rem 0}
.flowx-claim h4{margin-top:0}

/* WhatsApp link */
.flowx-wa{color:#25d366 !important}

/* Responsive */
@media (max-width: 640px){
  .flowx-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .flowx-card__body{padding:.85rem}
  .flowx-floating-wa{width:48px;height:48px;font-size:1.4em}
  .flowx-darkmode{width:40px;height:40px;font-size:1em}
}
@media (max-width: 420px){
  .flowx-grid{grid-template-columns:1fr}
}