:root { color-scheme: light; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #f5f6f7;
  overflow: hidden;
}

#templatePreviewImage {
  max-height: 180px;
  width: auto;
  display: block;
  margin: 0 auto;
} 

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* keeps modal within viewport */
}

.modal-body {
  overflow-y: auto;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 5;
  border-top: 1px solid #dee2e6;
}
/* =========================
   Base editor shell
   ========================= */

.oc-editor-wrap{
  position: relative;
  height: calc(100vh - 56px);
  overflow: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.oc-editor-status {
  font-size: 12px;
  color: #666;
  padding: 6px 12px;
}

.oc-editor-toolbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 10000;
  background: #f5f6f7;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.oc-editor-surface{
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 18px;
  min-height: 685px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  outline: none;
}

#sourceBox{
  width: 100%;
  min-height: 685px;
  font-family: Consolas, Monaco, monospace;
  font-size: 14px;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
}


.hidden{ display:none !important; }


.oc-clear::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   Toolbar buttons / dropdowns
   ========================= */

.oc-tbtn{
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.oc-tbtn:hover{ background: rgba(0,0,0,.06); }
.oc-tbtn:active{ background: rgba(0,0,0,.10); }
.oc-tbtn i{ font-size: 16px; line-height: 1; }

.oc-tbtn.active,
details.oc-dd > summary.oc-ddbtn.active{
  background: rgba(0,0,0,.12);
  outline: 1px solid rgba(0,0,0,.18);
}
 
details.oc-dd{
  position: relative;
  display: inline-block;
}

details.oc-dd > summary{
  list-style: none;
}

details.oc-dd > summary::-webkit-details-marker{
  display:none;
}

details.oc-dd > summary.oc-ddbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}

 
details.oc-dd > .oc-ddmenu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  z-index: 9999;
  display: none;
  padding: 6px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}


details.oc-dd > .oc-ddmenu.oc-box-menu {
  width: 350px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

details.oc-dd > .oc-ddmenu.oc-box-menu > button {
  display: grid;
grid-template-columns: 90px 1fr;
  gap: 20px;
  padding: 6px 8px;
  align-items: center;
   width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}

details.oc-dd > .oc-ddmenu.oc-box-menu > button:hover {
  background: #f5f5f5;
}

.oc-boxchip {
  display: block;
  width: 50px;
  height: 18px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}


.oc-boxchip.q03 {
  padding:0px; margin: 0px 0px 0px 0px;}

.oc-boxchip.q04 {
  padding:0px;
}

.oc-boxchip.q05 {background-size: 60%; padding:15px;
margin: 0px 0px 0px 0px;}

.oc-boxchip.q06 {
padding:0px;
margin: 0px 0px 0px 0px;}

.oc-boxchip.q07,
.oc-boxchip.q08 {
}

.oc-boxchip.q09,
.oc-boxchip.q10,{padding:0px;
margin: 0px 0px 0px 0px;}



.oc-boxchip.q11,
.oc-boxchip.q12 {
padding:5px 0px 5px 0px;margin: 0px 0px 0px 0px;}

.oc-boxchip.q12 {	width: 40%;}




details.oc-dd[open] > .oc-ddmenu{ display:block; }

details.oc-dd > .oc-ddmenu button{
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}

details.oc-dd > .oc-ddmenu button:hover{ background: rgba(0,0,0,.06); }
details.oc-dd > .oc-ddmenu button.active{ background: rgba(0,0,0,.10); font-weight: 600; }

.oc-ddsep{
  height: 1px;
  background: rgba(0,0,0,.12);
  margin: 4px 0;
}

.oc-color-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px;
  min-width:260px;
}

.oc-colorbtn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:0;
  background:transparent;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
}

.oc-colorbtn:hover{ background:rgba(0,0,0,.06); }

.oc-swatch{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  display:inline-block;
}

.oc-swatch.oc-tc-primary {
  background: var(--oc-primary, #0d6efd);
}
.oc-swatch.oc-tc-primary-highlight {
  background: var(--oc-primary-highlight, #3d8bfd);
}
.oc-swatch.oc-tc-secondary {
  background: var(--oc-secondary, #6c757d);
}
.oc-swatch.oc-tc-secondary-highlight {
  background: var(--oc-secondary-highlight, #8a8f94);
}

.oc-swatch.oc-tc-purple    { background: #6f42c1; }
.oc-swatch.oc-tc-orange    { background: #fd7e14; }
.oc-swatch.oc-tc-red       { background: #bb0000; }
.oc-swatch.oc-tc-blue      { background: #00558b; }
.oc-swatch.oc-tc-green { background: #276651 !important; }
.oc-swatch.oc-tc-yellow { background: #F4B400 !important; }
.oc-swatch.oc-tc-black   { background: #000000 !important; }
.oc-swatch.oc-tc-white   { background: #ffffff !important; }
.oc-swatch.oc-tc-light-gray   { background: #E9ECEF !important; }
.oc-swatch.oc-tc-dark-gray   { background: #333333 !important; }

 
/* Palette colors*/
.oc-tc-primary { color: var(--oc-primary, #0d6efd) !important; }
.oc-tc-secondary { color: var(--oc-secondary, #6c757d) !important; }
.oc-tc-primary { color: var(--oc-primary, #0d6efd) !important; }
.oc-tc-secondary { color: var(--oc-secondary, #6c757d) !important; }

.oc-tc-purple { color: #5d029f !important; }
.oc-tc-orange { color: #F84600 !important; }
.oc-tc-green { color: #276651 !important; }
.oc-tc-yellow { color: #F4B400 !important; }
.oc-tc-red    { color: #bb0000 !important; }
.oc-tc-blue   { color: #00558b !important; }
.oc-tc-black   { color: #000000 !important; }
.oc-tc-white   { color: #ffffff !important; }
.oc-tc-light-gray   { color: #E9ECEF !important; }
.oc-tc-dark-gray   { color: #333333 !important; }

.oc-colorbtn.oc-clear{ grid-column:1/-1; }

details.oc-dd > .oc-ddmenu.oc-quote-menu {
  min-width: 220px;
}

details.oc-dd > .oc-ddmenu.oc-quote-menu > button {
  display: block;
  width: 100%;
  text-align: left;
}



/* =========================
   Modal stacking / iframe fixes
   ========================= */

#imgPropsModal,
#tableModal,
#layoutModal,
#findReplaceModal,
#linkPropsModal,
#pdfEmbedModal,
#youtubeEmbedModal,
#buttonBuilderModal,
#galleryModal,
#accordionModal,
#templatesModal,
#sectionBgModal,
#carouselModal{
  z-index: 20050 !important;
}

.modal-backdrop {
  z-index: 20000 !important;
}

#imgPropsModal .modal-dialog,
#tableModal .modal-dialog,
#layoutModal .modal-dialog,
#findReplaceModal .modal-dialog,
#linkPropsModal .modal-dialog,
#pdfEmbedModal .modal-dialog,
#youtubeEmbedModal .modal-dialog,
#buttonBuilderModal .modal-dialog,
#galleryModal .modal-dialog,
#accordionModal .modal-dialog,
#templatesModal .modal-dialog,
#sectionBgModal .modal-dialog, 
#carouselModal .modal-dialog{
  z-index: 20060 !important;
  position: relative;
}

/* only table needs visible overflow for table menus */
#tableModal .modal-dialog,
#tableModal .modal-content,
#tableModal .modal-body {
  overflow: visible !important;
}

/* all other modals should scroll normally */
#imgPropsModal .modal-content,
#layoutModal .modal-content,
#findReplaceModal .modal-content,
#linkPropsModal .modal-content,
#pdfEmbedModal .modal-content,
#youtubeEmbedModal .modal-content,
#buttonBuilderModal .modal-content,
#galleryModal .modal-content,
#accordionModal .modal-content,
#templatesModal .modal-content,
#sectionBgModal .modal-content, 
#carouselModal .modal-content{
  overflow: hidden !important;
}

#imgPropsModal .modal-body,
#layoutModal .modal-body,
#findReplaceModal .modal-body,
#linkPropsModal .modal-body,
#pdfEmbedModal .modal-body,
#youtubeEmbedModal .modal-body,
#buttonBuilderModal .modal-body,
#galleryModal .modal-body,
#accordionModal .modal-body,
#templatesModal .modal-body,
#sectionBgModal .modal-body, 
#carouselModal .modal-body{
  overflow: auto !important;
  max-height: 72vh;
}

/* stabilize native selects inside iframe modals */
#imgPropsModal select,
#imgPropsModal .form-select,
#layoutModal select,
#layoutModal .form-select,
#findReplaceModal select,
#findReplaceModal .form-select,
#linkPropsModal select,
#linkPropsModal .form-select,
#pdfEmbedModal select,
#pdfEmbedModal .form-select,
#youtubeEmbedModal select,
#youtubeEmbedModal .form-select,
#buttonBuilderModal select,
#buttonBuilderModal .form-select,
#galleryModal select,
#galleryModal .form-select,
#accordionModal select,
#accordionModal .form-select,
#templatesModal select,
#templatesModal .form-select,
#sectionBgModal select,
#sectionBgModal .form-select,
#carouselModal select,
#carouselModal .form-select{
  position: relative;
  z-index: 20070;
  pointer-events: auto;
}


/* When any Bootstrap modal is open, make the editor chrome inert */
body.modal-open .oc-editor-wrap,
body.modal-open .oc-editor-toolbar,
body.modal-open #editor,
body.modal-open #sourceBox,
body.modal-open #ocImageFloatBar,
body.modal-open #ocTableMenu {
  pointer-events: none !important;
}

/* Keep the modal itself fully interactive */
body.modal-open .modal,
body.modal-open .modal-dialog,
body.modal-open .modal-content,
body.modal-open .modal-header,
body.modal-open .modal-body,
body.modal-open .modal-footer,
body.modal-open .modal *,
body.modal-open .modal-backdrop {
  pointer-events: auto !important;
}

body.modal-open .oc-editor-wrap {
  overflow: hidden !important;
}


/* =========================
   Generic block outlines
   ========================= */

.oc-block-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

figure.oc-figure,
.oc-embed,
.oc-table-wrap {
  position: relative;
}

/* =========================
   Section backgrounds
   ========================= */

.oc-bg-section {
  background-image: var(--oc-bg-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.oc-bg-section[data-overlay="dark"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  pointer-events: none;
}

.oc-bg-section > .container,
.oc-bg-section > .row,
.oc-bg-section > * {
  position: relative;
  z-index: 1;
}

.oc-template-wrap.oc-block-active .oc-bg-section {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* =========================
   Choice button grids
   ========================= */

.oc-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.oc-choice-grid-sm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oc-choice-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.oc-choice-btn:hover {
  background: rgba(0,0,0,.03);
}

.oc-choice-btn.active {
  border-color: rgba(13,110,253,.6);
  background: rgba(13,110,253,.08);
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
}

/* =========================
   Layout tool
   ========================= */

.oc-admin-editor .oc-layout-row {
  border: 1px dashed rgba(0,0,0,.25);
  padding: 10px;
  margin: 10px 0;
}

.oc-admin-editor .oc-layout-row.oc-block-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

.oc-admin-editor .oc-layout-col {
  border: 1px dashed rgba(0,0,0,.2);
  padding: 10px;
  min-height: 40px;
}

.oc-admin-editor .oc-layout-col::before {
  content: "";
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
  font-weight: 600;
}

.oc-admin-editor .oc-layout-col.oc-col-active {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.oc-col-bg-light {
  background: #f8f9fa;
  padding: 20px;
}

.oc-col-bg-dark {
  background: #343a40;
  color: #fff;
  padding: 20px;
}

.oc-col-bg-primary {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  padding: 20px;
}

.oc-col-bg-highlight {
  background: #fff3cd;
  padding: 20px;
}

/* =========================
   Accordion tool
   ========================= */

.oc-accordion-items-list {
  display: grid;
  gap: 8px;
}

.oc-accordion-item-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: #fff;
}

.oc-accordion-item-row input {
  min-width: 0;
}

.accordion.oc-block-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

.accordion-body::after {
  content: "";
  display: block;
  clear: both;
}

.accordion-body img {
  max-width: 100%;
  height: auto;
}

.accordion-body figure,
.accordion-body .oc-figure,
.accordion-body .oc-embed,
.accordion-body .oc-gallery,
.accordion-body .oc-table-wrap {
  max-width: 100%;
}

.accordion-body .align-left,
.accordion-body .align-right {
  max-width: min(50%, 320px);
}

.accordion-body > *:last-child {
  margin-bottom: 0;
}

/* =========================
   Gallery tool
   ========================= */

.oc-gallery {
  display: grid;
  width: 100%;
  margin: 16px 0;
  clear: both;
}

.oc-gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.oc-gallery-gap-sm { gap: 8px; }
.oc-gallery-gap-md { gap: 16px; }
.oc-gallery-gap-lg { gap: 24px; }

.oc-gallery-item {
  margin: 0;
}

.oc-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.oc-gallery-crop .oc-gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.oc-gallery.is-active,
.oc-gallery.oc-block-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

.oc-gallery::before {
  content: "Gallery block — click or right-click to edit. This frame does not appear on live site.";
  display: block;
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.oc-gallery-style-border .oc-gallery-item img {
  border: 1px solid #ddd;
  padding: 2px;
  background: #fff;
}

.oc-gallery-style-rounded .oc-gallery-item img {
  border-radius: 8px;
}

.oc-gallery-style-circle .oc-gallery-item img {
  border-radius: 50%;
}

.oc-gallery-style-shadow .oc-gallery-item img {
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.oc-gallery-image-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.oc-gallery-image-row {
  display: grid;
  grid-template-columns: 24px 56px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: #fff;
}

.oc-gallery-drag {
  cursor: grab;
  user-select: none;
  font-size: 18px;
  line-height: 1;
  color: #666;
  text-align: center;
  padding-top: 16px;
}

.oc-gallery-image-row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.oc-gallery-image-meta {
  display: grid;
  gap: 6px;
}

.oc-gallery-image-name {
  font-size: 12px;
  overflow-wrap: anywhere;
  color: #555;
}

.oc-gallery-image-row.dragging {
  opacity: 0.55;
}

.oc-gallery-image-row.drag-over {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .oc-gallery-4,
  .oc-gallery-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accordion-body .align-left,
  .accordion-body .align-right {
    float: none !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .oc-gallery-4,
  .oc-gallery-3,
  .oc-gallery-2 {
    grid-template-columns: 1fr;
  }
}
.align-left {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.align-right {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
}

/* =========================
   Carousel tool
   ========================= */

.oc-carousel-wrap {
  position: relative;
  width: 100%;
  margin: 16px 0;
  clear: both;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
}

.oc-carousel-wrap.oc-block-active,
.oc-carousel-wrap.is-active {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.oc-carousel-wrap::before {
  content: "Carousel block — double-click or right-click to edit. This frame does not appear on live site.";
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.oc-carousel-wrap .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Treat the carousel like a single editor widget 
.oc-carousel-wrap * {
  pointer-events: none !important;
}*/

/* Width options */
.oc-carousel-wrap.w-100 {
  width: 100%;
}

.oc-carousel-wrap.w-75 {
  width: 75%;
}

.oc-carousel-wrap.w-50 {
  width: 50%;
}

/* Alignment options */
.oc-carousel-wrap.align-center {
  margin-left: auto;
  margin-right: auto;
}

.oc-carousel-wrap.align-right {
  margin-left: auto;
  margin-right: 0;
}

/* Uniform height option */
.oc-carousel-wrap[data-uniform-height="1"] .carousel-item {
  height: var(--oc-carousel-height, 500px);
}

.oc-carousel-wrap[data-uniform-height="1"] .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slide list UI in modal */
.oc-carousel-slide-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.oc-carousel-slide-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #fff;
  cursor: move;
}
.oc-carousel-slide-row img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.oc-carousel-slide-meta {
  display: grid;
  gap: 6px;
}

.oc-carousel-slide-row.dragging {
  opacity: 0.55;
}

.oc-carousel-slide-row.drop-target {
  outline: 2px dashed rgba(13, 110, 253, 0.45);
  outline-offset: 2px;
}

/* =========================
   Table tool
   ========================= */

.oc-table-menu{
  position: absolute;
  z-index: 21000;
  min-width: 190px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.oc-table-menu.hidden{
  display:none !important;
}

.oc-table-menu button{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 10px;
  border:0;
  background:transparent;
  border-radius:6px;
  cursor:pointer;
}

.oc-table-menu button:hover{
  background: rgba(0,0,0,.06);
}

.oc-table-menu .oc-sep{
  height:1px;
  margin:6px 0;
  background: rgba(0,0,0,.12);
}

.oc-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  padding: 8px;
  border: 2px dashed rgba(0,0,0,.15);
  border-radius: 8px;
  background: rgba(0,0,0,.015);
  clear: both;
  cursor: pointer;
}

.oc-table-wrap.is-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
  border-color: rgba(13,110,253,.35);
}

.oc-table-wrap table {
  margin-bottom: 0;
  background: #fff;
}

/* =========================
   Embeds
   ========================= */

.oc-embed:hover {
  outline: 2px dashed rgba(0,0,0,.2);
  outline-offset: 3px;
}

.oc-embed.oc-embed-youtube {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  clear: both;
  cursor: pointer;
  position: relative;
}

.oc-embed.oc-embed-youtube::before {
  content: "Right-click caption or border to edit video This area will not show on live site.";
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.oc-embed.oc-embed-youtube.is-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

.oc-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.oc-ratio::before {
  content: "";
  display: block;
}

.oc-ratio.oc-ratio-16x9::before {
  padding-top: 56.25%;
}

.oc-ratio > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.oc-embed.oc-embed-youtube figcaption {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: #555;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.08);
  border-top: 0;
  cursor: pointer;
}

.oc-embed.oc-embed-pdf {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  clear: both;
  box-sizing: border-box;
  cursor: pointer;
}

.oc-embed.oc-embed-pdf iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  box-sizing: border-box;
}

.oc-embed.oc-embed-pdf figcaption {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #555;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
  box-sizing: border-box;
  cursor: pointer;
}

.oc-embed.oc-embed-pdf.is-active {
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* =========================
   Find/replace highlights
   ========================= */

.oc-find-hit {
  background: #fff3a0;
  outline: 1px solid rgba(0,0,0,.18);
  border-radius: 2px;
}

/* =========================
   Floating image toolbar
   ========================= */

#ocImageFloatBar{
  position: absolute;
  z-index: 11000;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}

#ocImageFloatBar.hidden{ display:none !important; }

#ocImageFloatBar button{ cursor:pointer; }

#ocImageFloatBar .oc-sep{
  width:1px;
  height:18px;
  background: rgba(0,0,0,.15);
  margin: 0 4px;
}

/* =========================
   Anchor marker
   ========================= */

a.oc-anchor{
  display:inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  border-radius: 6px;
  background: rgba(13,110,253,.12);
  border: 1px dashed rgba(13,110,253,.45);
  position: relative;
  margin: 0 4px;
}

a.oc-anchor::after{
  content: "⚓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  line-height:1;
  opacity: .9;
}

/* =========================
   Image spacing utilities
   ========================= */

img.img-m-0 { margin: 0 !important; }
img.img-m-1 { margin: 6px !important; }
img.img-m-2 { margin: 12px !important; }
img.img-m-3 { margin: 18px !important; }
img.img-m-4 { margin: 24px !important; }
img.img-m-5 { margin: 32px !important; }

figure.oc-figure.img-pad-0 { padding: 0 !important; }
figure.oc-figure.img-pad-1 { padding: 6px !important; }
figure.oc-figure.img-pad-2 { padding: 12px !important; }
figure.oc-figure.img-pad-3 { padding: 18px !important; }
figure.oc-figure.img-pad-4 { padding: 24px !important; }
figure.oc-figure.img-pad-5 { padding: 32px !important; }

/* =========================
   Theme token helpers
   ========================= */

 
a.btn[class*="oc-tc-"],
button.btn[class*="oc-tc-"]{
  --oc-btn: currentColor;
  border-color: var(--oc-btn);
}

a.btn.oc-tc-primary,
button.btn.oc-tc-primary {
  --oc-btn: var(--oc-primary, #0d6efd);
  color: var(--oc-btn);
}

a.btn.oc-tc-primary-highlight,
button.btn.oc-tc-primary-highlight {
  --oc-btn: var(--oc-primary-highlight, #3d8bfd);
  color: var(--oc-btn);
}

a.btn.oc-tc-secondary,
button.btn.oc-tc-secondary {
  --oc-btn: var(--oc-secondary, #6c757d);
  color: var(--oc-btn);
}

a.btn.oc-tc-secondary-highlight,
button.btn.oc-tc-secondary-highlight {
  --oc-btn: var(--oc-secondary-highlight, #8a8f94);
  color: var(--oc-btn);
}

a.btn.oc-tc-purple,
button.btn.oc-tc-purple {
  --oc-btn: #5d029f;
  color: var(--oc-btn);
}

a.btn.oc-tc-orange,
button.btn.oc-tc-orange {
  --oc-btn: #F84600;
  color: var(--oc-btn);
}

a.btn.oc-tc-green,
button.btn.oc-tc-green {
  --oc-btn: #276651;
  color: var(--oc-btn);
}

a.btn.oc-tc-yellow,
button.btn.oc-tc-yellow {
  --oc-btn: #F4B400;
  color: var(--oc-btn);
}

a.btn.oc-tc-red,
button.btn.oc-tc-red {
  --oc-btn: #bb0000;
  color: var(--oc-btn);
}

a.btn.oc-tc-blue,
button.btn.oc-tc-blue {
  --oc-btn: #00558b;
  color: var(--oc-btn);
}

a.btn.oc-tc-black,
button.btn.oc-tc-black {
  --oc-btn: #000000;
  color: var(--oc-btn);
}

a.btn.oc-tc-white,
button.btn.oc-tc-white {
  --oc-btn: #ffffff;
  color: var(--oc-btn);
}

a.btn.oc-tc-light-gray,
button.btn.oc-tc-light-gray {
  --oc-btn: #E9ECEF;
  color: var(--oc-btn);
}

a.btn.oc-tc-dark-gray,
button.btn.oc-tc-dark-gray {
  --oc-btn: #333333;
  color: var(--oc-btn);
}

a.btn.oc-btn-fill,
button.btn.oc-btn-fill {
  background: var(--oc-btn);
  color: #fff !important;
  border-color: var(--oc-btn);
}

a.btn.oc-btn-fill.oc-btn-text-light,
button.btn.oc-btn-fill.oc-btn-text-light {
  color: #fff !important;
}

a.btn.oc-btn-fill.oc-btn-text-dark,
button.btn.oc-btn-fill.oc-btn-text-dark {
  color: #111 !important;
}
/* =========================
   Lightbox
   ========================= */

.oc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  padding: 24px;
}

.oc-lightbox.is-open {
  display: flex;
}

.oc-lightbox-inner {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  width: 100%;
  text-align: center;
}

.oc-lightbox img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.oc-lightbox-caption {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
}

.oc-lightbox-close,
.oc-lightbox-prev,
.oc-lightbox-next {
  position: absolute;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  padding: 10px 12px;
}

.oc-lightbox-close {
  top: -8px;
  right: -8px;
}

.oc-lightbox-prev {
  left: -56px;
  top: 50%;
  transform: translateY(-50%);
}

.oc-lightbox-next {
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
}

body.oc-lightbox-open {
  overflow: hidden;
}

/* =========================
   Templates
   ========================= */

.oc-template-list {
  display: grid;
  gap: 10px;
}

.oc-template-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
}

.oc-template-card:hover {
  background: rgba(0,0,0,.02);
}

.oc-template-card.active {
  border-color: rgba(13,110,253,.55);
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
  background: rgba(13,110,253,.06);
}

.oc-template-card-title {
  font-weight: 600;
}

.oc-template-card-meta {
  font-size: 12px;
  color: #666;
}

.oc-template-card-desc {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
}

.oc-template-wrap {
  position: relative;
  margin: 12px 0;
  outline: 2px dashed rgba(0,0,0,.15);
  outline-offset: 2px;
}

.oc-template-wrap.oc-block-active {
  outline: 2px solid rgba(13,110,253,.35);
}

.oc-template-wrap::before {
  content: "Template Block";
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}





.oc-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.oc-btn-bg-primary {
  background-color: var(--oc-primary);
  border-color: var(--oc-primary);
}

.oc-btn-bg-primary-highlight {
  background-color: var(--oc-primary-highlight);
  border-color: var(--oc-primary-highlight);
}

.oc-btn-bg-secondary {
  background-color: var(--oc-secondary);
  border-color: var(--oc-secondary);
}

.oc-btn-bg-secondary-highlight {
  background-color: var(--oc-secondary-highlight);
  border-color: var(--oc-secondary-highlight);
}


/* =========================
   Buttons
   ========================= */
.oc-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.oc-btn-primary {
  background-color: var(--oc-primary);
  border-color: var(--oc-primary);
}

.oc-btn-bg-primary-highlight {
  background-color: var(--oc-primary-highlight);
  border-color: var(--oc-primary-highlight);
}

.oc-btn-bg-secondary {
  background-color: var(--oc-secondary);
  border-color: var(--oc-secondary);
}

.oc-btn-bg-secondary-highlight {
  background-color: var(--oc-secondary-highlight);
  border-color: var(--oc-secondary-highlight);
}

.oc-btn-bg-purple { background-color: #5d029f; border-color: #5d029f; }
.oc-btn-bg-orange { background-color: #F84600; border-color: #F84600; }
.oc-btn-bg-green { background-color: #276651; border-color: #276651; }
.oc-btn-bg-yellow { background-color: #F4B400; border-color: #F4B400; }
.oc-btn-bg-red { background-color: #bb0000; border-color: #bb0000; }
.oc-btn-bg-blue { background-color: #00558b; border-color: #00558b; }
.oc-btn-bg-black { background-color: #000000; border-color: #000000; }
.oc-btn-bg-white { background-color: #ffffff; border-color: #cccccc; }
.oc-btn-bg-light-gray { background-color: #E9ECEF; border-color: #d0d4d8; }
.oc-btn-bg-dark-gray { background-color: #333333; border-color: #333333; }

.oc-btn.oc-tc-white,
.oc-btn.oc-tc-white:hover { color: #ffffff !important; }

.oc-btn.oc-tc-black,
.oc-btn.oc-tc-black:hover { color: #000000 !important; }

.oc-btn.oc-tc-dark-gray,
.oc-btn.oc-tc-dark-gray:hover { color: #333333 !important; }

.oc-btn.oc-tc-light-gray,
.oc-btn.oc-tc-light-gray:hover { color: #E9ECEF !important; }

.oc-btn.oc-tc-primary,
.oc-btn.oc-tc-primary:hover { color: var(--oc-primary) !important; }

.oc-btn.oc-tc-primary-highlight,
.oc-btn.oc-tc-primary-highlight:hover { color: var(--oc-primary-highlight) !important; }

.oc-btn.oc-tc-secondary,
.oc-btn.oc-tc-secondary:hover { color: var(--oc-secondary) !important; }

.oc-btn.oc-tc-secondary-highlight,
.oc-btn.oc-tc-secondary-highlight:hover { color: var(--oc-secondary-highlight) !important; }

.oc-btn.oc-tc-purple,
.oc-btn.oc-tc-purple:hover { color: #5d029f !important; }

.oc-btn.oc-tc-orange,
.oc-btn.oc-tc-orange:hover { color: #F84600 !important; }

.oc-btn.oc-tc-green,
.oc-btn.oc-tc-green:hover { color: #276651 !important; }

.oc-btn.oc-tc-yellow,
.oc-btn.oc-tc-yellow:hover { color: #F4B400 !important; }

.oc-btn.oc-tc-red,
.oc-btn.oc-tc-red:hover { color: #bb0000 !important; }

.oc-btn.oc-tc-blue,
.oc-btn.oc-tc-blue:hover { color: #00558b !important; }

a.btn.oc-btn-full,
button.btn.oc-btn-full {
  display: block;
  width: 100%;
  text-align: center;
}

.oc-shortcodes .oc-ddmenu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 10px;
  min-width: 420px;
  max-width: 520px;
  padding: 10px;
  align-items: start;
}

.oc-shortcodes .oc-ddmenu > button {
  display: block;
  width: 100%;
  text-align: left;
}

.oc-shortcodes .oc-ddmenu > .oc-ddsep {
  grid-column: 1 / -1;
  height: 1px;
  margin: 4px 0;
  background: #d9dee5;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

.fade-in,
.fade-in-text,
.fade-in-image {
  animation: fadeIn 5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}



/* =========================================================
   IMAGE STYLES
   ========================================================= */

/* Image drop shadow */
.img-shadow {
  padding: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 5px #999;
}

/* Rounded variants */
.img-circle { border-radius: 50%; }
.img-rounded { border-radius: 30px; }

/* Polaroid styles (kept) */
.img-polaroid {
  border: 0;
  border-radius: 0;
  position: relative;
  background: #f7f7f7;
  box-shadow: 1px 1px 0 #eee;
}

figure.polaroid { padding: 20px 20px 40px 20px; }

.polaroid > figcaption {
  color: #777;
  margin-top: 5px;
  font-size: 0.8em;
  text-align: center;
}

img.img-polaroid {
  border: 20px solid #f7f7f7;
  border-width: 20px 20px 40px 20px;
}

/* “Polaroid tilt” variants */
.img-polaroidL,
.img-polaroidR {
  border: 0;
  border-radius: 0;
  position: relative;
  background: #f7f7f7;
  box-shadow: 1px 1px 0 #eee;
}

.img-polaroidL { transform: rotate(-5deg); transform-origin: bottom left; }
.img-polaroidR { transform: rotate(5deg);  transform-origin: bottom left; }

figure.img-polaroidL,
figure.img-polaroidR { padding: 20px 20px 40px 20px; }

.img-polaroidL > figcaption,
.img-polaroidR > figcaption {
  color: #777;
  margin-top: 5px;
  font-size: 0.8em;
  font-style: italic;
  text-align: right;
}

.img-polaroidL figcaption:before,
.img-polaroidR figcaption:before { content: "- "; }


/* =========================
   Image spacing utilities
   ========================= */

/* Margin classes on IMG */
img.img-m-0 { margin: 0 !important; }
img.img-m-1 { margin: 6px !important; }
img.img-m-2 { margin: 12px !important; }
img.img-m-3 { margin: 18px !important; }
img.img-m-4 { margin: 24px !important; }
img.img-m-5 { margin: 32px !important; }

/* Padding classes on FIGURE wrapper (preferred for “padding around image”) */
figure.oc-figure.img-pad-0 { padding: 0 !important; }
figure.oc-figure.img-pad-1 { padding: 6px !important; }
figure.oc-figure.img-pad-2 { padding: 12px !important; }
figure.oc-figure.img-pad-3 { padding: 18px !important; }
figure.oc-figure.img-pad-4 { padding: 24px !important; }
figure.oc-figure.img-pad-5 { padding: 32px !important; }



/* =========================
   UL lists
   ========================= */
ul.arrowbox,
ul.heart,
ul.star,
ul.check,
ul.checkbox,
ul.arrow,
ul.arrowcircle,
ul.apple,
ul.gavel {
  list-style: none;
  padding-left: 2.25rem;
  margin-left: 0;
  display: flow-root;
}