html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

/*FONT */
@font-face {
  font-family: 'Synonym-Light';
  src: url('../font/Synonym-Light.woff2') format('woff2'),
       url('Synonym-Light.woff') format('woff'),
       url('Synonym-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Synonym-Semibold';
  src: url('../font/Synonym-Semibold.woff2') format('woff2'),
       url('Synonym-Semibold.woff') format('woff'),
       url('Synonym-Semibold.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}

@font-face {
    font-family: 'coveslight';
    src: url('../font/coves_light-webfont.woff2') format('woff2'),
         url('coves_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
 font-family: 'glyphalt65bold';
 src: url('../font/glyphalt65bold.eot');
 src: url('../font/glyphalt65bold.eot?#iefix') format('embedded-opentype'), url('glyphalt65bold.woff') format('woff'), url('glyphalt65bold.ttf') format('truetype'), url('museo_slab_500-webfont.svg#glyphalt65bold') format('svg');
 font-weight: normal;
 font-style: normal;
}

* { box-sizing: border-box; list-style-type:none; color:#1d1e22; font-family:'Synonym-Light', Helvetica, Arial, sans-serif; outline:none; border:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; font-weight: normal;}
body::-webkit-scrollbar, *::-webkit-scrollbar {background:#1d1e22;}
body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {background:#717E86;}
body {  margin: 0;  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;  background: #f2f2f2;  color: #1d1e22;}


/*login*/
 body#gif-login {	flex-wrap: wrap;	margin: 0;	font-family: sans-serif;	font-size: 14px;	background: url('../images/detail.svg')#271247 no-repeat;	background-size: 400px;	background-position: calc(50% - 237px) calc(50% - 240px);	display: flex;
	align-items: center;	justify-content: center;	min-height: 100vh;}
#gif-login .login-card { margin: -116px 0 0 0;background: #fff; border-radius: 6px; padding: 40px; width: 340px; box-shadow: 0 2px 16px rgba(0,0,0,.12); }
#gif-login h1 { font-size: 22px; margin: 0 0 6px; }
#gif-login p.sub { color: #888; margin: 0 0 28px; font-size: 13px; }
#gif-login label { display: block;  font-weight: 600;  font-size: 16px;  margin-bottom: 4px;
  color: #1d1e22;  font-family: 'Synonym-Light', Helvetica, Arial, sans-serif; }
#gif-login input[type="text"], input[type="password"] { margin-bottom: 16px;  width: 100%;  padding: 6px 8px;  border: 1px solid #999;  border-radius: 3px;  font-size: 16px;  color: #1d1e22;  background: #fff; }
#gif-login button[type="submit"] {	font-family: 'coveslight';	letter-spacing: 3px;	text-decoration:none;font-size: 13px;	padding: 10px 19px;	background: #271247;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;}
#gif-login button[type="submit"]:hover {background: #6DC5CD; }
#gif-login .error { background: #fdecea; color: #c0392b; padding: 10px 12px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; }
 #gif-login .login-card img {	max-width: 180px;	margin: 0 auto;}
 #gif-login .login-card .nav-logo {  text-align: center;  margin: 0 0 40px 0;}
 #gif-login #canvas-footer{flex: 0 0 90%; padding: 24px 0px 24px 32px; justify-content: end; position: fixed;  bottom: 0;  width: 90%;}
 #gif-login  #canvas-footer p {  margin: 0;  font-size: 12px;}
  #gif-login  #canvas-footer p,   #gif-login  #canvas-footer a {color:#ffffff;}
#gif-login .login-notice { background: #eaf6ea; color: #2e7d32; padding: 10px 12px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; }
#gif-login .login-back { margin: 16px 0 0; font-size: 13px; text-align: center; }
#gif-login .login-back a { color: #271247; text-decoration: underline; }
#gif-login .login-back a:hover { color: #6DC5CD; }


h1 {font-size: 22px; padding: 0; font-weight: 700;	border: none;	border-bottom-width: medium;	border-bottom-style: none;	border-bottom-color: currentcolor;	background: transparent;	padding: 4px 0;	flex: 1; margin: 0;	outline: none;	color: #1e2d3d;}

#builder-wrap { min-height: 100vh; display: flex; position: relative; }

.btn { font-family: 'coveslight'; letter-spacing: 3px; text-decoration: none;  font-size: 13px; padding: 10px 19px;  border: none;  border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase;}
.btn-always { display:inline-block; font-family: 'coveslight';	letter-spacing: 3px;	text-decoration:none;font-size: 13px;	padding: 10px 19px;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;  -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease; background: #271247;}
.btn-always:hover { background: #6DC5CD; text-decoration: none;}

/*sidebar*/
#sidebar .userActions img {	width: 25.6px;}
#sidebar .userActions a {margin: 15px;	aspect-ratio: 1/1; padding:2px;	border: 1px solid #fff;	border-radius: 50%;	display: flex;	width: 37px;	height: 37px;	justify-content: center; -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease; background:transparent;}
#sidebar .userActions a:hover{background: #C26EAD;}
#sidebar { min-height: 100vh; width: 280px; background: #271247;  color: #fff;  padding: 0 0 70px 0;    flex-shrink: 0;  overflow-y: auto;  display: flex;  flex-direction: column;}
#sidebar .nav-logo {	padding: 18px 16px 14px; display: flex;	align-items: center;}
#sidebar .nav-logo img {width:100%; max-width:120px; }
#sidebar .nav-nav {  display: flex;  flex-direction: column;  padding: 10px 12px 6px;  gap: 4px;}
#sidebar .nav-nav a { color: rgba(255,255,255,.6);  text-decoration: none;  font-size: 16px;    padding: 4px 4px; border-radius: 3px;  transition: color .15s;}
#sidebar .nav-nav a:hover { color: #fff; }
#sidebar .nav-group {  padding: 6px 12px 10px;}
#sidebar .nav-group-label {font-family: 'coveslight';  letter-spacing: 7px;  font-size: 13px;  color: #fff;  margin: 10px 0px 12px 0px;  padding-left: 2px;  text-transform: uppercase;}
#sidebar .nav-item {	display: flex;	align-items: center;	justify-content: space-between;	width: 100%;	padding: 7px 10px;	margin-bottom: 3px;	background: #6881BF;	border: none;	border-radius: 4px;	color: rgba(255,255,255,.9);	text-align: left;	cursor: grab;	font-size: 15px;transition: background .15s;}
#sidebar .nav-item::after {content: '+';font-size: 37px;font-weight: 300;line-height: 12px;	opacity: 0;	transition: opacity .15s;	flex-shrink: 0;	margin-left: 6px;}
#sidebar .nav-item:hover { background: #6DC5CD; }
#sidebar .nav-item:hover::after { opacity: 1; }
#sidebar .nav-item--disabled {   opacity: .35;   cursor: not-allowed;}
#sidebar .nav-item--disabled:hover { background: rgba(255,255,255,.06); }
#sidebar .nav-item--disabled:hover::after { opacity: 0; }
#sidebar .nav-item.ui-draggable-dragging { cursor: grabbing; }

/* canvas */

#canvas-wrap { flex: 1;  display: flex;  flex-direction: column;  padding: 28px 32px;  overflow-y: auto;}
#canvas-wrap.forms-view { overflow-y: hidden; }
#top-bar #form-title { margin-bottom: 10px; flex: 0 0 60%;}
#top-bar #form-title-pencil,
#top-bar #form-title-toggle {	margin: 0 0 -17px 0;	cursor: pointer;	display: flex;	border-radius: 50%;	aspect-ratio: 1/1;	text-align: center;	background: none;	padding: 6px;}
#top-bar #form-title-pencil:hover,
#top-bar #form-title-toggle:hover {background: #eaeaea;}
#top-bar #form-title-wrap {    display: flex;    align-items: center;    gap: 8px;}
#top-bar #form-title input { font-size: 22px; font-weight: 700;  border: none;   border-bottom: 2px solid #ddd;   background: transparent;   padding: 4px 0;   flex: 1;  outline: none;  color: #1e2d3d;}
#top-bar #form-title input:focus { border-bottom-color: #6DC5CD; }
#builder-toolbar-bottom {gap: 11px;	display: flex;	max-width: 960px;	margin: 0 auto;	width: 100%;	padding: 16px;	justify-content: end;}
.formActions img {	width: 27px;}
#field-canvas {animation: flyin 0.7s ease forwards; opacity:0;	flex: 1;min-height: 200px;	border-radius: 6px;	padding: 16px;	max-width: 960px;	margin: 0 auto;	width: 100%;}

.canvas-empty-msg {    color: #1d1e22;    text-align: center;    padding: 48px 0;    pointer-events: none;    font-size: 15px;}

.field-row {position: relative; flex-wrap: wrap; display: flex;    align-items: center;    background: #fafafa;    border: 1px solid #e4e4e4;    border-radius: 5px;    padding: 10px 12px;    margin-bottom: 8px;    cursor: grab;
    transition: box-shadow .15s;}
.field-row:active { cursor: grabbing; }
.field-row--hidden {  background: #ece8f2;  border: 1px solid #b0aaba;}
.field-row.ui-sortable-helper { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.field-row--nav-drag-helper {	width: 600px !important;	box-shadow: 0 4px 16px rgba(0,0,0,.12);	cursor: grabbing;
	pointer-events: none;	padding: 30px 25px;	font-weight: 600;	font-size: 17px;	white-space: nowrap;	overflow: hidden;	text-overflow: ellipsis;	color: #1d1e22;}

.field-row-placeholder { height: 46px; background: #889098; border: 1px dashed #2a3847; border-radius: 5px; margin-bottom: 8px; }
.field-row-actions button:hover {	background: #eaeaea;}
.field-row-handle {  color: #65577b;  margin-right: 12px;   font-size: 16px;   cursor: grab;   user-select: none; position: relative;  left: 0px;}
.field-row-icon-wrap {	width: 53px;	height: 53px;	flex-shrink: 0;	margin-right: 10px;	display: flex;	align-items: center;	justify-content: center;	background:  #f2f2f2;transform: scale(0.8);  border-radius: 50%;	padding: 15px;	position: relative;	left: -5px;}
.field-row-icon-wrap .field-row-icon { width: 25px;  height: 25px;  object-fit: contain;  transform: scale(1.2); }
.field-row-info { flex: 1; min-width: 0; }
.field-row-label {	font-weight: 600;	font-size: 17px;	white-space: nowrap;	overflow: hidden;	text-overflow: ellipsis;	padding: 0 0 9px 0;}
.field-row-type {  font-size: 12px;  color: #2a3847;   text-transform: uppercase;   letter-spacing: .04em;}
.field-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.field-row--auto {  cursor: default;    background: #f0f8f0;    border-color: #c3e6cb;    opacity: .85;}
.field-row-auto-badge {	font-size: 10px;text-transform: uppercase;	letter-spacing: .06em;	color: #2a3847;	border: 1px solid #e4e4e4;	border-radius: 3px;	padding: 2px 3px;	flex-shrink: 0;	margin: 0 0 0 7px;}
.field-row-hidden-badge { position: absolute;  left: 7px;  top: 5px;  transform: scale(1.5); }
.field-row--unconfigured { border-color: #fcd34d; background: #fffbeb; }
.field-row-warning-badge {display: block;width: 100%;	font-size: 15px;	color: #92400e; 
		border-radius: 3px;	padding: 3px 7px;	margin: 5px 0 0 17px;	flex: 0 0 100%;}
.field-row-warning-badge a { color: #92400e; text-decoration: underline; }
.hasProfile { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.btn-profile-pill {	font-size: 12px;	font-weight: 400;	text-transform: uppercase;	letter-spacing: .05em;	color: #fff;
	background: #6881bf;	border: none;	border-radius: 10px;	padding: 2px 11px;	cursor: pointer;	transition: background .15s;	margin: 7px 0 7px 0;}
.btn-profile-pill:hover { background: #6DC5CD; }
.field-row.profile-trigger {	border: 1px solid #6881BF;	background: #e6e6ef;}
.btn-edit-field, .btn-delete-field {padding: 7px;	border: none;	border-radius: 3px;	cursor: pointer;	font-size: 12px;	font-weight: 600;	display: flex;	border-radius: 50%;	aspect-ratio: 1/1;	text-align: center; background: none;   -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease;}

/* Toolbar */

#builder-toolbar { padding: 0;  margin: -10px 0 0 0;    display: flex;   justify-content: flex-end;    align-items: center;    gap: 10px;    padding: 16px 0 0;}
#top-bar {	display: flex;	max-width: 960px;	margin: 0 auto;	width: 100%;	padding: 16px 16px 16px 25px; justify-content: space-between;}
.btn-save-form {	font-family: 'coveslight';	letter-spacing: 3px;	text-decoration:none;font-size: 13px;	padding: 10px 19px;	background: #271247;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;}
.btn-save-form:hover {background: #6DC5CD; }
.btn-save-form span {color:#fff;}
.btn-preview {	font-family: 'coveslight';	text-decoration:none;letter-spacing: 3px;	font-size: 13px;	padding: 10px 19px;	background: #C26EAD;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;}
.btn-preview:hover {background: #6DC5CD; }


#builder-overlay {  display: none;  position: fixed;   inset: 0;   background: rgba(10, 18, 30, .42);   z-index: 100;   cursor: not-allowed;}
#builder-overlay.active { display: block; }
body.panel-open .btn-edit-field,
body.panel-open .btn-delete-field { visibility: hidden; }



/* Options panel */

#options-panel { -webkit-transition: all 1s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease;  width: 0px;  background: #1a1236;
    flex-shrink: 0;    display: flex;   position: relative;  color:#fff;  z-index: 101; }

#options-panel.open { display: block; width: 300px;}
#options-panel.open .options-panel-inner {padding: 70px 20px 20px 20px;
  max-width: 300px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;}
#options-panel.open.wide { position: absolute; left: 275px; top: 0; height: 100%; width: 700px; }
#options-panel.open.wide .options-panel-inner { max-width: 700px; }
#options-panel.open.wider { position: absolute; left: 275px; top: 0; height: 100%; width: 1400px; }
#options-panel.open.wider .options-panel-inner { max-width: 1400px; }

/* Donation profiles two-column layout */
.gif-donation-columns { display: flex; flex-wrap: wrap; gap: 0; }
.gif-donation-col--base { flex: 0 0 660px; padding-right: 24px; }
.gif-donation-col--profiles { flex: 1 1 0; min-width: 0; background:#6881BF; padding: 24px; }
.gif-profiles-header { flex: 0 0 100%;  position: relative;}

/* Profile tabs */
.gif-profiles-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 0 0 50%;  justify-content: end;}
.gif-profile-tab { padding: 8px 12px 6px 12px;  border-radius: 5px 5px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; color:#fff; user-select: none;  background:#3d3971;  color: #fff;}
.gif-profile-tab--active { background: #6881BF; color: #fff; }
.gif-profile-tab--base { cursor: default; opacity: 0.4; }
.gif-profile-add-btn { margin-left: auto; padding: 5px 10px; background: transparent; border: 1px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.6); border-radius: 3px; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }


/* Profile config area */
.gif-profile-config { display: none; }
.gif-profile-config.gif-profile-config--active { display: block; }
.gif-profile-base-notice { font-size: 12px; color: rgba(255,255,255,0.4); padding: 20px 0; font-style: italic; text-align: center; }
.gif-profile-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.45); margin: 0 0 10px; }
.gif-profile-trigger-section {  }
.gif-profile-trigger-types { display: flex; gap: 16px; margin-bottom: 10px; }
.gif-trigger-field-select, .gif-trigger-value-select, .gif-trigger-operator-select { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; background: #fff; color: #1d1e22; display: block; }
.gif-trigger-value-wrap { display: flex; gap: 6px; }
.gif-trigger-value-wrap .gif-trigger-operator-select { flex: 0 0 50%; }
.gif-trigger-value-wrap .gif-trigger-value-select { flex: 1 1 0; }
.gif-trigger-number-input { flex: 1 1 0; margin-top: 6px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; color: #1d1e22; min-width: 0; width: 100%; }
.gif-trigger-inline-wrap label { display: block; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.gif-trigger-inline-input { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; color: #1d1e22; }
.gif-trigger-inline-note { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 8px; font-style: italic; }

/* Override rows */

/* Add Profile button (single-column mode) */
#gif-add-profile-btn { position:absolute; top:20px; right:20px; background: transparent; color: rgba(255,255,255,0.6);  cursor: pointer; padding: 7px;  border: none;   cursor: pointer;  font-size: 12px;  font-weight: 600;  display: flex;  border-radius: 50%;  aspect-ratio: 1/1;  text-align: center;   -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;  -o-transition: all 0.2s ease;  -ms-transition: all 0.2s ease;  transition: all 0.2s ease;}
#gif-add-profile-btn:hover {background: #C26EAD;}
.gif-profile-delete-btn { position:absolute; top: -20px;  right: -2px; background: transparent; color: rgba(255,255,255,0.6);  cursor: pointer; padding: 7px;  border: none;   cursor: pointer;  font-size: 12px;  font-weight: 600;  display: flex;  border-radius: 50%;  aspect-ratio: 1/1;  text-align: center;   -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;  -o-transition: all 0.2s ease;  -ms-transition: all 0.2s ease;  transition: all 0.2s ease;}
.gif-profile-delete-btn:hover {background: #C26EAD; }
.gif-profiles-header {  }
.gif-profile-override-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.gif-profile-override-section:last-child { border-bottom: none; }
.gif-profile-actions {position: relative; }
.gif-override-disabled { opacity: 0.35; pointer-events: none; }
.field-group--locked label, .field-group--locked input { opacity: 0.4; cursor: not-allowed; }

#options-panel h3 {   margin: 0 0 18px;   border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; font-family: 'coveslight'; letter-spacing: 7px; font-size: 15px; color: #fff; margin-bottom: 20px; padding-left: 2px; text-transform: uppercase;}

.option-panel-setting {   margin-bottom: 14px;}

.option-panel-setting label {display: block;margin-bottom: 14px;	cursor: default;	font-size: 12px;	color: #fff;	text-transform: uppercase;	letter-spacing: .04em;}
.option-panel-setting small {display: block;color: #fff;	font-size: 13px;	margin: 16px 0 0px 0;	font-weight: normal;	text-transform: none;}
.option-panel-setting input[type="text"],.option-panel-setting input[type="number"],.option-panel-setting select,.option-panel-setting textarea {  width: 100%;  padding: 6px 8px;  border: 1px solid #ddd;  border-radius: 3px;  font-size: 16px;  color: #1d1e22;margin: 12px 0 0 0;}
.option-panel-setting textarea { resize: vertical; min-height: 72px; }
.option-panel-setting--check label, .option-panel-setting--radio-group label{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-weight: normal; cursor: pointer; margin-bottom: 0; }
.option-panel-setting--check input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 2px; background: transparent; cursor: pointer; position: relative; }
.option-panel-setting--check input[type="checkbox"]:checked,
.option-panel-radio-label input[type="radio"]:checked { background: #6DC5CD; border-color: #fff; }
.option-panel-setting--check input[type="checkbox"]:checked::after,
.option-panel-radio-label input[type="radio"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.option-panel-setting--radio-group { display: flex; flex-direction: column; gap: 6px; }
.option-panel-radio-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-weight: normal; cursor: pointer; margin-bottom: 0; }
.option-panel-radio-label input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; width: 18px;  height: 18px;  border: 1px  solid rgba(255,255,255,0.7); border-radius: 2px; background: transparent; cursor: pointer; position: relative; }

.option-panel-small { font-size: 12px; color: #fff;  padding: 8px 0px;  margin-bottom: 14px;}
.option-panel-smaller { font-size: 10px; color: #fff;  padding: 0px;  margin-bottom: 0px;}

#options-panel #gif-paymentfrequenciestoggles {	display: flex; gap: 5%;}
#options-panel #gif-paymentfrequencies {	display: flex; gap: 8px; align-items: flex-start;}
#options-panel #gif-paymentfrequencies > div:not(#gif-sync-column) { flex: 1; min-width: 0;}
#gif-sync-column { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 10px 2px;}
#gif-sync-column .gif-opt-divider { width: 1px; margin: 7px 0;}
.gif-prof-freq-toggles { display: flex; gap: 5%; }
.gif-prof-frequencies { display: flex; gap: 8px; align-items: flex-start; }
.gif-prof-oo-section, .gif-prof-mo-section { flex: 1; min-width: 0; }
.gif-prof-sync-column { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 10px 2px; }
.gif-prof-sync-column .gif-opt-divider { width: 1px; margin: 7px 0; }
.gif-prof-cc-row { display: flex; gap: 8px; align-items: flex-start; padding: 22px 0; }
.gif-prof-cc-oneoff, .gif-prof-cc-monthly { flex: 1; min-width: 0; }
.gif-sync-pair {	display: flex; flex-wrap:wrap;	align-items: center;	justify-content: center;	min-height: 78px;	margin-bottom: 0px;}
.gif-sync-spacer { min-height: 78px; }
.option-panel-setting--spacer { visibility: hidden; pointer-events: none; }
.gif-sync-btn { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 3px; width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 13px; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.6;}
.gif-sync-btn:hover { border-color: #fff; opacity: 1; background: rgba(255,255,255,0.1);}
#options-panel #gif-cover-costs-row { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0 42px 0;}
#options-panel #gif-cover-costs-row > div { flex: 1; min-width: 0; }
#options-panel .gif-cover-costs-label {  margin: 0;}
#options-panel #gif-anon-row { display: flex; padding: 0 0 22px; }
#options-panel #gif-cc-anon { flex: 0 0 calc(50% - 4px); min-width: 0; }
#options-panel #gif-cc-oneoff-panel, #options-panel #gif-cc-monthly-panel {  display: flex;  gap: 10px;}
#options-panel #gif-cc-oneoff-panel > div, #options-panel #gif-cc-monthly-panel > div {  flex: 0 0 45%;}

.option-panel-setting.option-panel-setting-minmax {display: flex;  gap: 4%;}
.gif-profile-trigger-types {flex-direction: row;	display: flex;	flex-wrap: nowrap;}
.gif-profile-trigger-types > label {flex:0 0 40%;}

.gif-clone-btn {	display: block; opacity:0.6;	margin: 14px 0 15px 0;  color:#fff;
	text-align: left;	font-family: 'coveslight';	text-decoration: none;	letter-spacing: 3px;
	padding: 10px 19px;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;
	background: transparent;	border: 1px solid #ccc;	width: max-content;}
.gif-clone-btn:hover { border-color: #fff; color: #fff; opacity:1;}
.gif-clone-wrap { margin-top: 8px;  margin-bottom: 15px;}
.gif-clone-label { display: block; font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.gif-clone-wrap select { width: 100%; padding: 6px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; font-size: 13px; color: #1d1e22; background: #fff; cursor: pointer; }

.gif-currency-wrap { position: relative; margin: 12px 0 0; }
.gif-currency-sym { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #888; font-size: 14px; pointer-events: none; }
.gif-currency-wrap input[type="number"] { padding-left: 22px; margin: 0; }
.option-panel-small a {color: #fff;}
.option-panel-small a:hover {color: #6DC5CD;}

/* Repeater */

.gif-opt-section-label {	font-weight: 300;	display: block;
  margin-bottom: 14px;
  cursor: default;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;}
.gif-choice-list { list-style: none; margin: 0 0 8px; padding: 0; }
.gif-choice-item,.gif-choice-item--fixed { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; }
.gif-choice-handle { flex-shrink: 0; width: 14px; color: #556; cursor: grab; font-size: 13px; user-select: none; margin: 20px 0 0 0;}
.gif-choice-handle::before { content: '⣿'; }
.gif-choice-item--fixed .gif-choice-handle { cursor: default; opacity: .3; }
.gif-choice-input { flex: 1; padding: 5px 7px; border: 1px solid #3a4a5a; border-radius: 3px; font-size: 13px; color: #1d1e22; background: #fff; }
.gif-choice-item--fixed .gif-choice-input { background: #e8e8e8; color: #999; cursor: not-allowed; }
.gif-choice-remove { width: 22px; height: 22px; flex-shrink: 0; background: none; border: 1px solid #ffffff; border-radius: 3px; cursor: pointer; font-size: 15px; line-height: 1; color: #ffffff; padding: 0; opacity:0.6; margin: 20px 0 0 0;}
.gif-choice-remove:hover { opacity:1;}
.gif-choice-add {	margin: 2px 0 0 20px;font-size: 12px;	color: #fff;	border-radius: 3px;	padding: 4px 10px;	cursor: pointer;	border: 1px solid #ffffff;  opacity:0.6; background: transparent;}
.gif-choice-add:hover { opacity:1;}
.gif-choice-item > div {display:flex; flex-wrap:wrap;}
.gif-choice-item > div > input {  flex: 0 0 100%;  margin: 12px 0 !important;}

.options-panel-actions {padding:12px  0 0 0;  display: flex;  justify-content: end;}

.panel-validation-errors {	background: #e74c3c;padding:  22px 22px;margin: 0;font-size: 18px;color: #c0392b;position: fixed;top: 0;right: 0;width: 100%; font-weight: 600; z-index: 9999;}
.panel-validation-errors ul {  padding: 0;}
.panel-validation-errors li { color: #fff; font-weight: 600;}


.btn-close-options, .btn-cancel-options {font-family: 'coveslight'; text-decoration:none; letter-spacing: 3px; padding: 10px 19px; border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase;}
.btn-close-options  { background: #C26EAD; color: #fff; border: none; }
.btn-cancel-options { background: transparent; color: #888; border: 1px solid #ccc; margin-right: 8px; }

.btn-close-options:hover  { background: #6DC5CD; }
.btn-cancel-options:hover { background: #f5f5f5; color: #555; }

.panel-loading,.panel-error {  color: white;  padding: 10px;  background: #e74c3c;  font-size: 15px;  font-weight: 600;  border-radius: 4px;}

/* Overlay */

#confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,18,30,.5);
    z-index: 600;
    align-items: center;
    justify-content: center;
}
#confirm-overlay.active { display: flex; }

#confirm-box {
    background: #fff;
    border-radius: 6px;
    padding: 28px 28px 22px;
    width: 360px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
}

#confirm-message {font-size: 16px;  color: #1d1e22;  margin: 0 0 22px;  line-height: 1.5;}
#confirm-message .confirm-sub {font-size: 13px; color: #555; margin: 12px 0 6px;}
#confirm-message .confirm-affected-list {font-size: 13px; color: #555; margin: 0; padding-left: 20px; max-height: 160px; overflow-y: auto;}

#confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#confirm-actions button {font-family: 'coveslight';	letter-spacing: 3px;	text-decoration:none;font-size: 13px;	padding: 10px 19px;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;  -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease;
}

#confirm-cancel  { background: #eaeaea; color: #1d1e22 !important; }
#confirm-ok      { background: #e74c3c; color: #fff; }
#confirm-actions button:hover {background:#6DC5CD;}
#notify {position: fixed;top: 0px;	right: 0;	padding: 22px 22px;	color: #fff;		font-weight: 600;	display: none;	z-index: 9999;	width: 100%;	text-align: right;	font-size: 18px;}

#notify.success { background: #65edbd; }
#notify.error   { background: #e74c3c; }

.nav-divider { border-top: 1px solid rgba(255,255,255,.12); margin: 8px 12px; }

#someSettings {animation: flyin 0.7s ease forwards; opacity:0;}
.settings-wrap { flex: 1;   border-radius: 6px;  max-width: 960px;  margin:0px auto 0 auto;  width: 100%; }
.settings-wrap #builder-toolbar {  padding: 0;}
.settings-wrap h1 { font-size: 22px; margin: 0 0 24px; }
.settings-card { background: #fff; border-radius: 0px 0px 6px 6px; padding: 28px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 20px; }
.settings-card h2 {	font-weight: 600;	font-size: 17px;	white-space: nowrap;	overflow: hidden;
	text-overflow: ellipsis;	padding: 0 0 9px 0;	color: #1d1e22;}

.settings-wrap .field-group { margin-bottom: 18px; padding: 20px 0 10px 0; }
.settings-wrap .field-group label { display: block; font-weight: 300; font-size: 16px; margin-bottom: 4px; }
.settings-wrap .field-group small {font-size: 16px;  margin: 18px 0 10px; display: block;  margin: 18px 0 2px; font-size: 14px;}
.settings-wrap .field-group input[type="text"], .field-group select {	width: 100%;font-size: 14px;	width: 100%;	padding: 6px 8px;	border: 1px solid #999;	border-radius: 3px;	font-size: 16px;	color: #1d1e22;	margin: 12px 0 0 0;	background: #fff;}
.settings-wrap .field-group .radio-row { display: flex; gap: 20px; margin-top: 4px; flex-wrap: wrap;}
.settings-wrap .field-group .radio-row label { font-weight: normal; display: flex; align-items: center; gap: 6px; }
.settings-wrap .field-group .radio-row label input {border: 0 !important;  background: none;  height: 24px;  width: 24px;  cursor: pointer;}
.settings-wrap .field-group .radio-row label:has(input[type="radio"]) { position: relative; padding-left: 24px; gap: 0; cursor: pointer; }
.settings-wrap .field-group .radio-row label:has(input[type="radio"]) input[type="radio"] { display: none; }
.settings-wrap .field-group .radio-row label:has(input[type="radio"])::before { content: ""; display: block; border-radius: 50%; height: 16px; width: 16px; background: #cccccc; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.settings-wrap .field-group .radio-row label:has(input[type="radio"]:checked)::before { background: #6dc5cd; }
.settings-card img {	max-width: 90px;	float: right;	margin: 0 0 0 50px;}
.settings-footer { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.settings-wrap .btn-save { font-family: 'coveslight';	letter-spacing: 3px;	text-decoration:none;font-size: 13px;	padding: 10px 19px;	color: #fff;	border: none;	border-radius: 4px;	font-size: 14px;	cursor: pointer;	text-transform: uppercase;  -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease; background: #271247;}
.settings-wrap .btn-save:hover { background: #6DC5CD; }
#save-msg { font-size: 13px; }
#save-msg.ok  { color: #27ae60; }
#save-msg.err { color: #e74c3c; }
.settings-required { color: #e74c3c; margin-left: 2px; }
.btn-gc-connect { display: inline-block; margin-top: 10px; font-family: 'coveslight'; letter-spacing: 3px; text-decoration: none; font-size: 13px; padding: 10px 19px; background: #271247; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: background 0.2s ease; }
.btn-gc-connect:hover { background: #6DC5CD; }
.settings-error { color: #e74c3c; font-size: 13px; margin: 8px 0 0; }
.settings-success { color: #27ae60; font-size: 13px; margin: 8px 0 0; }
.settings-sk-registered { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 15px; color: #1d1e22; }
.settings-sk-registered button { font-family: 'coveslight';  letter-spacing: 3px;  text-decoration: none;  font-size: 13px;  padding: 10px 19px;  color: #fff;  border: none;
  border-radius: 4px;  font-size: 14px;  cursor: pointer;  text-transform: uppercase;
  -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;  -o-transition: all 0.2s ease;  -ms-transition: all 0.2s ease;  transition: all 0.2s ease;  background: #c26ead; }
.settings-sk-registered button:hover { background: #6DC5CD; }
.settings-wrap .field-group input[type="password"] { width: 100%; font-size: 14px; padding: 6px 8px; border: 1px solid #999; border-radius: 3px; font-size: 16px; color: #1d1e22; margin: 12px 0 0 0; background: #fff; }
.settings-wrap .field-group input[type="date"] { padding: 3px 3px; border: 1px solid #999; border-radius: 3px; font-size: 15px; color: #1d1e22; background: #fff; cursor: pointer; min-width: 160px; }
.deadline-time-selects { display: inline-flex; align-items: center; gap: 4px;  }
.deadline-time-selects select {margin: 0; padding: 6px 4px; border: 1px solid #999; border-radius: 3px; font-size: 15px; color: #1d1e22; background: #fff; cursor: pointer; }
#deadline-fields-wrap .field-group .radio-row { padding: 22px 0 20px 0;}
#settings-panel-mappings #copy-from-btn {  background: transparent; padding: 7px;  border: none;  border-radius: 3px;  cursor: pointer;
  font-size: 12px;  font-weight: 600;  display: flex;  border-radius: 50%;  aspect-ratio: 1/1;  text-align: center;  background: none;
  -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;  -o-transition: all 0.2s ease;  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;}
  #settings-panel-mappings #copy-from-btn:hover {  background: #eaeaea;}
#settings-panel-mappings #copy-from-btn img {padding:0; margin:0;}


.cke {  margin: 22px 0 0 0;}

/* Forms List */

.forms-wrap { flex: 1;  display: flex;  flex-direction: column;  /*overflow-y: auto;*/}
.forms-wrap #top-bar {align-items: center;}
#form-canvas{animation: flyin 0.7s ease forwards; opacity:0; flex: 1;  min-height: 200px;  border-radius: 6px;  padding: 16px;  max-width: 960px;  margin: 20px auto 0 auto;  width: 100%;}
  #form-canvas .formTitle{ padding: 0 16px 0 20px;font-weight: 600; width: 400px; font-size: 17px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.newForm .btn { font-family: 'coveslight'; letter-spacing: 3px; text-decoration: none;  font-size: 13px; padding: 10px 19px; background: #271247; color: #fff; border: none;
  border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase;}
.newForm .btn:hover {background:#6DC5CD;}

.empty-state { padding: 60px 20px; text-align: center; color: #aaa; }

table { border-collapse: collapse; }
td { text-align: left; font-size: 13px; }
tr:lsubmission-settingschild td { border-bottom: none; }
.formActions {margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
thead {	padding: 0 16px;	display: block;}
tr {display: flex;	align-items: center;	background: #fafafa;	border: 1px solid #e4e4e4;	border-radius: 5px;	padding: 10px 12px;	margin-bottom: 8px;transition: box-shadow .15s;}
tbody {	padding: 0 16px;display: block;}
.formTitle a {font-weight: 600!important;  font-size: 17px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  color: #1d1e22; text-decoration:none; }
.formTitle a:hover {color:#6DC5CD;}
.formActions .btn {padding: 7px;	border: none;	border-radius: 3px;	cursor: pointer;	font-size: 12px;	font-weight: 600;	display: flex;	border-radius: 50%;	aspect-ratio: 1/1;	text-align: center; background: none;   -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;   -o-transition: all 0.2s ease;    -ms-transition: all 0.2s ease;   transition: all 0.2s ease;}
.formActions .btn:hover {background: #eaeaea;}


/* Embed modal */
#embed-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,18,30,.5); z-index: 500; align-items: center; justify-content: center; }
#embed-modal-overlay.active { display: flex; }
#embed-modal { background: #fff; border-radius: 6px; padding: 28px 28px 24px; width: 560px; max-width: 94vw; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
#embed-modal h2 { margin: 0 0 8px; font-weight: 600;  font-size: 17px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;
  padding: 0 0 9px 0; }
#embed-modal p { margin: 0 0 14px; font-size: 16px; }
#embed-snippet { display: none; }
#embed-snippet-display { display: block; width: 100%; font-family: monospace; font-size: 14px; border: 1px solid #ddd; border-radius: 4px; padding: 14px; color: #2a3847; background: #f8f8f8; }
#embed-origins-wrap { margin-top: 16px; border-top: 1px solid #e4e4e4; padding-top: 12px; }
.embed-origins-heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
#embed-origins-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.embed-origins-loading, .embed-origins-none { font-size: 13px; color: #9ca3af; }
.embed-origin-row { justify-content: space-between; display: flex; flex-wrap:wrap;align-items: baseline; gap: 8px; font-size: 13px; }
.embed-origin-url { flex: 0 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #271247; text-decoration: none; font-size: 15px; }
.embed-origin-url:hover { text-decoration: underline; }
.embed-origin-meta { flex-shrink: 0; font-size: 14px; color: #271247; white-space: nowrap; }
.btn-remove-origin { flex-shrink: 0; font-size: 14px; color: #ef4444; background: none; border: none; cursor: pointer; padding: 0; }
.btn-remove-origin:hover {  text-decoration: underline; }
.embed-origin-row--unauthorised .embed-origin-url,
.embed-origin-row--unauthorised .embed-origin-meta { color: #ef4444; }
.embed-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.embed-modal-tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 2px solid #e4e4e4; }
.embed-modal-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 6px 16px; font-size: 14px; font-weight: 500; color: #2a3847; cursor: pointer; }
.embed-modal-tab:hover { color: #2a3847; }
.embed-modal-tab--active { color: #271247; border-bottom-color: #271247; }
.embed-modal-tab--hidden { display: none; }
.embed-doorways-empty { font-size: 14px; color: #2a3847; margin: 0 0 14px; }
.embed-doorway-item { margin-bottom: 6px; }
.embed-doorway-badge {background: #f2f2f2; font-size: 12px;  font-weight: 400;  text-transform: uppercase;  letter-spacing: .05em;  color: #271247;   border: none;  border-radius: 10px;  padding: 2px 11px;  cursor: pointer;  transition: background .15s;  margin: 7px 0 7px 0;}
  .embed-doorway-badge.embed-doorway-badge--active {background: #6881bf;  color:#fff; }
.embed-doorway-detail { margin-top: 8px; padding: 12px; background: #f8f8f8; border: 1px solid #e4e4e4; border-radius: 4px; }
.embed-doorway-detail code { display: block; font-family: monospace; font-size: 14px; color: #2a3847; }
#embed-doorways-list {  display: flex;  gap: 3px;}

.gif-stock-level-setting { margin-top: 8px; }
.gif-stock-remaining-display {	font-size: 13px;	font-weight: 300;	color: #fff;	margin: 12px 2px 0 0;}
.gif-stock-level-setting label div {  display: flex;  align-items: center;}




.field-url-param-hint {	margin: 0px 0 14px;  font-size: 11px;  color: #888;  position: relative;  top: -11px;  width: 100%;
  display: inline-block;  text-align: right;}
  .field-url-param-hint code { padding: 1px 5px;  border-radius: 3px;  font-size: 11px;  color: #f0f0f0;  letter-spacing: .03em; cursor:pointer; }
.field-url-param-hint code:hover {	color: #6DC5CD;}

/* Footer */
#canvas-footer {display:flex; align-items:center;padding: 24px 32px; border-top: 1px solid #e4e4e4; justify-content: center; margin: 45px 0 0 0;}
#canvas-footer p { margin: 0; font-size: 12px; color: #1d1e22; }
#canvas-footer img {width: 100px;	margin: 0 20px 0 0;}
#gif-action-tip {  position: fixed;   z-index: 9000;   pointer-events: none;   background: #C26EAD;  color: #fff;   font-size: 11px;   font-family: 'coveslight', sans-serif;   letter-spacing: 2px;   text-transform: uppercase;   padding: 4px 10px;   border-radius: 4px;    white-space: nowrap;    opacity: 0;    transform: translateY(4px);    transition: opacity .12s ease, transform .12s ease;}
#gif-action-tip.visible {    opacity: 1;    transform: translateY(0);}


/* FORM SETTINGS VIEW */

/* Form status toggle */
.field-group--status { border-bottom: 1px solid #e4e4e4; padding-bottom: 18px; margin-bottom: 20px; }
.status-toggle-wrap { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #ccc; border-radius: 24px; cursor: pointer; transition: background .2s; }
.toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle-switch input:checked + .toggle-slider { background: #6DC5CD; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
.status-label { font-size: 14px; font-weight: 600; }
.status-label--active { color: #6DC5CD; }
.status-label--inactive { color: #2a3847; }

.field-group--deadline {padding-bottom: 18px;  border-bottom: 1px solid #e4e4e4;}

/* Settings Customisation */
#settings-panel-customisation .field-group--submitlabel{border-bottom: 1px solid #e4e4e4; margin-bottom: 28px;
  padding-bottom: 8px;}

/* After Submission */
.field-group--aftersubmission{border-bottom: 1px solid #e4e4e4;  padding-bottom: 18px;}
.submission-settingstabs { display: flex; gap: 0; margin-bottom: 0;  margin-left: 30px;}
.submission-settingstab-label {	position: relative;	padding: 8px 18px;	font-size: 15px;	font-weight: 400;	cursor: pointer;	margin-bottom: 1px;	border-width: 1px 1px medium;		border-image: none;	border-radius: 4px 4px 0px 0px;	background: transparent;	user-select: none;}
.submission-settingstab-label input[type="radio"] { display: none; }
.submission-settingstab-label.active {	color: #1d1e22;	background: #fff;	border-color: rgb(224, 224, 224) rgb(224, 224, 224) rgb(255, 255, 255);}
.submission-settingspanel { padding: 20px 0 0; }
.submission-settingspanel textarea { width: 100%; }
.settings-main-tabs { border-bottom: 2px solid #e4e4e4; margin-left: 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); background: #fff;  border-radius: 6px; background: #fff;  border-radius: 6px 6px 0px 0px;  padding: 12px 0 0 13px;}
.settings-main-tabs .submission-settingstab-label { background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 6px 16px; font-size: 14px; font-weight: 500; color: #6b7280; }
.settings-main-tabs .submission-settingstab-label:hover { color: #2a3847; }
.settings-main-tabs .submission-settingstab-label.active { background: transparent; color: #271247; border-bottom-color: #271247; }

#settings-panel-aftersubmission .submission-settingstabs {margin-left: 7px;}
#settings-panel-aftersubmission .submission-settingstabs label:before {content:""; display:block; border-radius:50%; height:16px; width:16px; background:#cccccc;position:absolute; left: -5px;  top: 10px;}
#settings-panel-aftersubmission .submission-settingstabs label.active:before {background:#6dc5cd;}
#settings-panel-aftersubmission .submission-settingstabs label{padding:8px 18px 28px 18px; position:relative;}

#themer {display:flex; gap: 5%; flex-wrap: wrap;}
#theme_colour {  border-radius: 100%;  aspect-ratio: 1: 1;  display: block;  border: 0 !important;  background: none;  aspect-ratio: 1 / 1; height: 45px;  width: 45px; top: 7px;  position: relative;}
#themer > div {  flex: 0 0 46%;}
#theme-colour-wrap {  padding: 0 0 0 22px;}
#theme-colours-wrap .radio-row {	margin: 13px 0 0 0;}
.reset-theme-colours{text-decoration:none; background:transparent; font-size: 10px; color: #888;text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; border:0; cursor:pointer;  letter-spacing: 3px; position: relative;  top: -2px;
  }
.reset-theme-colours:hover{text-decoration:underline;}
#themer .formView {width: 65px; margin: 10px 0 0 0;}
.theme-select-row {  display: flex;}

#sub_cap_max {width: 100%; max-width: 260px;  padding: 6px 8px;  border: 1px solid #999;  border-radius: 3px;  font-size: 16px;
  color: #1d1e22;  margin: 12px 0 0 0;  background: #fff;}
  .field-group.field-group--sub-cap {	display: flex;	flex-wrap: wrap;}
.field-group.field-group--sub-cap label {  flex: 0 0 100%;}
.field-group.field-group--sub-cap > div {  flex: 0 0 50%;}
.themeExpander {gap: 25px; flex: 0 0 100%;  display: flex;}
.themeExpander > div {	flex-wrap: wrap;	padding: 25px;	display: flex;	border: 1px solid #e4e4e4;	display: flex;	margin: 0 0 30px 0;	border-radius: 6px;}
.themeExpander > div > * {flex:0 0 100%;}
.themeExpander h4, .themeExpander p, .themeExpander, .themeExpander a {font-family: 'Synonym-Light', Helvetica, Arial, sans-serif !important;}
.themeExpander h4 {  font-size: 16px;  margin: 0;}
.themeExpander p {font-size: 16px;}
.settings-card .themeExpander img {	max-width: unset;	float: none;	margin: 0;}

.embedbtn.btn-primary {font-family: 'coveslight';  letter-spacing: 3px;  text-decoration: none;  font-size: 13px;  padding: 10px 19px;
  background: #271247;  color: #fff;  border: none;  border-radius: 4px;  font-size: 14px;  cursor: pointer;
  text-transform: uppercase;}
.embedbtn.btn-secondary:hover {background: #C26EAD;  color: #fff;  border-color: #C26EAD;}

.gif-admin-warning { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 4px; padding: 10px 16px; margin: 16px 20px 0 0; font-size: 16px; color:  #2a3847; flex:0 0 100%!important; }
#canvas-wrap .gif-admin-warning  {flex: unset !important;  max-width: 925px;  margin: 16px auto; animation: flyin 0.7s ease forwards; opacity: 0;}

/* Field Pack s*/
#sidebar .nav-no-pack {   border: 1px solid #fcd34d;  border-radius: 4px;  padding: 10px 16px;  margin: 16px 12px 0 12px;
  font-size: 16px;  color: #2a3847; background: #fffbeb url(../images/gfdt-elementWarning.svg) no-repeat right 6px top 7px;}
#sidebar .nav-no-pack a {  margin: 13px 0;  display: inline-block;}
#sidebar .nav-no-pack h2 {	margin: 12px 0;	font-family: 'coveslight';	letter-spacing: 7px;	font-size: 16px;	text-transform: uppercase;	line-height: 22px;}
#sidebar .nav-no-pack p {font-size:15px; line-height: 22px;}
.pack-selector {  }
.pack-selector h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #1d1e22; }
.pack-selector > p { font-size: 15px; color: #555; margin: 0 0 20px; }
#pack-selector-options { display: flex; gap: 10px; margin-bottom: 24px; margin: 80px 40px;}
.pack-option > * {
  flex: 0 0 100%; text-align:center;
}
.pack-option {	display: flex;	flex: 0 0 33%;	align-items: flex-start;	gap: 14px;	border: 1px solid #d0d0d0;	border-radius: 5px;	transition: border-color .15s, background .15s;	display: flex;	flex-wrap: wrap;	justify-content: center;}
.pack-option .connect-row{background: #ddd;  text-align: right;  padding: 10px; position: relative; position: relative;  min-height: 57px;}
.pack-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #271247; position: absolute;
  left: -99999px;}
.pack-option h2 { padding: 14px 16px; }
.pack-option img {	padding:45px 16px 14px 16px;	margin: 0;	max-width: 130px;}
.pack-option:has(input:checked) { border-color: #6dc5cd; }

.pack-option--dimmed { opacity: 0.25; pointer-events: none; transition: opacity 0.4s ease; }
.pack-option .connect-row img.connect-pack-anim {	padding: 0; width: 144px; height: auto;	position: absolute;	right: 10px;	top: -3px;}

/* ── New-form mode (unsaved, no form_id) ──────────────────────────────────── */
.builder-wrap--new .nav-group, .builder-wrap--new .nav-no-pack, .builder-wrap--new .canvas-empty-msg, .builder-wrap--new .btn-save-form span, .builder-wrap--new #form-title-pencil, .builder-wrap--new .nav-no-pack  { display: none; }
.builder-wrap--new #top-bar {z-index: 400;	position: absolute;	display: flex;	height: 140px;	width: 100%;	align-content: center;	justify-content: space-between;	margin: 0 auto;	left: 50%;	transform: translateX(-50%) translateY(-50%);	top: 50%;	background: #f2f2f2;	border-radius: 10px;	padding: 45px;  animation: flyin-centered 0.7s ease forwards; opacity: 0;}
.builder-wrap--new #canvas-wrap{background:#909499; position:relative;}
.builder-wrap--new #canvas-footer{opacity: 0.2;}

.settings-panel--active { animation: flyin 0.35s ease forwards; }

@keyframes flyin {
   from {
     opacity: 0;
     transform: translateY(30px);
   }
   to {
     opacity: 1;
   }
}

@keyframes flyin-centered {
   from {
     opacity: 0;
     transform: translateX(-50%) translateY(calc(-50% + 50px));
   }
   to {
     opacity: 1;
     transform: translateX(-50%) translateY(-50%);
   }
}

/* ── Superadmin panel ──────────────────────────────────────────────────────── */
.sa-context-banner { display: flex; align-items: center; gap: 16px; background: #271247; color: #fff; padding: 10px 28px; font-size: 14px; }
.sa-context-banner strong { font-weight: 600; }
.sa-context-banner form { margin: 0; }
.sa-btn-return { font-family: 'coveslight'; letter-spacing: 2px; font-size: 12px; padding: 6px 14px; background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: background .2s; }
.sa-btn-return:hover { background: #6DC5CD; border-color: #6DC5CD; }

.sa-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.sa-table th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #666; border-bottom: 2px solid #e8e8e8; padding: 8px 10px; }
.sa-table td { padding: 10px 10px; border-bottom: 1px solid #f0f0f0; color: #1d1e22; vertical-align: middle; }
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table form { margin: 0; }
.sa-row { display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; }
.sa-row:last-child { border-bottom: none; }
.sa-row > div { padding: 10px; color: #1d1e22; }
.sa-uuid { font-size: 11px; color: #888; font-family: monospace; }
.sa-webhook-status { font-size: 12px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.sa-webhook-status--ok      { color: #2e7d32; }
.sa-webhook-status--error   { color: #c62828; }
.sa-webhook-status--unknown { color: #999; }
.sa-webhook-error { display: block; font-size: 11px; font-weight: 400; color: #c62828; text-transform: none; white-space: normal; margin-top: 2px; }

.sa-btn-switch { font-family: 'coveslight'; letter-spacing: 2px; font-size: 12px; padding: 5px 12px; background: #271247; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: background .2s; white-space: nowrap; }
.sa-btn-switch:hover { background: #6DC5CD; }
.sa-btn-resend { font-family: 'coveslight'; letter-spacing: 2px; font-size: 12px; padding: 5px 12px; background: #c26ead; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: background .2s; white-space: nowrap; }
.sa-btn-resend:hover { background: #6DC5CD; }
.sa-btn-resend:disabled { opacity: .6; cursor: default; }

.sa-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; }
.sa-badge--active  { background: #eaf6ea; color: #2e7d32; }
.sa-badge--pending { background: #fef9e7; color: #b7770d; }

.sa-empty { color: #888; font-size: 14px; margin: 0 0 20px; }

.sa-add-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e8e8e8; }
.sa-add-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: #1d1e22; }
.sa-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sa-add-row input[type="text"] { flex: 1; min-width: 160px; font-size: 14px; padding: 7px 10px; border: 1px solid #999; border-radius: 3px; color: #1d1e22; background: #fff; }
.sa-add-row select { font-size: 14px; padding: 7px 10px; border: 1px solid #999; border-radius: 3px; color: #1d1e22; background: #fff; min-width: 160px; }
.sa-msg { font-size: 13px; margin-top: 10px; flex: 0 0 100%; }
.sa-msg.ok  { color: #27ae60; }
.sa-msg.err { color: #e74c3c; }

.hidden { display: none; }
.copy-from-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.copy-from-wrap.hidden,
.copy-from-wrap .hidden { display: none; }
.copy-from-wrap select { font-size: 16px; padding: 6px 8px; border: 1px solid #999; border-radius: 3px; color: #1d1e22; background: #fff; min-width: 200px; margin: 0; width: auto; }