/* RESET & VARIABLES */


   
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg-page:#f7f7f7;--bg-panel:#fff;--text:#333;--border:#e0e0e0;
      --input-border:#666;--accent
      :#0066ff;
    }

    .ql-editor p {
  margin: 0 0 0.25em;
  line-height: 1.4;
}


    /* CENTERED WRAPPER */

    /* EDITOR PANEL */
   .editor {
  width: calc(100% - 400px); /* Leave room for preview */
  padding: 2rem;
  box-sizing: border-box;
}
    .editor-section{
      display:none;
      padding-top: 16px;
    } 
    .editor-section.active {
      display: block;

     

       /* fill the editor’s height */
  max-height: 100%;
  min-height: 100vh;
  /* scroll inside this section if it overflows */
  overflow-y: auto;
  /* optional: give a bit of room so the scrollbar doesn’t cover your inputs */
  padding-right: 0.5rem;
    }
    .form-group{margin-bottom:1.75rem; }
    .form-group:has(.fake-select) { overflow: visible; }
    .control-row { overflow: visible; }
    #tingkap_c_settings { overflow: visible; }
    .form-group label{display:block;margin-bottom:0.5rem;color:var(--text);font-size:13px;}
    .form-group input[type="text"],
    .form-group input[type="tel"],  
    .form-group input[type="date"],
    .form-group input[type="number"],
    .form-group input[type="time"],
    .form-group input[type="datetime-local"],
    .form-group select{
      width:100%;
      padding:0.75rem 1rem !important;
      border:1px solid var(--input-border);
      border-radius:20px;
      background:var(--bg-panel);
      color:var(--text);
      margin-bottom:0.75rem;}

      
  @supports (-webkit-touch-callout: none) {
  input[type="datetime-local"] {
    font-size: 16px;
    height: 40px;
    text-align: left !important;
    width: 95% !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box;
    border-radius: 20px;
  }
}


    .control-row{display:flex;gap:0.5rem;margin-bottom:0.75rem; }

    
    .slider-row{display:flex;align-items:center;gap:0.5rem;}
    .slider-row label{flex:0 0 100px;font-size:0.875rem;}
    .slider-row input[type="range"]{flex:1;}
    /* PAGINATION NAV */

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.content {
  max-width: 900px; /* 500 (editor) + 400 (preview) */
  margin: 0 auto;
  position: relative;
}

    /* PREVIEW PANEL */
 .preview {
  position: fixed;
  top: 0;
  right: calc((100% - 1000px) / 2); /* lock it aligned with editor */
  width: 400px;
  height: 100vh;
  border: none;
 


      justify-content:center;}
    .preview iframe {
      width:360px;
      height:640px;
      border:none;
      border-radius:12px;
      box-shadow:0 10px 30px rgba(0,0,0,0.1);
   
    }

  /* toggle button styling (hidden by default) */
.preview-toggle {
  display: none;
  position: fixed;
  border-radius: 50%;

  z-index: 1000;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;

  /* prevent double-tap zoom and other built-in tap gestures */
  touch-action: manipulation;
  /* optionally hide the tap highlight on iOS */
  -webkit-tap-highlight-color: transparent;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: white;
}




/* at the bottom of edit_card.css */

@media (max-width: 600px) {
  /* container stacks vertically */
.content {
  max-width: 900px; /* 500 (editor) + 400 (preview) */
  margin: 0 auto;
  position: relative;
}


  /* off-canvas preview panel */
/* Preview is fixed but aligned with editor+preview centered */
  .preview {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  height: 95vh;
  scale: 0.95;


  transform: translateX(100%); /* Initially hidden offscreen to the right */
  transition: transform 0.4s ease-in-out;
  z-index: 1000;
}

.preview.show {
  transform: translateX(0px); /* Slides into view */
}

  /* make the form a flex‐column that can shrink */
#editForm {
  display: flex;
  flex-direction: column;
     /* fill its parent (.editor) */
  min-height: 0;     /* allow its children to scroll */
  overflow: hidden;  
  padding-bottom: 80px;
}

.editor {
  max-width: 500px;
  height: 100vh;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}
  
input,
select,
textarea {
  font-size: 16px;            /* iOS won’t zoom fields ≥16px */
}

/* optional: disable text-size adjustments */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
/* make each active section the one that scrolls */
.editor-section.active {
      display: block;
       /* fill the editor’s height */
  max-height: 100%;
  min-height: 100vh;
  /* scroll inside this section if it overflows */
  overflow-y: auto;
  /* optional: give a bit of room so the scrollbar doesn’t cover your inputs */
  padding-right: 0.5rem;
    }

/* 2) Let the active section take all available space and scroll vertically */

  /* show the toggle button */
  .preview-toggle {
    display: block;
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 9rem;
    right: 2.5rem;
    z-index: 1100;
     border-radius: 50%;
  }
}





      @font-face {
      font-family: 'Rustic Roadway';
      src: url('./fonts/RusticRoadway.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Modernline';
      src: url('./fonts/modernline.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
  font-family: 'Cormorant';
  src: url('./fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

    .fake-select {
  position: relative;

  
 
}

.control-row {
  display: flex;
  align-items: center; /* vertical center if you like */
  gap: 0.5rem;
}

/* Color combo container for text input + color picker */
.color-combo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-combo input[type="text"] {
  flex: 1 1 auto;
}

.color-combo input[type="color"] {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

/* let the fake dropdown fill all leftover space */
.fake-select {
  flex: 1 1 auto;
  min-width: 0; /* allow it to shrink below its content if needed */
}

/* fix the color input at a small circle */
#sec1_color {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
}

/* optional: ensure your fake-select list items wrap neatly */
.fake-select .options {
  min-width: 100%;
}




.fake-select .selected-option {
  padding: 0.75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: 20px;
  background: var(--bg-panel);
  cursor: pointer;
  height: 40px !important;
}
.fake-select .options {
  list-style: none;
  margin: 0; padding: 0;
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  max-height: 300px; overflow-y: auto;
  display: none; z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 200px;
}

.fake-select.open .options {
  display: block;
}

.fake-select .options li {
  padding: 0.5rem 0.5rem;
  cursor: pointer;
}
.fake-select .options li:hover {
  background: rgba(0,0,0,0.05);
}


.fake-select .options li.active {
  background-color: rgba(0, 0, 0, 0.1);
  /* or whatever highlight color you like */
}

.fake-select .options li.active,
.fake-select .options li:hover {
  cursor: pointer;
}

input[type="color"] {
  border: none;
  padding: 0;
  width: 2.5rem;      /* adjust size as desired */
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

/* WebKit browsers (Chrome, Safari) */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Firefox */
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}





/* SECTION 4 CSS */
  .upload-toolbar {
    margin-bottom: 0.75rem;
  }
  #add-media-btn {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #add-media-btn:disabled {
  background-color: #ccc;      /* Pale grey */
  color: #888;                 /* Dimmed text */
  cursor: not-allowed;         /* 🚫 cursor */
  opacity: 0.7;
}


  .media-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .media-thumbnails .thumbnail {
    position: relative;
    width: 70px;
    height: 70px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .media-thumbnails .thumbnail.empty::before {
    content: '+';
    font-size: 1.5rem;
    color: var(--border);
  }
  .media-thumbnails .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .media-thumbnails .thumbnail .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
  }

  /* ——— toggle switch wrapper ——— */
/* ——— wrapper so input+slider+text line up ——— */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.toggle-switch.is-hidden { display: none !important; }

/* hide the real checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* the “track” */
.toggle-switch .slider {
  display: inline-block;
  width: 50px;
  height: 24px;
  background: #ccc;
  border-radius: 12px;
  position: relative;
  transition: background 0.3s;
  margin-right: 0.5em;
}

/* the circle/“thumb” */
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  top: 3px; left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* when checked, turn the track green */
.toggle-switch input:checked + .slider {
  background: #4CAF50;
}

/* and slide the thumb to the right */
.toggle-switch input:checked + .slider::before {
  transform: translateX(26px);
}

/* little margin before the text label */
.toggle-switch .slider + .label-text {
  margin-left: 0.5em;
}

#slots-container { margin-top:1rem; }
.slot-fieldset { display:none; border:1px solid #ddd; padding:1rem; border-radius:6px; margin-bottom:0.75rem; }
.slot-controls { display:flex; gap:0.5rem; }
.slot-controls button { width:32px; height:32px; font-size:1.2rem; }

.contact-fieldset { display:none; border:1px solid #ddd; padding:1rem; border-radius:6px; margin-bottom:0.75rem; }
.contact-controls { display:flex; gap:0.5rem; }
.contact-controls button { width:32px; height:32px; font-size:1.2rem; }



.slot-fieldset.hidden {
  display: none;
}
.hidden {
  display: none !important;
}

/* group containers */
#sec5_group_children_off,
#sec5_group_children_on {
  margin-top: 1rem;
}
/* make sure the label text sits nicely */
.toggle-switch span + text {
  margin-left: 4px;
}
.form-row {
  display: flex;
  gap: 1rem;
}

.form-row > * {
  flex: 1 1 0;
}
.half-width {
  flex: 1;
}

/* for quill select options */ 




/* for quill dropdown text font type */



/* for quill font size */ 


#preview {
  width: 100%;
  height: 90%;
  border: none;
  display: block;
  background: white;
  scale: 0.8
}

.ql-snow .ql-picker.ql-font {
  min-width: 140px;             /* Remove default min width */
  width: 100%;              /* Let it shrink/expand */
}

.ql-snow .ql-picker.ql-font .ql-picker-options {
  min-width: 100%;          /* Match the label width */
  width: auto;
  white-space: nowrap;      /* Prevent wrapping */
}


/* navigation form */ 

.nav-divider {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  margin: 1rem 0;
  position: relative;
}

.nav-divider::before,
.nav-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background-color: #ccc;
}

.nav-divider::before {
  left: 0;
}

.nav-divider::after {
  right: 0;
}

.editor {
  max-width: 500px;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}
#editForm {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.editor-section.active {
  flex: 1 1 auto;
  overflow-y: hidden !important;
  margin-bottom: 150px;
}

/* Allow dropdowns to overflow in sections with fake-select */
.editor-section.active:has(.fake-select) {
  overflow-y: auto !important;
  overflow-x: visible !important;
}/* Centered bottom nav (max 600px) */
.editor-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  /* center its child */
  display: grid;
  place-items: center;

  /* stop full-width background line */
  background: transparent;
  border-top: 0;

  padding: 0;
  z-index: 100;
  box-sizing: border-box;

  /* let only the inner bar capture clicks (prevents odd overlaps) */
  pointer-events: none;
}

/* The actual bar */
.editor-nav-button {
  width: min(600px, calc(100% - 24px)); /* 12px gutter on both sides */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  background: var(--bg-page, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);

  /* re-enable clicks inside */
  pointer-events: auto;
}

/* Left group can grow/shrink (keep yours) */
.editor-nav-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* Right group stays sized to content (keep yours) */
.editor-nav-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

/* Buttons/select behavior (keep yours) */
.nav-btn { flex: 0 0 auto; white-space: nowrap; }
.nav-select {
  flex: 1 1 8rem;
  min-width: 0;
  width: 1px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small screens tweak */
@media (max-width: 420px) {
  .editor-nav-button { padding: 6px 8px; width: min(600px, calc(100% - 16px)); }
  .nav-btn { padding: .35rem .5rem; font-size: .9rem; }
  .nav-select { font-size: .9rem; }
}



/* login modal to continue */ 

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  display: flex;
  max-width: 800px;
  width: 80%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.modal-left {
  flex: 1;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.modal-left img {
  max-width: 100%;
  height: auto;
}

.modal-right {
  flex: 1;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-wrapper.hidden {
  display: none;
}

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.primary-btn {
  padding: 12px;
  background: #9e7bb5;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.google-btn {
  padding: 12px;
  border: 1px solid #aaa;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.divider {
  text-align: center;
  position: relative;
  margin: 10px 0;
}
.divider::before,
.divider::after {
  content: '';
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  width: 40%;
}
.divider::before {
  left: 0;
}
.divider::after {
  right: 0;
}

.switch-link {
  font-size: 0.9em;
  text-align: center;
}
.switch-link a {
  color: #9e7bb5;
  text-decoration: none;
  font-weight: bold;
}

/* cards for editor */

label.radio-card {
	 cursor: pointer;
}
 label.radio-card .card-content-wrapper {
	 background: #fff;
	 border-radius: 5px;
  height: 100%;
	 min-height: 230px;
	 padding: 15px;
	 display: grid;
	 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
	 transition: 200ms linear;
}
 label.radio-card .check-icon {
	 width: 20px;
	 height: 20px;
	 display: inline-block;
	 border: solid 2px #e3e3e3;
	 border-radius: 50%;
	 transition: 200ms linear;
	 position: relative;
}
 label.radio-card .check-icon:before {
	 content: '';
	 position: absolute;
	 inset: 0;
	 background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
	 background-repeat: no-repeat;
	 background-size: 12px;
	 background-position: center center;
	 transform: scale(1.6);
	 transition: 200ms linear;
	 opacity: 0;
}
 label.radio-card input[type='radio'] {
	 appearance: none;
	 -webkit-appearance: none;
	 -moz-appearance: none;
}
 label.radio-card input[type='radio']:checked + .card-content-wrapper {
	 box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #3057d5;
}
 label.radio-card input[type='radio']:checked + .card-content-wrapper .check-icon {
	 background: #3057d5;
	 border-color: #3057d5;
	 transform: scale(1.2);
}
 label.radio-card input[type='radio']:checked + .card-content-wrapper .check-icon:before {
	 transform: scale(1);
	 opacity: 1;
}
 label.radio-card input[type='radio']:focus + .card-content-wrapper .check-icon {
	 box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
	 border-color: #3056d5;
}
 label.radio-card .card-content img {
	 margin-bottom: 10px;
   width: 100%;
}
 label.radio-card .card-content h4 {
	 font-size: 16px;
	 letter-spacing: -0.24px;
	 text-align: center;
	 color: #1f2949;
	 margin-bottom: 10px;
   
}


 label.radio-card .card-content h5 {
	 font-size: 14px;
	 line-height: 1.4;
	 text-align: center;
	 color: #686d73;

   
}

.radio-card-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 layout on smaller screens */
  gap: 1rem;
  padding-left:5px;
}

.radio-card {
  flex: 1 1 250px; /* grow/shrink, min width */
  max-width: 280px;
  box-sizing: border-box;
}


.radio-card-group.small {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0;
  padding-bottom: 30px;
  margin-top: 1rem;
}

.radio-card.small .card-content-wrapper {
  	 min-height: 130px;
  padding: 10px;
  min-height: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.radio-card.small .card-content h4 {
  font-size: 13px;
  margin: 0;
}

.radio-card.small .check-icon {
  width: 16px;
  height: 16px;
  transform: scale(0.9);
}

/* Language selector radio cards - shorter height */
.radio-card.language .card-content-wrapper {
  min-height: auto;
  padding: 12px 15px;
}

.radio-card.language .card-content h4 {
  font-size: 14px;
  margin: 0;
}

.google-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: #fff;
  color: #444;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.google-btn:hover {
  background-color: #f7f7f7;
}

.google-btn svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .radio-card-group {
    grid-template-columns: repeat(2, 1fr); /* 2x2 layout on smaller screens */
    width: 100%;
  }

    .modal-left {
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.3s ease;
    position: absolute;
  }
}

.radio-card {
  max-width: 100%; /* Let grid handle width */
  box-sizing: border-box;
}
 

/* form validation */

input.error, select.error, textarea.error {
  border: 2px solid red !important;
  background-color: #fff0f0 !important;
}

/* rsvp editor grey out for rsvp toggle */ 

#rsvp-editor-fields.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.8);
}


/* for next prev button pagination */ 
.editor-nav {
  display: flex;
  justify-content: center;


  gap: 0.75rem;
  padding: 1rem;
  background: #f9f9ff;
  border-radius: 10px;
}

.nav-btn {
 border: 1px solid rgb(110, 110, 110);   /* ✅ proper border syntax */
  color: rgb(0, 0, 0);
  padding: 0.5rem 1.25rem;
  background-color: white;

  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s ease;
}

.nav-btn:hover {
  background-color: #a0a0a0;
}

.nav-select {
  appearance: none;
  border: 1px solid #7e7e7e;
  border-radius: 6px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-weight: 500;
  color: #5e4b8b;
  background-color: rgb(255, 255, 255);
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%235e4b8b" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

/* DESIGN SELECTOR MODAL */ 
.design-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.design-modal-content {
  position: relative;
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  max-height: 80vh;
  overflow-y: auto;
  width: 90%;
  max-width: 800px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px; /* move to right */
  font-size: 24px;
  cursor: pointer;
}

#designGrid.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.design-card {
  flex: 0 1 150px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.design-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.design-card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 0.5rem;
}

.design-card p {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}

/* Dock shell */
#previewDock.preview-dock {
  position: fixed;
  right: 30px;
  bottom: 50px;
  z-index: 1000;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius: 14px;
  overflow: hidden;
  transition: inset .25s ease, width .25s ease, height .25s ease, border-radius .25s ease;
}

/* Mini box size (no scaling here) */
#previewDock.preview-dock.mini {
  position: fixed;
  width: 160px;
  height: 284px;
  scale: 0.6;
  opacity: 0.8;
}

/* Fullscreen */
#previewDock.preview-dock.full {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
}

/* Scaler wrapper (mini only) */
#previewDock .preview-scale-wrap {
  --pip-scale: 0.5; /* JS updates this */
  width: calc(100% / var(--pip-scale));
  height: calc(100% / var(--pip-scale));
  transform: scale(var(--pip-scale));
  transform-origin: top left;
}
#previewDock.preview-dock.full .preview-scale-wrap {
  --pip-scale: 1;
  width: 100%;
  height: 100%;
  transform: none;
}

/* Iframe in dock gets full size & no transforms */
#previewDock #preview {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: white;
  scale: 1 !important;
  transform: none !important;
}

/* Dock container: enables smooth touch */
#previewDock {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* The element you transform (wrap) */
.preview-scale-wrap {
  transform-origin: top center;
  transform: scale(var(--pip-scale, 1));
  /* Make wrapper's *box* match the scaled phone size */
  width:  calc(390px * var(--pip-scale, 1));
  height: calc(844px * var(--pip-scale, 1));
}



/* Tap blocker (mini) */
#previewDock .preview-touch-target { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
#previewDock.preview-dock.full .preview-touch-target { display: none; }

/* Full controls + backdrop */
#previewDock .preview-controls { position: absolute; top: 10px; right: 10px; display: none; }
#previewDock.preview-dock.full .preview-controls { display: block; }
#previewDock .close-full { appearance: none; border: 0; background: rgba(0,0,0,.55); color: #fff; padding: 8px 10px; border-radius: 10px; font-size: 16px; }

#previewBackdrop.preview-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(1px); z-index: 999; }
body.no-scroll { overflow: hidden; }


/* iOS Safari / WebKit feature flag */
@supports (-webkit-overflow-scrolling: touch) {
  /* In mini mode, don't transform the wrapper… */
  #previewDock.preview-dock.mini .preview-scale-wrap {
    position: fixed;
    transform: none;
    width: 400px;
    height: 720px;
    scale: 0.4;
    
  }
  /* …instead scale the iframe itself */
  #previewDock.preview-dock.mini iframe {
    transform: scale(var(--pip-scale));
    transform-origin: top left;
    width: calc(100% / var(--pip-scale));
    height: calc(100% / var(--pip-scale));
  }

  /* Optional: transitions on sizing can jank Safari; disable them here */
  #previewDock.preview-dock { transition: none; }
}
.design-btn {
  background: linear-gradient(135deg, #6a5acd, #836fff); /* nice gradient */
  color: white;
  margin-top: 15px;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px; /* pill shape */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.design-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #7a6ee6, #9a84ff);
}

.design-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}


.editor-section.hidden,
.editor-section.gated { display: none !important; }

.radio-card.disabled {
  opacity: 0.5;
  pointer-events: none;     /* stops label from toggling */
  filter: grayscale(0.15);
}
.radio-card .badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1.2;
  vertical-align: middle;
}
.badge.success { background: #e6f6ec; color: #16794b; }
.badge.muted   { background: #f0f1f5; color: #6b7280; }
.badge.upgrade { background: #eef2ff; color: #4338ca; }

/* Only the upload buttons get a visual "disabled" look */
.btn-disabled {
  opacity: .6;
  pointer-events: none;
  cursor: not-allowed;
}
.lock-hint {
  display: inline-block;
  margin-left: .5rem;
  font-size: .85rem;
  opacity: .8;
}

* ──────────────────────────────────────────────────────────
   Packages — clean grid, centered content, bottom price
   ────────────────────────────────────────────────────────── */

/* Layout */
#package-editor-fields .radio-card-group {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stack */
  gap: 14px;
}
@media (min-width: 640px) {
  #package-editor-fields .radio-card-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));  /* desktop: 3-up */
  }
}

/* Card (label) */
#package-editor-fields .radio-card {
  position: relative;
  display: block;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  cursor: pointer;

  
}
#package-editor-fields .radio-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 12px 24px rgba(0,0,0,.10);
}

/* Make whole card clickable while keeping input accessible */
#package-editor-fields .radio-card input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Wrap + interior padding */
#package-editor-fields .card-content-wrapper {
  display: block;
  width: 100%;
  padding: 18px 18px 12px;
  border-radius: 12px; /* for inner rounding only */
  /* space for bottom price badge */
  padding-bottom: 56px;
}

/* Check icon — positioned so it doesn't push content to the right */
#package-editor-fields .check-icon {
  position: absolute;
  top: 14px; left: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  transition: all .18s ease;
}
#package-editor-fields .check-icon::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background .18s ease;
}

/* Content — centered */
#package-editor-fields .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;         /* center horizontally */
  text-align: center;
  gap: 10px;
  min-width: 0;
}

/* Title (will become just the plan name after JS runs) */
#package-editor-fields .radio-card h4 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a; /* slate-900 */
}

/* Features — centered, neat bullets */
#package-editor-fields .feature-list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: .65rem;
  color: #334155; /* slate-700 */
  max-width: 240px;
}
#package-editor-fields .feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
  padding: 2px 0;
  justify-content: start;     /* center line content */
}
#package-editor-fields .feature-list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #cbd5e1; /* slate-300 */
  flex: 0 0 6px;
}

/* Bottom-center price badge (JS will create .price-badge) */
#package-editor-fields .radio-card .price-badge {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: .98rem;
  color: #1e293b;   /* slate-800 */
  background: #f1f5f9; /* slate-100 */
  border: 1px solid #e2e8f0;   /* slate-200 */
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Selected state — highlight wraps the whole card */
#package-editor-fields .radio-card:has(input[type="radio"]:checked) {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,.16), 0 6px 18px rgba(37,99,235,.08);
}
#package-editor-fields .radio-card:has(input[type="radio"]:checked) .check-icon {
  border-color: var(--accent, #2563eb);
}
#package-editor-fields .radio-card:has(input[type="radio"]:checked) .check-icon::after {
  background: var(--accent, #2563eb);
}

/* Fallback for browsers without :has() (keeps old inner outline) */
#package-editor-fields .radio-card input[type="radio"]:checked + .card-content-wrapper {
  box-shadow: inset 0 0 0 2px var(--accent, #2563eb);
}

/* Keyboard focus */
#package-editor-fields .radio-card:focus-within {
  outline: 2px solid #93c5fd;  /* blue-300 */
  outline-offset: 2px;
}

/* "Most popular" chip — keep it top-center on Plus */
#package-editor-fields .radio-card[for="gold"]::after {
  content: "Most popular";
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  background: rgba(37, 99, 235, .10);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, .90);
  padding: 1px 4px;
  font-size: .62rem;
  font-weight: 500;
  border-radius: 999px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #package-editor-fields .radio-card,
  #package-editor-fields .check-icon { transition: none; }

  
}

/* Default price size */
#package-editor-fields .price-badge { font-size: .98rem; }

/* Smaller when showing a status instead of a number */
#package-editor-fields .price-badge.is-status {
  font-size: .12rem !important;
  font-weight: 700;
  letter-spacing: .1px;
}

/* If you don’t use .price-badge and the price lives in the heading */
#package-editor-fields .card-content h4.is-status,
#package-editor-fields .card-content h5.is-status {
  font-size: .95rem;          /* smaller than your normal heading */
  font-weight: 800;
  letter-spacing: .1px;
}
/* badges */
#package-editor-fields .radio-card .badge{
  position: absolute;
  top: 10px; right: 12px;
  z-index: 2;
  display: inline-block;
  padding: 4px 8px;
  font-size: .52rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid;
  line-height: 1;
  background: #f8fafc; /* slate-50 */
}
#package-editor-fields .radio-card .badge.success{
  color: #166534;               /* green-800 */
  border-color: #86efac;        /* green-300 */
  background: #dcfce7;          /* green-100 */
}
#package-editor-fields .radio-card .badge.upgrade{
  color: #1e40af;               /* blue-800 */
  border-color: #93c5fd;        /* blue-300 */
  background: #dbeafe;          /* blue-100 */
}
#package-editor-fields .radio-card .badge.muted{
  color: #475569;               /* slate-700 */
  border-color: #cbd5e1;        /* slate-300 */
  background: #f1f5f9;          /* slate-100 */
}



/* visual lock for cards you disable */
#package-editor-fields .radio-card.disabled{
  opacity: .55;
  cursor: not-allowed;
}
#package-editor-fields .radio-card.disabled *{
  pointer-events: none;
}

#package-editor-fields .radio-card .badge{
  position: absolute;
  top: 10px; right: 12px;
  z-index: 2;
  display: inline-block;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid;
  line-height: 1;
  background: #f8fafc;
}
#package-editor-fields .radio-card .badge.success{
  color: #166534; border-color: #86efac; background: #dcfce7;
}
#package-editor-fields .radio-card .badge.upgrade{
  color: #1e40af; border-color: #93c5fd; background: #dbeafe;
}
#package-editor-fields .radio-card .badge.muted{
  color: #475569; border-color: #cbd5e1; background: #f1f5f9;
}
#package-editor-fields .radio-card.disabled{
  opacity: .55; cursor: not-allowed;
}
#package-editor-fields .radio-card.disabled *{
  pointer-events: none;
}

/* optional */
#package-editor-fields h4 { display: flex; gap: .4rem; align-items: baseline; }
#package-editor-fields h4:has(> .free) { letter-spacing: .2px; }
#package-editor-fields .free {
  font-weight: 800; font-size: .95em; padding: .15rem .5rem;
  border-radius: 999px; background: #eef6ff; color: #0a66c2;
}