body { min-height: max(884px, 100dvh); }

/* Photo interaction */
#photoViewport { touch-action: none; }

#photoLayer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}

#photoLayer:active { cursor: grabbing; }

#photoImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
  /* IMPORTANT: remove width/height 100% and object-fit */
}

/* Toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 160px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 9999;
  backdrop-filter: blur(6px);
}

#toast.show { opacity: 1; }

/* Loading overlay */
#loadingOverlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(2px);
}

#loadingOverlay.show { display: grid; }

/* Editor controls — overlaid on postcard front */
.editor-controls {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.8;
  margin: 0;
}

/* Prevent iOS Safari double-tap zoom on editor controls */
.editor-controls button {
  touch-action: manipulation;
}

/* Prevent iOS Safari focus-zoom:
   must override Tailwind's .text-sm / .text-base rules on the elements */
@supports (-webkit-touch-callout: none) {
  input,
  textarea:not(.postcard-back__textarea),
  select {
    font-size: 16px !important;
  }
}

/* Payment modal */
.payment-modal-overlay {
  opacity: 0;
  transition: opacity .2s ease;
}
.payment-modal-overlay.open { opacity: 1; }

.payment-modal-content {
  transform: translateY(20px);
  transition: transform .2s ease;
}
.payment-modal-overlay.open .payment-modal-content {
  transform: translateY(0);
}

/* AI Assist gradient button */
.wiz-ai-btn {
  background: linear-gradient(135deg, #8b5cf6, #ec6f66, #f3a678);
  background-size: 200% 200%;
  animation: wiz-shimmer 3s ease infinite;
}
.wiz-ai-btn:hover {
  filter: brightness(1.08);
}
@keyframes wiz-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Message modal */
.message-modal-overlay {
  opacity: 0;
  transition: opacity .2s ease;
}
.message-modal-overlay.open { opacity: 1; }

.message-modal-content {
  transform: translateY(20px);
  transition: transform .2s ease;
}
.message-modal-overlay.open .message-modal-content {
  transform: translateY(0);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Conditional hint visibility */
#photoViewport.has-photo:hover #dragHint {
  opacity: 1;
}

/* Postcard Front (photo preview) */
.postcard-front {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 408;
    max-width: 600px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    container-type: inline-size;
}

/* Upload overlay placeholder (matches message display style) */
.upload-overlay__label {
    gap: clamp(4px, 0.5cqi, 8px);
}
.upload-overlay__icon {
    font-size: clamp(40px, 8cqi, 56px);
    color: #94a3b8;
}
.upload-overlay__text {
    font-size: clamp(14px, 3cqi, 20px);
    color: #94a3b8;
    font-style: italic;
}

.dark .postcard-front {
    background: #1e293b;
    border-color: #334155;
}

/* Postcard Back WYSIWYG */
.postcard-back {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 408;
    max-width: 600px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    container-type: inline-size;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Left message area — matches PostGrid: 358.6px of 600px = 59.77% */
.postcard-back__message {
    position: relative;
    width: 59.77%;
    height: 100%;
    padding: 4% 2.24% 12.4% 4%;
    display: grid;
    cursor: pointer;
}
.postcard-back__message > * {
    grid-area: 1 / 1;
}

.postcard-back__textarea {
    width: 100%;
    height: 100%;
    border: 1px dashed transparent;
    outline: none;
    resize: none;
    padding: 0;
    background: transparent;
    border-radius: 4px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 2.3333cqi;
    line-height: 1.2;
    color: #1a1a1a;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Display overlay — empty state */
.postcard-back__display {
    width: 100%;
    height: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5cqi;
    transition: border-color 0.2s, background-color 0.2s;
}
.postcard-back__display-icon {
    font-size: clamp(40px, 8cqi, 56px);
    color: #94a3b8;
}
.postcard-back__display-label {
    font-size: clamp(14px, 3cqi, 20px);
    color: #94a3b8;
    font-style: italic;
}

/* Display overlay — has content */
.postcard-back__display.has-content {
    align-items: flex-start;
    justify-content: flex-start;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 2.3333cqi;
    line-height: 1.2;
    color: #1a1a1a;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
}

.postcard-back__logo {
    position: absolute;
    bottom: 5%;
    left: 0%;
    height: 4cqi;
    width: auto;
    opacity: 1;
    pointer-events: none;
}

/* Hover highlight */
.postcard-back__message:hover .postcard-back__display {
    border-color: #ec6f66;
}

/* Vertical divider — at 59.77% from left */
.postcard-back__divider {
    width: 2px;
    background: #4a4a4a;
    flex-shrink: 0;
    align-self: stretch;
    margin-top: 10%;
    margin-bottom: 10%;
}

/* Right side: stamp at top-right, address below midpoint */
.postcard-back__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2% 2% 8%;
}

.postcard-back__stamp {
    align-self: flex-end;
    background: transparent;
    padding: 0;
    border: none;
}

.postcard-back__stamp-logo {
    
    height: 10cqi;
    object-fit: contain;
}

.postcard-back__address {
    margin-top: auto;
    margin-bottom: 25%;
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(8px, 2cqi, 12px);
    line-height: 1.4;
    color: #334155;
    text-transform: uppercase;
}
.postcard-back__address-line {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode overrides */
.dark .postcard-back {
    background: #1e293b;
    border-color: #334155;
}
.dark .postcard-back__display {
    border-color: #475569;
    background: #1e293b;
}
.dark .postcard-back__display-icon {
    color: #475569;
}
.dark .postcard-back__display-label {
    color: #475569;
}
.dark .postcard-back__display.has-content {
    color: #e2e8f0;
}
.dark .postcard-back__divider {
    background: #64748b;
}
.dark .postcard-back__address {
    color: #cbd5e1;
}

/* Address autocomplete dropdown */
.address-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    padding: 4px;
    list-style: none;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    max-height: 280px;
    overflow-y: auto;
}

.dark .address-dropdown {
    background: #1e293b;
    border-color: #334155;
}

.address-dropdown li {
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .1s ease;
}

.address-dropdown li:hover,
.address-dropdown li.address-dropdown__item--active {
    background: #f1f5f9;
}

.dark .address-dropdown li:hover,
.dark .address-dropdown li.address-dropdown__item--active {
    background: #334155;
}

.address-dropdown__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
}

.address-dropdown__badge {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.address-dropdown__badge--poi {
    background: #ede9fe;
    color: #7c3aed;
}

.dark .address-dropdown__badge--poi {
    background: #4c1d95;
    color: #c4b5fd;
}

.address-dropdown__badge--address {
    background: #dbeafe;
    color: #2563eb;
}

.dark .address-dropdown__badge--address {
    background: #1e3a5f;
    color: #93c5fd;
}

.address-dropdown__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.address-dropdown__primary {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .address-dropdown__primary {
    color: #f1f5f9;
}

.address-dropdown__secondary {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .address-dropdown__secondary {
    color: #94a3b8;
}

/* Auto-fill only fields (city, state, zip) */
#city[readonly], #zip[readonly] {
    cursor: default;
    background-color: #f1f5f9;
}

#city[readonly]:focus, #zip[readonly]:focus {
    box-shadow: none;
    border-color: #e2e8f0;
}

#state:disabled {
    opacity: 1;
    cursor: default;
    -webkit-text-fill-color: currentColor;
    background-color: #f1f5f9;
}

.dark #city[readonly], .dark #zip[readonly] {
    background-color: #1e293b;
}

.dark #state:disabled {
    background-color: #1e293b;
    -webkit-text-fill-color: currentColor;
}