/* One-window phone invitation designer, with the canvas always visible. */
.invite-canvas-clipart img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.invite-compact-tools{display:flex;flex-direction:column;gap:0;padding:0!important;min-height:0;overflow:hidden}
.compact-tool-tabs{display:flex;flex-shrink:0;gap:4px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:9px;border-bottom:1px solid #e2eae8;background:#fff;-webkit-overflow-scrolling:touch}
.compact-tool-tabs button{border:0;border-radius:8px;padding:10px 11px;min-height:38px;background:transparent;white-space:nowrap;color:#657d82;font-weight:750;font-size:12px;flex:0 0 auto}
.compact-tool-tabs button.active{background:#e6f5f0;color:#176853}
.compact-tool-body{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 13px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.compact-tool-body .field{min-width:0;margin:7px 0}
.compact-tool-body input,.compact-tool-body select{max-width:100%;min-width:0;font-size:15px}
.compact-tool-body .btn{min-height:35px;white-space:normal}
.compact-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.compact-check{display:flex;align-items:center;gap:7px;padding:9px 0;font-size:12px}
.compact-choices{display:flex;gap:7px;flex-wrap:wrap}
.compact-choices .btn.active,.compact-folders .btn.active{background:#e3f4eb;color:#176853;border-color:#7ab8a4}
.compact-folders{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:8px}
.compact-folders .btn{flex:0 0 auto;white-space:nowrap}
.compact-art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.compact-art-choice{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #dce5e5;background:#fff;border-radius:9px;padding:6px 4px;color:#856a52}
.compact-art-choice svg,.compact-art-choice img{width:42px;height:42px;max-width:100%;object-fit:contain;display:block}
.compact-art-choice span{font-size:10px;text-align:center;overflow-wrap:anywhere;color:#45616c;margin-top:4px}
.compact-text-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:3px}
.compact-text-grid label{min-width:0}
.compact-text-grid input{width:100%}
.compact-library{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px}
.compact-library .btn{align-self:end;cursor:pointer}
.compact-library-list{margin-top:9px}
.compact-library-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #e3ebe9;font-size:12px}
.compact-library-row span{min-width:0;overflow-wrap:anywhere}
.compact-library-row .btn{flex:0 0 auto}
.invite-canvas-arrange-mode .invite-rsvp-sample{display:none}
.invite-canvas-arrange-mode .invite-preview-help{display:none}
.invite-canvas-arrange-mode .invitation-live-label{font-size:9px}
.invite-canvas-arrange-mode .invite-preview-heading{margin-bottom:6px}
@media(max-width:800px){
  #modalRoot .invitation-design-grid.invite-canvas-arrange-mode{display:flex!important;flex-direction:column;min-height:0;height:100%;flex:1;overflow:hidden;max-width:100%}
  .invite-canvas-arrange-mode .invitation-live{order:0;flex:0 0 auto;min-width:0;min-height:0;overflow:visible!important;border:0;padding:8px 12px 4px}
  .invite-canvas-arrange-mode .invite-compact-tools{order:1;flex:1 1 auto;min-height:0;max-height:none;padding:0!important;overflow:hidden}
  .invite-canvas-arrange-mode .invitation-live .invite-canvas{
    width:min(100%,calc(39dvh * 5 / 7));height:39dvh;max-height:360px;max-width:260px;margin:auto;aspect-ratio:5/7
  }
  .invite-canvas-arrange-mode .compact-art-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .invite-canvas-arrange-mode .invitation-live .invite-preview-heading{display:none}
}
@media(max-width:390px){
  .invite-canvas-arrange-mode .invitation-live .invite-canvas{height:36dvh;width:min(100%,calc(36dvh * 5 / 7))}
  .invite-canvas-arrange-mode .compact-art-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .compact-text-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact-tool-tabs{padding:5px}
  .compact-tool-tabs button{padding:7px 9px;min-height:34px}
}

/* Keep optional galleries and RSVP controls out of the draggable workbench. */
.invite-canvas-arrange-mode .invite-photo-section,.invite-canvas-arrange-mode .invite-gallery,.invite-canvas-arrange-mode .invite-rsvp-sample{display:none!important}
.invite-canvas-arrange-mode .invite-compact-tools .compact-tool-body{scrollbar-width:thin}

/* Canva-style contextual element bar, fixed canvas and light-weight tool switching. */
.compact-action-holder{flex:0 0 auto;min-width:0}
.compact-selection-bar{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;border-bottom:1px solid #dce5e3;background:#f4f9f7;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.compact-selection-label{font-size:11px;font-weight:800;color:#195d50;white-space:nowrap}
.compact-inline-font{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;color:#45666b}
.compact-inline-font select{border:1px solid #cedad9;border-radius:7px;padding:6px 8px;max-width:135px;background:#fff;font-size:12px}
.compact-selection-bar>.btn{white-space:nowrap;flex:0 0 auto;min-height:32px}
.compact-layer-info{font-size:12px;color:#5c737a;margin:0 0 9px;line-height:1.4}
.invite-compact-tools .invite-canvas-inspector{padding:8px;margin-top:7px;gap:7px}
.invite-compact-tools .invite-canvas-inspector-row{gap:7px}
.invite-compact-tools .invite-canvas-layers{display:flex;gap:5px;flex-wrap:wrap;max-width:100%;padding-bottom:4px}
.invite-compact-tools .invite-canvas-layers .btn{font-size:11px;padding:6px 9px}
.invite-compact-tools .compact-layer-actions{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.invite-compact-tools .compact-tool-body .field select{width:100%;font-size:14px}
.invite-compact-tools .compact-art-choice:active{transform:scale(.96)}
.invite-compact-tools .compact-art-choice img{image-rendering:auto}
@media(max-width:800px){
  .invite-canvas-arrange-mode .compact-action-holder{max-height:58px;overflow:hidden}
  .invite-canvas-arrange-mode .compact-selection-bar{padding:5px 8px}
  .invite-canvas-arrange-mode .compact-selection-bar>.btn{min-height:31px}
}

.compact-field-visibility{display:flex;gap:5px;flex-wrap:wrap;padding:8px 0;border-top:1px solid #e5ecea;margin-top:10px}
.compact-field-visibility>strong{display:block;width:100%;font-size:12px;color:#48616e;margin-bottom:3px}
.compact-field-visibility .btn{min-height:30px;font-size:11px;padding:5px 8px}
.compact-field-visibility .btn.is-hidden{color:#9b6775;background:#f7f1f2;border-color:#eddde1}

/* Alignment tools for the selected text/image; stays inside compact bottom tray. */
.compact-alignment-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 10px;padding:9px;border:1px solid #d8e8e4;border-radius:10px;background:#f7fbf9}
.compact-alignment-tools>strong{flex:0 0 100%;font-size:11px;color:#2a5c56}
.compact-alignment-tools .btn{flex:1 1 27%;font-size:11px;padding:8px 4px;white-space:nowrap;min-width:0}
.compact-alignment-tools .btn:disabled{opacity:.45;cursor:default}
.compact-alignment-tools .compact-check{flex:0 0 100%;margin:0;padding:3px 0 0;font-weight:700;color:#37665f}
.compact-alignment-tools .compact-check input{width:17px;height:17px;accent-color:#19816f}
@media(max-width:420px){.compact-alignment-tools{padding:7px;gap:5px}.compact-alignment-tools .btn{padding:7px 3px}}

/* History controls stay above the phone editor's tabs without scrolling the page. */
.compact-history{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 11px;background:#f7fbfa;border-bottom:1px solid #dce7e3}
.compact-history .btn{min-height:31px;padding:5px 10px;flex:0 0 auto}
.compact-history .btn:disabled{opacity:.4}
.compact-history span{min-width:0;font-size:11px;color:#617974;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.invite-compact-tools .compact-art-choice img{width:100%;max-width:54px;aspect-ratio:1;object-fit:contain}
.invite-compact-tools .compact-tool-body{overscroll-behavior:contain}
@media(max-width:800px){
  .invite-canvas-arrange-mode .compact-history{padding:4px 8px}
  .invite-canvas-arrange-mode .compact-tool-tabs{padding:5px 7px}
  .invite-canvas-arrange-mode .invitation-live{overflow:hidden!important}
  .invite-canvas-arrange-mode .invitation-live .invite-canvas{max-height:350px;height:min(39dvh,350px);width:min(100%,calc(39dvh * 5 / 7),250px);aspect-ratio:5/7}
}
@media(max-height:680px) and (max-width:800px){
  .invite-canvas-arrange-mode .invitation-live .invite-canvas{height:32dvh;max-height:32dvh;width:min(100%,calc(32dvh * 5 / 7))}
  .compact-history span{display:none}
}

.compact-power-tools{margin:11px 0;padding:11px;border:1px solid #d7eae2;border-radius:11px;background:#f6fbf9}
.compact-power-tools strong{font-size:12px;color:#275c50}
.compact-power-tools p{margin:5px 0 0;font-size:11px;line-height:1.6;color:#6a827b}