@charset "utf-8";
/* ==========================================================================
   styleforms2.css
   Modern organiser-facing UI: login, control panel, edit event, add event,
   upgrade listing. Reuses --lightblue / --darkblue / --lightgrey / --darkgrey
   already defined in style.css's :root — do not redefine them here.
   ========================================================================== */

:root {
  --of-border: #dcdfec;
  --of-success: #2e9e5b;
  --of-successBg: #e9f7ee;
  --of-amber: #b5820c;
  --of-amberBg: #fdf3e0;
  --of-danger: #b5453f;
  --of-dangerBg: #fdf0ef;
  --of-muted: #6a6d78;
  --of-faint: #9a9da8;
  --of-fieldBg: #fbfbfd;
  --of-promoBg1: #efeafe;
  --of-promoBg2: #f7f5ff;
  --of-promoBorder: #d9d3ff;
}

.ofPage * { box-sizing: border-box; }

.ofPage { color: var(--darkgrey); }

.ofWrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 30px 20px 70px;
}
.ofWrap.ofWrapNarrow { max-width: 440px; }
.ofWrap.ofWrapWide { max-width: 1080px; }

/* ---------- headings / top row ---------- */
.ofTopRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.ofPageTitle {
  font-size: 28px;
  font-weight: 800;
  color: var(--darkblue);
  margin: 0 0 4px;
}
.ofPageSub {
  color: var(--of-muted);
  font-size: 14px;
  margin: 0;
}
.ofPageSub a { color: var(--lightblue); font-weight: 600; }
.ofTopLinks { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- buttons ---------- */
.ofBtn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  text-align: center;
}
.ofBtnPrimary { background: var(--lightblue); color: #fff !important; }
.ofBtnPrimary:hover { background: var(--darkblue); }
.ofBtnGhost {
  background: #fff;
  color: var(--darkblue) !important;
  border: 1.5px solid var(--lightblue);
}
.ofBtnGhost:hover { border-color: var(--lightblue); }
.ofBtnDanger {
  background: #fff;
  color: var(--of-danger) !important;
  border: 1.5px solid #f0d3d3;
}
.ofBtnDanger:hover { background: var(--of-dangerBg); }
.ofBtnSmall { padding: 8px 16px; font-size: 13px; }
.ofBtnFull { width: 100%; padding: 13px 0; }

/* ---------- messages ---------- */
.ofFlash, .ofNotice {
  font-size: 13.5px;
  color: var(--of-success);
  background: var(--of-successBg);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  display: inline-block;
}
.ofError {
  font-size: 13.5px;
  color: var(--of-danger);
  background: var(--of-dangerBg);
  border: 1px solid #f0d3d3;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}

/* ---------- status badges ---------- */
.ofStatus {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.ofStatus-featured { background: var(--of-successBg); color: var(--of-success); }
.ofStatus-awaiting { background: var(--of-amberBg); color: var(--of-amber); }
.ofStatus-standard { background: var(--lightgrey); color: var(--of-muted); }
.ofStatus-ended    { background: #f1f1f6; color: #b7b9c3; }

/* ---------- cards ---------- */
.ofCard {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 2px 14px rgba(30, 20, 80, .06);
  border: 1px solid var(--of-border);
  margin-bottom: 22px;
}
.ofCard h2 {
  font-size: 16px;
  color: var(--darkblue);
  margin: 0 0 18px;
}

.ofPromoCard {
  background: linear-gradient(135deg, var(--of-promoBg1) 0%, var(--of-promoBg2) 100%);
  border: 1.5px solid var(--of-promoBorder);
}
.ofPromoCard h2 { color: var(--darkblue); }
.ofPromoCard p { font-size: 14px; color: #000; max-width: 640px; margin: 0 0 14px; }
.ofPromoList { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.ofPromoList li { font-size: 14px; color: var(--darkgrey); display: flex; gap: 8px; }
.ofPromoList li::before { content: "✓"; color: var(--lightblue); font-weight: 700; }

.ofUpgradeBanner {
  background: linear-gradient(135deg, var(--of-promoBg1) 0%, var(--of-promoBg2) 100%);
  border: 1.5px solid var(--of-promoBorder);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ofUpgradeBanner strong { color: var(--darkblue); font-size: 16px; }
.ofUpgradeBanner p { margin: 6px 0 0; font-size: 13px; color: var(--of-muted); max-width: 420px; }

/* ---------- form fields ---------- */
.ofField { margin-bottom: 20px; }
.ofField.ofFieldFull { width: 100%; }
.ofRow { display: flex; gap: 20px; flex-wrap: wrap; }
.ofRow .ofField { flex: 1; min-width: 200px; }

.ofPage label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--darkgrey);
  margin-bottom: 6px;
}
.ofReq { color: var(--lightblue); }
.ofReadonlyTag { font-weight: 400; color: var(--of-faint); font-size: 12px; }

.ofPage input[type=text],
.ofPage input[type=date],
.ofPage input[type=email],
.ofPage input[type=url],
.ofPage input[type=password],
.ofPage select,
.ofPage textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--of-border);
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--darkgrey);
  background: var(--of-fieldBg);
  font-family: inherit;
}
.ofPage input:focus,
.ofPage select:focus,
.ofPage textarea:focus {
  outline: none;
  border-color: var(--lightblue);
  background: #fff;
}
.ofPage input[readonly] { background: var(--lightgrey); color: var(--of-muted); }
.ofPage textarea { min-height: 110px; resize: vertical; }
.ofHelp { font-size: 14px; color: var(--of-faint); margin-top: 6px; }
.ofHelp a { color: var(--lightblue); font-weight: 600; }
.ofStaticValue {
  padding: 11px 13px;
  background: var(--lightgrey);
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--of-muted);
}

/* file dropzone */
.ofDropzone {
  border: 2px dashed var(--of-border);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: var(--of-faint);
  font-size: 13.5px;
  background: var(--of-fieldBg);
}
.ofDropzone strong { color: var(--lightblue); }
.ofThumbRow { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ofThumbImg {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--lightgrey);
  flex-shrink: 0;
  object-fit: cover;
}
.ofThumbActions a { font-size: 13.5px; font-weight: 700; color: var(--lightblue); display: block; margin-bottom: 6px; }
.ofThumbHint { font-size: 12px; color: var(--of-faint); }

/* music-type chips (checkboxes styled as pills) */
.ofChipGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.ofChip {
  position: relative;
  display: inline-block;
}
.ofChip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ofChip span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--of-border);
  font-size: 13px;
  color: var(--of-muted);
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.ofChip input:checked + span {
  background: var(--lightblue);
  border-color: var(--lightblue);
  color: #fff;
  font-weight: 600;
}
.ofChip input:focus-visible + span { outline: 2px solid var(--darkblue); outline-offset: 2px; }

/* ---------- actions row ---------- */
.ofActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 14px;
}
.ofActionMsg {
  font-size: 15px;
  font-weight: bold;
  color: var(--of-danger);
}

/* ---------- big choose-file button + live preview (add-event wizard) ---------- */
.ofFilePick {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ofFilePick .ofFileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.ofFileBtn {
  padding: 15px 32px;
  font-size: 15.5px;
  cursor: pointer;
}
.ofFileName { font-size: 13px; color: var(--of-muted); }
.ofShareLinks { display: flex; gap: 16px; }
.ofShareLinks a { font-size: 13px; font-weight: 700; color: var(--of-muted); text-decoration: none; }

.ofDangerZone { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--of-border); }
.ofDangerZone p { font-size: 12.5px; color: var(--of-faint); margin: 0 0 10px; }

/* ---------- stepper (add-event wizard) ---------- */
.ofStepper { display: flex; align-items: center; margin-bottom: 30px; }
.ofStep { display: flex; align-items: center; flex: 0 0 auto; }
.ofStepCircle {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0; transition: all .2s;
  background: #fff; color: var(--of-faint); border: 2px solid var(--of-border);
}
.ofStep.ofStepDone .ofStepCircle { background: var(--of-success); color: #fff; border-color: var(--of-success); }
.ofStep.ofStepActive .ofStepCircle { background: var(--lightblue); color: #fff; border-color: var(--lightblue); box-shadow: 0 0 0 4px rgba(82, 60, 229, .18); }
.ofStepLabel { margin-left: 10px; font-size: 15px; font-weight: 600; color: var(--of-faint); white-space: nowrap; }
.ofStep.ofStepActive .ofStepLabel, .ofStep.ofStepDone .ofStepLabel { color: var(--darkgrey); }
.ofStepLine { flex: 1; height: 2px; background: var(--of-border); margin: 0 14px; }
.ofStep.ofStepDone + .ofStepLine { background: var(--of-success); }

.ofStepPanel { display: none; }
.ofStepPanel.ofStepPanelActive { display: block; }

/* hidden by default; shown via jQuery when a music festival type is selected
   (see changeFunc() in free-festival-listing-user.php) */
.musictypewrap { display: none; }

/* the thumbnail-upload popup on festival-edit.php: hidden until #addfilelink
   is clicked, then shown as a centred modal (see the $(document).ready jQuery
   in festival-edit.php) */
div.fileuploaddiv {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 500px;
  max-width: 90vw;
  background: #fff;
  z-index: 1000;
  border: 1px solid var(--of-border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(30, 20, 80, .18);
  padding: 24px;
  margin: 0 0 0 -250px;
}

/* ---------- events list (control panel) ---------- */
.ofEventCard {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border: 1px solid var(--of-border); border-radius: 12px;
  background: #fff; margin-bottom: 12px; flex-wrap: wrap;
}
.ofEventCard .ofEventInfo { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.ofEventThumb { width: 52px; height: 52px; border-radius: 8px; background: var(--lightgrey); flex-shrink: 0; object-fit: cover; }
.ofEventName { font-weight: 700; font-size: 15px; color: var(--darkgrey); margin: 0 0 3px; }
.ofEventMeta { font-size: 13.5px; color: var(--of-muted); margin: 0; }
.ofEventActions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ofActionLink {
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 7px; white-space: nowrap;
  cursor: pointer; border: none; text-decoration: none !important; display: inline-block;
}
.ofActionLink.ofActionEdit { background: var(--lightgrey); color: var(--darkblue) !important; }
.ofActionLink.ofActionPreview {
  background: var(--lightgrey); color: var(--darkblue) !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 10px;
}
.ofActionLink.ofActionPreview svg { display: block; }
.ofActionLink.ofActionUpgrade { background: var(--of-promoBg1); color: var(--lightblue) !important; }
.ofActionLink.ofActionUnapprove { background: #fff; color: var(--of-danger) !important; border: 1px solid #f0d3d3; }

/* ---------- pricing cards (upgrade page) ---------- */
.ofPricingRow { display: flex; gap: 22px; align-items: stretch; flex-wrap: wrap; margin-bottom: 30px; }
.ofPriceCard {
  flex: 1; min-width: 240px; background: #fff; border-radius: 16px; border: 1.5px solid var(--lightblue);
  padding: 30px 26px; display: flex; flex-direction: column; position: relative;
}
.ofPriceCard.ofPopular { box-shadow: 0 8px 30px rgba(82, 60, 229, .16); }
.ofPopularTag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--lightblue); color: #fff;
  font-size: 14px; font-weight: 700; padding: 6px 18px; border-radius: 20px; white-space: nowrap;
}
.ofTierName { font-size: 21px; font-weight: 700; color: var(--darkblue); margin-bottom: 10px; }
.ofPrice { font-size: 30px; font-weight: 800; color: var(--darkgrey); margin-bottom: 2px; }
.ofOneOff { font-size: 12px; color: var(--of-faint); margin-bottom: 20px; }
.ofFeatures { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.ofFeatures li {
  font-size: 13.5px; color: var(--darkgrey); padding: 8px 0; border-top: 1px solid #f1f1f6; display: flex; gap: 8px;
}
.ofFeatures li:first-child { border-top: none; }
.ofFeatures li::before { content: "✓"; color: var(--lightblue); font-weight: 700; }

.ofAddonCard {
  background: #fff; border: 1.5px solid var(--lightblue); border-radius: 14px;
  padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 26px;
}
/* Basic Listing box — ultra-pale grey border (overrides the purple add-on border) */
.ofBasicCard { border-color: #edeef4; }
/* its "Choose this" button gets a matching grey border instead of the purple ghost border */
.ofBasicCard .ofBtnGhost { border-color: #d7d9e3; color: var(--of-faint) !important; }
.ofAddonCard .ofTierName { margin-bottom: 4px; }
.ofAddonCard p { margin: 4px 0 0; font-size: 13px; color: var(--of-muted); max-width: 460px; }
.ofAddonCard .ofPrice { font-size: 20px; margin: 0; }
.ofAddonRight { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

/* add-on checkbox (replaces a separate "Add this" button) */
.ofAddonCard label.ofAddonCheckboxLabel { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ofAddonCheckbox { width: 20px; height: 20px; accent-color: var(--lightblue); cursor: pointer; flex-shrink: 0; }

.ofFootNote { text-align: center; color: var(--of-faint); font-size: 12.5px; margin-top: 10px; }
.ofPaypalRow { text-align: center; margin: 30px 0; }
.ofPaypalRow img { max-width: 260px; height: auto; }

/* upgrade tier "Choose" buttons — larger than the default .ofBtn */
.ofPriceCard .ofBtnFull { font-size: 17px; padding: 15px 0; }

/* card-brand logos above the "powered by Stripe" line */
.ofCardLogos {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ofCardLogos svg { display: block; }

/* ---------- login card ---------- */
.ofLoginCard {
  background: #fff; border-radius: 14px; padding: 32px 30px;
  box-shadow: 0 2px 14px rgba(30, 20, 80, .06); border: 1px solid var(--of-border);
}
.ofDivider { display: flex; align-items: center; gap: 12px; color: #c0c2cb; font-size: 12px; margin: 24px 0 16px; }
.ofDivider::before, .ofDivider::after { content: ""; flex: 1; height: 1px; background: var(--of-border); }
.ofDeviceNote { text-align: center; font-size: 12px; color: var(--of-faint); margin-top: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .ofCard { padding: 22px 18px; }
  .ofRow { flex-direction: column; gap: 0; }
  .ofTopRow { flex-direction: column; }
  .ofPricingRow { flex-direction: column; }
  .ofEventCard { flex-direction: column; align-items: flex-start; }
}