/* ═══════════════════════════════════════════════════════
   World FM Day Photo Generator — v5
   Matches reference: gradient header bar, dark wall,
   teal-blue buildings, warm amber lit windows
   ═══════════════════════════════════════════════════════ */

/* Scoped reset */
#fmday-app,
#fmday-app *,
#fmday-app *::before,
#fmday-app *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

#fmday-app input[type="file"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#fmday-app {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif !important;
  line-height: 1.5 !important;
  color: #333 !important;
  -webkit-font-smoothing: antialiased;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ── Wrapper: full-bleed, transparent ── */
.fmday-wrapper {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* ── Form Section ── */
.fmday-form-section {
  max-width: 720px !important;
  margin: 32px auto 28px !important;
  padding: 0 16px !important;
}

/* ── Card ── */
.fmday-card {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.12) !important;
}

/* Gradient title bar */
.fmday-card-header {
  background: linear-gradient(135deg, #3daa6d 0%, #3a96a0 35%, #4a72b0 65%, #7a5baa 100%) !important;
  padding: 14px 20px !important;
  text-align: center !important;
}

.fmday-card-header-title {
  font-size: clamp(16px, 3vw, 22px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Two-column inner layout */
.fmday-card-inner {
  display: flex !important;
}

/* Left: Preview */
.fmday-card-preview {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  background: #f6f8fb !important;
  border-right: 1px solid #eee !important;
}

.fmday-preview-box {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  border: 2px dashed #d0d8e0 !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #bbb !important;
  background: #fff !important;
}

.fmday-preview-box span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #b0b8c0 !important;
}

.fmday-preview-box.fmday-preview-filled {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.fmday-preview-result-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  display: block !important;
}

/* Right: Form */
.fmday-card-form {
  flex: 1 1 50% !important;
  padding: 22px 24px !important;
  min-width: 0 !important;
}

/* ── Fields ── */
.fmday-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.fmday-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.fmday-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #444 !important;
  margin-bottom: 1px !important;
}

.fmday-required {
  color: #d9534f !important;
  font-weight: 700 !important;
}

.fmday-attempts-notice {
  text-align: center !important;
  font-size: 12px !important;
  color: #888 !important;
  margin-top: 8px !important;
}

.fmday-field input[type="text"],
.fmday-field input[type="email"],
.fmday-field textarea,
.fmday-field select {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  background: #fff !important;
  color: #333 !important;
}

.fmday-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}

.fmday-field input:focus,
.fmday-field textarea:focus,
.fmday-field select:focus {
  border-color: #3a96a0 !important;
  box-shadow: 0 0 0 3px rgba(58,150,160,0.08) !important;
}

.fmday-char-count {
  font-size: 10px !important;
  color: #ccc !important;
  text-align: right !important;
}

/* ── Errors ── */
.fmday-error {
  font-size: 12px !important;
  color: #d9534f !important;
  display: none !important;
}

/* ── Upload Box ── */
.fmday-upload-box {
  border: 2px dashed #c5d5c5 !important;
  border-radius: 10px !important;
  height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #fafcfa !important;
  transition: border-color 0.2s, background 0.2s !important;
  margin-bottom: 14px !important;
}

.fmday-upload-box:hover,
.fmday-upload-box.fmday-drag-over {
  border-color: #3a96a0 !important;
  background: #f0f8f8 !important;
}

.fmday-upload-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  color: #b0b8c0 !important;
}

.fmday-upload-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #a0a8b0 !important;
}

.fmday-upload-img-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.fmday-upload-img-wrap img {
  max-width: 90% !important;
  max-height: 80px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

.fmday-remove-x {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #d9534f !important;
  color: #fff !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ── Submit Button ── */
.fmday-submit-btn {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(135deg, #3a96a0, #4a72b0, #7a5baa) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
  box-shadow: 0 4px 14px rgba(58,150,160,0.25) !important;
  letter-spacing: 0.3px !important;
}

.fmday-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(58,150,160,0.4) !important;
}

.fmday-retry-btn {
  display: inline-block !important;
  background: #eee !important;
  color: #444 !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* ── Loading ── */
#fmday-loading {
  text-align: center !important;
  padding: 40px 20px !important;
}

.fmday-spinner {
  width: 40px !important;
  height: 40px !important;
  border: 3px solid #eee !important;
  border-top-color: #3a96a0 !important;
  border-radius: 50% !important;
  animation: fmday-spin 0.7s linear infinite !important;
  margin: 0 auto 16px !important;
}

@keyframes fmday-spin {
  to { transform: rotate(360deg); }
}

#fmday-loading p {
  font-size: 14px !important;
  color: #666 !important;
}

/* ── Result ── */
#fmday-result {
  text-align: center !important;
  padding: 20px 0 !important;
}

#fmday-result-img {
  max-width: 260px !important;
  width: 100% !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

#fmday-result-message {
  font-size: 14px !important;
  color: #333 !important;
  margin-bottom: 12px !important;
}

.fmday-btn-primary {
  display: inline-block !important;
  background: linear-gradient(135deg, #3a96a0, #4a72b0) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 28px !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

/* ── Error State ── */
#fmday-error-state {
  text-align: center !important;
  padding: 30px 0 !important;
}

#fmday-error-message {
  font-size: 14px !important;
  color: #d9534f !important;
  margin-bottom: 12px !important;
}

/* ── Closed ── */
.fmday-closed-msg {
  text-align: center !important;
  padding: 48px 20px !important;
}

.fmday-closed-msg p {
  color: #666 !important;
  font-size: 15px !important;
}

/* ═══════════════════════════════════════
   EXPLORE HEADING (between form & wall)
   ═══════════════════════════════════════ */
.fmday-explore-header {
  text-align: center !important;
  padding: 36px 20px 18px !important;
  background: transparent !important;
}

.fmday-explore-title {
  font-size: clamp(18px, 3vw, 28px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  margin: 0 0 6px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

.fmday-explore-subtitle {
  font-size: clamp(15px, 2.4vw, 18px) !important;
  color: #fff !important;
  margin: 0 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3) !important;
}

.fmday-explore-arrow {
  display: block !important;
  margin: 14px auto 0 !important;
  max-width: 80px !important;
  height: auto !important;
}

/* ═══════════════════════════════════════
   WALL SECTION
   ═══════════════════════════════════════ */
#fmday-wall-section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  cursor: grab !important;
  min-height: 450px !important;
  background: transparent !important;
}

#fmday-wall-section:active {
  cursor: grabbing !important;
}

#fmday-wall-container {
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════
   MODAL
   ═══════════════════════════════════════ */
.fmday-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 24px 16px !important;
}

.fmday-modal-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(6px) !important;
}

.fmday-modal-content {
  position: relative !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 28px !important;
  max-width: 640px !important;
  width: 92% !important;
  margin: auto !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
  animation: fmday-pop 0.25s ease-out !important;
}

@keyframes fmday-pop {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fmday-modal-close {
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  background: none !important;
  border: none !important;
  font-size: 26px !important;
  cursor: pointer !important;
  color: #bbb !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

.fmday-modal-close:hover {
  color: #333 !important;
}

.fmday-modal-body {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

#fmday-modal-img {
  width: 220px !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

.fmday-modal-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding-top: 8px !important;
}

#fmday-modal-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 0 2px !important;
}

.fmday-modal-position {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #3a96a0 !important;
  margin: 0 0 14px !important;
}

#fmday-modal-bio {
  font-size: 14px !important;
  color: #555 !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

/* ═══════════════════════════════════════
   RTL SUPPORT (Arabic, etc.)
   ═══════════════════════════════════════ */
html[dir="rtl"] #fmday-app,
html[lang="ar"] #fmday-app {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .fmday-card-preview,
html[lang="ar"] .fmday-card-preview {
  border-right: none !important;
  border-left: 1px solid #eee !important;
}

html[dir="rtl"] .fmday-char-count,
html[lang="ar"] .fmday-char-count {
  text-align: left !important;
}

html[dir="rtl"] .fmday-field select,
html[lang="ar"] .fmday-field select {
  background-position: left 12px center !important;
  padding-right: 12px !important;
  padding-left: 32px !important;
}

html[dir="rtl"] .fmday-modal-close,
html[lang="ar"] .fmday-modal-close {
  right: auto !important;
  left: 14px !important;
}

html[dir="rtl"] .fmday-remove-x,
html[lang="ar"] .fmday-remove-x {
  right: auto !important;
  left: 4px !important;
}

html[dir="rtl"] .fmday-card-header-title,
html[dir="rtl"] .fmday-explore-title,
html[dir="rtl"] .fmday-explore-subtitle,
html[dir="rtl"] .fmday-submit-btn,
html[dir="rtl"] .fmday-label,
html[dir="rtl"] .fmday-upload-label,
html[dir="rtl"] .fmday-attempts-notice,
html[dir="rtl"] .fmday-field input,
html[dir="rtl"] .fmday-field textarea,
html[dir="rtl"] .fmday-field select,
html[dir="rtl"] .fmday-btn-primary,
html[dir="rtl"] .fmday-retry-btn,
html[dir="rtl"] #fmday-modal-name,
html[dir="rtl"] .fmday-modal-position,
html[dir="rtl"] #fmday-modal-bio,
html[lang="ar"] .fmday-card-header-title,
html[lang="ar"] .fmday-explore-title,
html[lang="ar"] .fmday-explore-subtitle,
html[lang="ar"] .fmday-submit-btn,
html[lang="ar"] .fmday-label,
html[lang="ar"] .fmday-upload-label,
html[lang="ar"] .fmday-attempts-notice,
html[lang="ar"] .fmday-field input,
html[lang="ar"] .fmday-field textarea,
html[lang="ar"] .fmday-field select,
html[lang="ar"] .fmday-btn-primary,
html[lang="ar"] .fmday-retry-btn,
html[lang="ar"] #fmday-modal-name,
html[lang="ar"] .fmday-modal-position,
html[lang="ar"] #fmday-modal-bio {
  letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 680px) {
  .fmday-card-inner {
    flex-direction: column !important;
  }

  .fmday-card-preview {
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 20px !important;
  }

  .fmday-preview-box {
    max-width: 180px !important;
    margin: 0 auto !important;
  }

  .fmday-modal-body {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #fmday-modal-img {
    width: 160px !important;
  }
}