html.ecl-ui-preinit #ecl-edit-root,
html.ecl-ui-preinit .ecl-edit,
html.ecl-ui-preinit #ecl-eva-mode-panel-wrap{
  visibility:hidden !important;
}

html.ecl-ui-ready #ecl-edit-root,
html.ecl-ui-ready .ecl-edit,
html.ecl-ui-ready #ecl-eva-mode-panel-wrap{
  visibility:visible;
}

/*
 * EvoLink Suite — Frontend Editor UI (User Mode)
 * UI/UX ONLY: layout, spacing, typography, alignment, responsive behavior.
 * Do not affect saving logic or field names.
 */

.ecl-ui-enabled .ecl-edit,
.ecl-ui-enabled #ecl-edit-root {
  box-sizing: border-box;
}

.ecl-ui-enabled #ecl-edit-root,
.ecl-ui-enabled .ecl-edit {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px;
}

.ecl-ui-enabled #ecl-edit-root h2,
.ecl-ui-enabled #ecl-edit-root h3,
.ecl-ui-enabled #ecl-edit-root h4,
.ecl-ui-enabled .ecl-edit h2,
.ecl-ui-enabled .ecl-edit h3,
.ecl-ui-enabled .ecl-edit h4,
.ecl-ui-enabled #ecl-edit-root label,
.ecl-ui-enabled .ecl-edit label,
.ecl-ui-enabled #ecl-edit-root th,
.ecl-ui-enabled .ecl-edit th {
  text-align: left !important;
}

/* Page title: match Evo Analytics — Summary visual weight */
.ecl-ui-enabled #ecl-edit-root > h2,
.ecl-ui-enabled .ecl-edit > h2 {
  margin: 10px 0 14px;
  padding: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: #111;
}

@media (max-width: 480px) {
  .ecl-ui-enabled #ecl-edit-root > h2,
  .ecl-ui-enabled .ecl-edit > h2 {
    font-size: 20px;
    margin: 10px 0 12px;
  }
}

/* Editor page: the mode panel is managed on the Analytics page. Keep the "Open analytics" button only. */
body.ecl-ui-enabled .eva-mode-panel{
  display: none !important;
}

/* Older builds may have injected a placeholder card; keep it hidden just in case. */
body.ecl-ui-enabled .ecl-ui-mode-relocated{
  display: none !important;
}


/* Analytics page: never show the "Consent recorded" box inside the mode panel (it belongs to EvoLink Edit page only). */
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-consent-row,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-consent,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap [data-eva-consent],
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-consent-recorded{
  display: none !important;
}


body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-consent-box,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-consent-panel,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-mode-consent,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-mode-consent-row,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-mode-consent-box,
body.eva-ecl-editor #ecl-eva-mode-panel-wrap .eva-mode-consent-wrap{
  display:none !important;
}

/* Card wrapper added by ecl-editor-ui.js */
.ecl-ui-enabled .ecl-ui-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.ecl-ui-enabled .ecl-ui-card > h3,
.ecl-ui-enabled .ecl-ui-card .ecl-ui-card-title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}

/* Make tables inside cards breathe */
.ecl-ui-enabled .ecl-ui-card table.form-table {
  margin: 0;
}

.ecl-ui-enabled .ecl-ui-card table.form-table th,
.ecl-ui-enabled .ecl-ui-card table.form-table td {
  padding: 10px 8px;
  vertical-align: top;
}

.ecl-ui-enabled .ecl-ui-card table.form-table th {
  width: 34%;
}

.ecl-ui-enabled .ecl-ui-card input[type="text"],
.ecl-ui-enabled .ecl-ui-card input[type="url"],
.ecl-ui-enabled .ecl-ui-card input[type="email"],
.ecl-ui-enabled .ecl-ui-card input[type="tel"],
.ecl-ui-enabled .ecl-ui-card select {
  width: 100%;
  min-height: 42px;
  /* Some legacy fields use inline min-width which breaks mobile alignment */
  min-width: 0 !important;
}

.ecl-ui-enabled .ecl-ui-card textarea {
  width: 100%;
  min-height: 110px;
  min-width: 0 !important;
}

.ecl-ui-enabled .ecl-ui-card .button,
.ecl-ui-enabled .ecl-ui-card button,
.ecl-ui-enabled .ecl-ui-card a.button {
  border-radius: 10px;
}


/* --- QR & vCard Assets: center QR titles + QR images --- */
.ecl-ui-enabled .ecl-qr-assets-card .ecl-qr-assets-flex{
  justify-content: center !important;
}
.ecl-ui-enabled .ecl-qr-assets-card .ecl-qr-asset{
  text-align: center;
}
.ecl-ui-enabled .ecl-qr-assets-card .ecl-qr-asset > div:first-child{
  text-align: center;
  font-weight: 500;
  margin-bottom: 6px;
}
.ecl-ui-enabled .ecl-qr-assets-card .ecl-qr-asset img{
  display: block;
  margin: 0 auto;
}


/* Unified secondary button style (match EvoAnalytics "Open analytics" look)
   - Applies to Upload / Delete / Edit-Hide Action Buttons / other secondary actions
   - Does NOT affect the sticky Preview/Save actionbar buttons */
.ecl-ui-enabled .ecl-ui-card .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary),
.ecl-ui-enabled .ecl-ui-card button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary),
.ecl-ui-enabled .ecl-ui-card a.button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary) {
  background: #fff;
  border: 1px solid rgba(0,0,0,.16);
  color: rgba(0,0,0,.85);
  padding: 8px 14px;
  min-height: 40px;
  line-height: 1.15;
  /* Match the typography of the EvoAnalytics "Open analytics" button */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Theme/Styling module card (#ecl-ts-card) uses WP's .card class and does not
   always carry .ecl-ui-card. Ensure the collapsebar "Edit Theme/Styling" button
   matches the exact typography of other "Edit ..." buttons (Social/Showcase). */
.ecl-ui-enabled #ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary),
.ecl-ui-enabled .ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary) {
  background: #fff;
  border: 1px solid rgba(0,0,0,.16);
  color: rgba(0,0,0,.85);
  padding: 8px 14px;
  min-height: 40px;
  line-height: 1.15;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.ecl-ui-enabled .ecl-ui-card .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):hover,
.ecl-ui-enabled .ecl-ui-card button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):hover,
.ecl-ui-enabled .ecl-ui-card a.button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):hover {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.24);
}

/* Hover/active/focus parity for Theme/Styling collapsebar button */
.ecl-ui-enabled #ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):hover,
.ecl-ui-enabled .ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):hover {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.24);
}

.ecl-ui-enabled .ecl-ui-card .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):active,
.ecl-ui-enabled .ecl-ui-card button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):active,
.ecl-ui-enabled .ecl-ui-card a.button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):active {
  transform: translateY(1px);
}

.ecl-ui-enabled #ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):active,
.ecl-ui-enabled .ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):active {
  transform: translateY(1px);
}

.ecl-ui-enabled .ecl-ui-card .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):focus,
.ecl-ui-enabled .ecl-ui-card button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):focus,
.ecl-ui-enabled .ecl-ui-card a.button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 1px 2px rgba(0,0,0,.06);
}

.ecl-ui-enabled #ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):focus,
.ecl-ui-enabled .ecl-ts-card .ecl-ui-collapsebar .button:not(.button-primary):not(.ecl-actionbar-btn):not(.ecl-actionbar-btn-primary):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 1px 2px rgba(0,0,0,.06);
}

/* Collapse bar (summary + actions) */
.ecl-ui-enabled .ecl-ui-collapsebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}

.ecl-ui-enabled .ecl-ui-summary {
  font-size: 13px;
  line-height: 1.25;
  color: rgba(0,0,0,.72);
}

.ecl-ui-enabled .ecl-ui-summary .ecl-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,.15);
  margin-left: 6px;
  vertical-align: -2px;
}

.ecl-ui-enabled .ecl-ui-collapse-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ecl-ui-enabled .ecl-ui-manage-btn,
.ecl-ui-enabled .ecl-ui-toggle-btn,
.ecl-ui-enabled .ecl-ui-back-btn {
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
}

.ecl-ui-enabled .ecl-ui-toggle-btn {
  font-weight: 500;
}

.ecl-ui-enabled .ecl-ui-back-btn {
  display: none;
}

/* Collapsed sections hide body */
.ecl-ui-enabled .ecl-collapsed .ecl-section-body {
  display: none;
}

/* Manage view (opened via "Manage" button)
   IMPORTANT: It should feel like part of the EvoLink Edit Page (NOT a fixed overlay).
   - No dimmed background
   - Keep the same page background
   - Allow normal page scrolling
*/
body.ecl-ui-manage-open #ecl-mobile-actionbar{
  display:none !important;
}
body.ecl-ui-manage-open .ecl-fab,
body.ecl-ui-manage-open .ecl-fab-slot,
body.ecl-ui-manage-open .ecl-fab-spacer{
  display:none !important;
}

/* Remove the old fixed-fullscreen overlay styling.
   When in manage mode we simply expand the section in-flow.
*/
.ecl-ui-enabled .ecl-fullscreen{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  overflow: visible !important;
}

.ecl-ui-enabled .ecl-fullscreen .ecl-ui-back-btn {
  display: inline-flex;
}

/* Sticky mobile action bar */
#ecl-mobile-actionbar {
  display: none;
}

@media (max-width: 782px) {
  body.ecl-ui-has-actionbar {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  #ecl-mobile-actionbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999998;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(0,0,0,.12);
    backdrop-filter: blur(8px);
  }

  #ecl-mobile-actionbar .ecl-ab-status {
    display: none;
  }

  #ecl-mobile-actionbar .ecl-ab-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    flex: 1 1 auto;
  }

  #ecl-mobile-actionbar button {
    flex: 1;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    font-size: 18px;
    font-weight: 800;
    border: 1px solid #ff2d00;
    background: #ff2d00;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }

  #ecl-mobile-actionbar button:active { transform: translateY(1px); }

  #ecl-mobile-actionbar button:disabled {
    opacity: .6;
  }

  /* Hide floating FAB / duplicate action buttons on mobile */
  .ecl-fab,
  .ecl-fab-slot {
    display: none !important;
  }

  .ecl-hide-on-mobile {
    display: none !important;
  }

  /* Mobile: stack classic WP form tables (fix Basic Info + Hero upload misalignment) */
  .ecl-ui-enabled .ecl-ui-card table.form-table,
  .ecl-ui-enabled .ecl-ui-card table.form-table tbody,
  .ecl-ui-enabled .ecl-ui-card table.form-table tr,
  .ecl-ui-enabled .ecl-ui-card table.form-table th,
  .ecl-ui-enabled .ecl-ui-card table.form-table td {
    display: block;
    width: 100% !important;
  }

  .ecl-ui-enabled .ecl-ui-card table.form-table tr {
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  .ecl-ui-enabled .ecl-ui-card table.form-table tr:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .ecl-ui-enabled .ecl-ui-card table.form-table th {
    padding: 0 0 6px !important;
    margin: 0;
    font-weight: 500;
  }

  .ecl-ui-enabled .ecl-ui-card table.form-table td {
    padding: 0 !important;
    margin: 0;
  }

  .ecl-ui-enabled .ecl-ui-card input[type="file"] {
    width: 100%;
  }

  .ecl-ui-enabled .ecl-ui-card img {
    max-width: 100% !important;
    height: auto;
  }

  /* --- Quick Share buttons: 2-per-row on mobile --- */
  .ecl-ui-enabled .ecl-share-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .ecl-ui-enabled .ecl-share-actions .ecl-share-action{
    width: 100%;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Make the last button (odd count) span full width */
  .ecl-ui-enabled .ecl-share-actions .ecl-share-action:nth-child(5){
    grid-column: 1 / -1;
  }
}


/* Privacy & Analytics Mode moved to Analytics page (editor placeholder) */
body.ecl-ui-enabled .ecl-ui-mode-relocated{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  margin: 14px 0;
}
body.ecl-ui-enabled .ecl-ui-mode-relocated__head strong{
  display:block;
  font-size: 14px;
  margin-bottom: 4px;
  text-align:left;
}
body.ecl-ui-enabled .ecl-ui-mode-relocated__sub{
  color:#6b7280;
  font-size:12px;
  line-height:1.4;
  text-align:left;
}
body.ecl-ui-enabled .ecl-ui-mode-relocated__actions{
  margin-top: 10px;
}
body.ecl-ui-enabled .ecl-ui-mode-relocated__hint{
  margin-top: 8px;
  color:#6b7280;
  font-size:12px;
  line-height:1.4;
  text-align:left;
}


/* Analytics page: never show consent-recorded UI inside Privacy & Analytics Mode panel */
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel [class*="consent"],
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel [class*="notice"]{
  display:none !important;
}

/* Analytics page: remove blank boxed rows that can remain in user view */
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel .eva-row:empty,
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel .eva-field:empty,
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel .eva-box:empty,
body.eva-blank-analytics #ecl-eva-mode-panel-wrap .eva-mode-panel .eva-controls:empty{
  display:none !important;
}

/* Analytics page: keep consistent spacing between Traffic Sources card and the Mode panel card */
body.eva-blank-analytics #ecl-eva-mode-panel-wrap{
  margin-top: 24px;
}


/* === Upload current file wrap (mobile + long URLs) === */
.ecl-company-pdf-status,
.ecl-my-pdf-status,
.ecl-prod-pdf-status,
.ecl-svc-pdf-status,
.ecl-port-pdf-status,
.ecl-testi-pdf-status,
.ecl-promo-pdf-status,
.ecl-event-pdf-status{
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.ecl-company-pdf-status a,
.ecl-my-pdf-status a,
.ecl-prod-pdf-status a,
.ecl-svc-pdf-status a,
.ecl-port-pdf-status a,
.ecl-testi-pdf-status a,
.ecl-promo-pdf-status a,
.ecl-event-pdf-status a{
  display:block;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-all !important;
}

.ecl-company-pdf-status img,
.ecl-my-pdf-status img,
.ecl-prod-pdf-status img,
.ecl-svc-pdf-status img,
.ecl-port-pdf-status img,
.ecl-testi-pdf-status img,
.ecl-promo-pdf-status img,
.ecl-event-pdf-status img{
  flex:0 0 auto;
}

.ecl-company-pdf-status button,
.ecl-my-pdf-status button,
.ecl-prod-pdf-status button,
.ecl-svc-pdf-status button,
.ecl-port-pdf-status button,
.ecl-testi-pdf-status button,
.ecl-promo-pdf-status button,
.ecl-event-pdf-status button{
  flex:0 0 auto;
}

/* Keep the same "row" layout on mobile (no column stacking) */
@media (max-width:782px){
  .ecl-company-pdf-status,
  .ecl-my-pdf-status,
  .ecl-prod-pdf-status,
  .ecl-svc-pdf-status,
  .ecl-port-pdf-status,
  .ecl-testi-pdf-status,
  .ecl-promo-pdf-status,
  .ecl-event-pdf-status{
    flex-direction:row;
    align-items:center;
  }
}


/* === Mobile form table stacking for better alignment === */
@media (max-width:782px){
  .ecl-ui-card table.form-table,
  .ecl-ui-card table.form-table tbody,
  .ecl-ui-card table.form-table tr,
  .ecl-ui-card table.form-table th,
  .ecl-ui-card table.form-table td{
    display:block;
    width:100% !important;
  }
  .ecl-ui-card table.form-table th{
    padding:0 0 6px 0 !important;
  }
  .ecl-ui-card table.form-table td{
    padding:0 0 16px 0 !important;
  }
  .ecl-ui-card input[type="text"],
  .ecl-ui-card input[type="url"],
  .ecl-ui-card input[type="email"],
  .ecl-ui-card input[type="tel"],
  .ecl-ui-card input[type="number"],
  .ecl-ui-card select,
  .ecl-ui-card textarea{
    width:100% !important;
    box-sizing:border-box;
  }
  .ecl-ui-card input[type="file"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  .ecl-ui-card td img{
    max-width:100% !important;
    height:auto !important;
  }
}

/* --- Share Link field (OpenGraph section) compact height ---
   In some mobile themes/browsers the Share Link box becomes overly tall.
   UI-only: keep IDs unchanged; just constrain height. */
.ecl-ui-enabled #ecl_share_link_general,
.ecl-ui-enabled #ecl_share_link_tracked {
  /* Some themes inject inline heights; force compact single-line field */
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 22px !important;
  padding: 10px 12px !important;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
}

@media (max-width:782px){
  .ecl-ui-enabled #ecl_share_link_general,
  .ecl-ui-enabled #ecl_share_link_tracked {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
}


/* --- Share Link section headings & spacing (UI only) --- */
body.ecl-ui-enabled .ecl-share-title{
  font-size:14px;
  font-weight:600;
  margin:0 0 6px;
  text-align:left;
}
body.ecl-ui-enabled .ecl-share-desc{
  color:#6b7280;
  font-size:12px;
  line-height:1.45;
  margin:0 0 10px;
  text-align:left;
}
body.ecl-ui-enabled .ecl-share-block + .ecl-share-block{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* --- Share Link: spacing between URL / Copy / Quick Share / Tracked rows (UI only) --- */
body.ecl-ui-enabled .ecl-share-box{
  margin-top:2px;
}
body.ecl-ui-enabled .ecl-share-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
body.ecl-ui-enabled .ecl-share-row .ecl-share-input{
  flex:1 1 auto;
  min-width:0;
}
body.ecl-ui-enabled .ecl-share-row .ecl-share-select{
  min-width:220px;
}
body.ecl-ui-enabled .ecl-share-row .ecl-share-copy{
  white-space:nowrap;
}
body.ecl-ui-enabled .ecl-share-actions{
  margin-top:12px;
}

@media (max-width:782px){
  /* Add left/right breathing room so borders don't touch the card edges */
  body.ecl-ui-enabled .ecl-share-box{
    padding:0 4px;
  }
  /* Stack each row with comfortable vertical gaps */
  body.ecl-ui-enabled .ecl-share-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:12px;
    padding:0 2px;
  }
  body.ecl-ui-enabled .ecl-share-row .ecl-share-select,
  body.ecl-ui-enabled .ecl-share-row .ecl-share-input,
  body.ecl-ui-enabled .ecl-share-row .ecl-share-copy{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  body.ecl-ui-enabled .ecl-share-row .ecl-share-copy{
    height:54px;
    border-radius:16px;
    font-size:18px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  body.ecl-ui-enabled .ecl-share-actions{
    margin-top:14px;
    padding:0 2px;
  }
}

/* --- Mobile: make Template Selection <select> match Share Link platform selector --- */
@media (max-width:782px){
  /* Keep Template dropdown consistent with the platform selector (font/size/weight/radius/padding) */
  body.ecl-ui-enabled .ecl-share-row .ecl-share-select,
  body.ecl-ui-enabled select[name="ecl_template_slug"]{
    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.2 !important;
    min-height:52px !important;
    height:52px !important;
    padding:10px 14px !important;
    border-radius:14px !important;
    box-sizing:border-box;
  }
}


/* --- Mobile action bar (Preview/Save) layout fix (v2.1.0.33) --- */
@media (max-width:782px){
  #ecl-mobile-actionbar{
    justify-content:center;
    padding:12px 16px;
    background:#fff; /* fully opaque to avoid text bleed-through */
  }
  /* Keep the bar clean: show ONLY the two primary buttons */
  #ecl-mobile-actionbar > :not(.ecl-ab-actions){
    display:none !important;
  }
  #ecl-mobile-actionbar .ecl-ab-actions{
    width:100%;
    max-width:520px;
    margin:0 auto;
    display:flex;
    gap:12px;
  }
  #ecl-mobile-actionbar .ecl-ab-actions button{
    flex:1 1 0;
    min-width:0;
    height:56px;
    border-radius:18px;
    font-size:22px;
    font-weight:500;
    letter-spacing:.1px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}


/* --- User Logout Section (Reset Password + Logout) --- */
.ecl-ui-enabled .ecl-logout-panel{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
  padding:14px;
  margin:0 0 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ecl-ui-enabled .ecl-logout-panel__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:600;
  color:#1f2937;
  text-align:center;
}
.ecl-ui-enabled .ecl-logout-panel__desc{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.45;
  color:#6b7280;
  text-align:center;
}
.ecl-ui-enabled .ecl-logout-panel__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.ecl-ui-enabled .ecl-logout-panel__actions > .button,
.ecl-ui-enabled .ecl-logout-panel__actions > a.button{
  min-height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
}
.ecl-ui-enabled .ecl-logout-panel__actions .ecl-logout-btn{
  background:#ff2d00 !important;
  border-color:#ff2d00 !important;
  color:#fff !important;
}
.ecl-ui-enabled .ecl-logout-panel__actions .ecl-logout-btn:hover{
  background:#e62800 !important;
  border-color:#e62800 !important;
  color:#fff !important;
}
@media (max-width:782px){
  .ecl-ui-enabled .ecl-logout-panel{
    padding:14px;
  }
  .ecl-ui-enabled .ecl-logout-panel__actions{
    gap:12px;
    justify-content:center;
}
  .ecl-ui-enabled .ecl-logout-panel__actions > .button,
  .ecl-ui-enabled .ecl-logout-panel__actions > a.button{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    height:48px;
    font-size:16px;
    font-weight:500;
    border-radius:14px;
    text-align:center;
  }
}