@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Dancing+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&family=Parisienne&display=swap");
/* ===== CSS VARIABLES ===== */

:root {
  /* Centralized CSS variables only. Keep selectors and keyframes
     at top-level (outside :root) so CSS is valid across browsers. */
  --primary-pink: #ff69b4;
  --primary-pink-hover: #ff1e56;
  --soft-pink: #ffe6f0;
  --peach: #ffb6c1;
  --light-grey: #e9ecef;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --success: #28a745;
  --site-max-width: 1400px;

  /* Merged page-specific tunables (kept centrally for consistency). */
  /* create-profile */
  --create-card-padding: 30px;
  --create-card-radius: 20px;
  --create-card-max-width: 500px;

  /* instagram page */
  --instagram-bg-start: #fff7fb;
  --instagram-bg-end: #fff0f6;

  /* navigation */
  --nav-bg: #fff;
  --nav-accent: #e7548b;
  --nav-accent-2: #ff9acb;
  --nav-text: #333;
  --nav-muted: #666;

  /* toast/messages */
  --toast-bg-success: #e6ffef;
  --toast-border-success: #55c38a;
  --toast-text-success: #066237;
  --toast-bg-error: #fff0f0;
  --toast-border-error: #e05555;
  --toast-text-error: #7a1515;
  --toast-z: 9999;
  --nav-z: 11000;

  /* voting */
  --vote-btn-padding: 10px 16px;
  --vote-btn-radius: 25px;
  --vote-gap: 15px;

  /* contests */
  --contest-primary: #e75480;
  --contest-accent: #ff69b4;
  --contest-light: #fff0f6;
  --contest-border: #ffb6d5;
  --contest-text-primary: #333;
  --contest-text-secondary: #666;
  --contest-success: #4caf50;
  --contest-error: #f44336;
  --contest-gold: #ffc107;
  --contest-silver: #c0c0c0;
  --contest-bronze: #cd7f32;

  /* extra-stats / pyramid */
  --pyramid-medal-top: 180px;
  --pyramid-medal-left: 20%;
  --pyramid-medal-size: 40px;
  --pyramid-medal-padding: 8px 12px;
  --pyramid-medal-radius: 14px;
  --pink: #ff6b9d;
  --soft-pink: #fff0f6;
  --muted: #6b6b6b;
  --card-bg: #fff;
  --btn-text: #fff;
  --bg-overlay: rgba(0,0,0,0.65);
  /* Overview page specific variables (migrated from style.overview.css) */
  --overview-columns: 3; /* default columns (max 3 profiles per row) */
  --overview-thumb-size: 400px; /* default thumbnail size on wide screens */
  --overview-profile-thumb-size: 64px; /* small profile avatar in lists */
  --text-secondary: #ffb6d5;
  --overview-profile-name-font: "Dancing Script", cursive;
  --overview-profile-name-size: 2.5rem;
  --overview-profile-name-font-color: #e7548b;
  --overview-profile-bio-font: "Galliant", cursive;
  --overview-profile-bio-size: 1.4rem;
  --overview-profile-bio-font-color: #e7548b;
  --img-border-color: #ff9fc2;
  --card-border: #ff69b4;
  --btn-border: #ff86b8;
  --status-bg: #ff6b9d;
  --btn-gradient: linear-gradient(90deg, #ffb6d5 0%, #ff7aa3 100%);
  --btn-gradient-2: linear-gradient(90deg, #ffa1c8 0%, #f791a8 100%);
  --btn-hover-gradient: linear-gradient(90deg, #ffd1dc 0%, #ffb6d5 100%);
  --card-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
  --medal-shadow: 0 6px 18px rgb(231 84 139 / 8%);
  --medal-size: 90px;
  --medal-radius: 30px;
}

/* ==== Migration utilities & small global helpers ==== */
.m-0 { margin: 0; }
.my-10 { margin: 10px 0; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.d-none { display: none; }
.small-muted { color: #666; font-size: 12px; }
.inline-delete-form { display: inline-block; }
.btn-danger { background: #dc3545; color: white; border: none; padding: 6px 10px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.btn-danger:hover { background: #c82333; }

.spinner-inline {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ffc107;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin { to { transform: rotate(360deg); } }
.debug-box { padding: 10px; margin: 5px 0; border-radius: 5px; color: white; }
.debug-box--danger { background: #d63031; }
.debug-box--success { background: #00b894; }
.debug-box--warn { background: #fdcb6e; color: #333; border: 1px solid #e17055; }
.debug-box--info { background: #74b9ff; color: white; }
.debug-box--yellow { background: #ff9; color: #222; border: 1px solid #fc0; }
.debug-pre { background: #fff; padding: 5px; border-radius: 3px; font-size: 12px; overflow-x: auto; }
.follow-center { margin-top: 15px; text-align: center; }

/* Small utility classes used by JS to avoid inline styles */
.hidden { display: none; }
.btn--muted { opacity: 0.6; pointer-events: none; }
.temp-message { position: fixed; right: 18px; bottom: 18px; background: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 30px rgb(0 0 0 / 12%); z-index: 2000000; }
.temp-message.success { border-left: 4px solid var(--success); }
.temp-message.error { border-left: 4px solid #d63031; }
.file-info-box { background: #fff; border: 1px solid rgb(0 0 0 / 6%); padding: 8px; border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 4%); font-size: 0.95rem; }
.debug-mode .debug-info { display: block; }
.btn--follow { background: #ff6b9d; color: #fff; }
.btn--unfollow { background: #6c757d; color: #fff; }

/* Layout: make footer stick to bottom of viewport on short pages.
  We use a simple flex layout on the body and let the footer consume
  remaining space via margin-top:auto so the footer remains at the
  bottom when content is short, and naturally flows after content when
  it is long. This is safe across pages because it only adjusts flow
  and does not change positioning of fixed elements like the nav.
*/
/* Global box-sizing reset. Without this, any element that combines
   width:100% with padding (e.g. .footer below) adds its padding on top
   of that 100%, overflowing the viewport and causing a site-wide
   horizontal scrollbar. */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; overflow-x: hidden; }
body { display: flex; flex-direction: column; min-height: 100vh; }
/* Make the main content container grow to fill available space */
.container { flex: 1 0 auto; }
/* Ensure footer is pushed to the bottom when page content is short */
.footer { margin-top: auto; }

/* Gallery related styles moved to style.gallery.css */
/* Keep global transition helper */
*:where(img, video) { transition: transform 0.28s ease, object-position 0.2s ease;}

/* ... rest of original style.css content copied into this file ... */

/* Footer styles moved to style.footer.css */

/* Centralized variables and global layout helpers
   Keep a single :root at top of this file. Per-page files should not
   redeclare variables; they may override individual variables if needed. */

/* Global site container and layout helpers */
.container {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* Gallery image and grid presentation moved to style.gallery.css
   (contains canonical .gallery-grid, .photo-card, .photo-image-container rules)
*/

/* Tagging visuals removed site-wide. If you later need to restore a
  compact tagging UI, reintroduce styles under a page-scoped selector.
*/

/* Overlay date and title inside card */
.gallery-date-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgb(0 0 0 / 50%);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* Modal styles moved to style.profile.css to avoid cascade conflicts */
/* This section intentionally left empty to maintain file structure */

/* Temporary toast / inline messages (was previously applied via element.style.cssText) */
.temp-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 6px;
  z-index: var(--toast-z);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
  height: 50px;
  width: 300px;
}
.temp-message.success { background: #28a745; }
.temp-message.error { background: #dc3545; }

/* File preview/info box used by profile-edit.js */
.file-info-box {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f8f9fa;
  font-size: 0.95rem;
}

/* Voting system inline message helpers moved to style.voting.css (canonical definitions).
   Legacy helpers such as .temp-message remain here for backwards-compatible usage. */
.vote-result-icon { font-size: 20px; margin-right: 10px; }

/* ===== GALLERY GRID LAYOUT ===== */

/* ===== PAGE-SCOPED PRESENTATION (moved to per-page files) =====
   The following presentation and page-specific rules were migrated into
   per-page styles to keep `style.css` focused on globals and utilities.

   - Gallery layout, thumbnails, upload & management UI -> style.gallery.css
   - Overview profile grid & profile-card presentation -> style.overview.css
   - Profile header, personal-info and profile-edit UI -> style.profile.css
  - Voting UI components and variants -> style.voting.css
   - Competition-specific pyramid medal -> style.competition.css

   If you need to tweak page presentation, edit the corresponding
   `style.<page>.css` file (links are already included in the templates).
*/

/* ===== NAVIGATION ===== */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--nav-z);
  background: linear-gradient(135deg, var(--primary-pink), #ffb6c1);
  color: #fff;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  box-sizing: border-box;
}

.navigation h2 {
  margin: 0;
  font-family: "Dancing Script", cursive;
  font-size: 2.2rem;
  color: #fff;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 25%);
}

/* === SHARED DYNAMIC BACKGROUND (moved from per-page files) ===
   This block centralizes the animated feminine background so it is
   available site-wide via `styles/style.css`. Keep JS behavior in
   `profile-dynamic-bg.js` (or move to a global include if desired).
*/
.dynamic-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fff0f6 0%, #ffe8f0 50%, #fff5fa 100%);
  z-index: -1;
  overflow: hidden;
}

.dynamic-bg-blob {
  display: none;
}

.dynamic-bg-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(231, 84, 128, 0.35) 0%, rgba(231, 84, 128, 0.15) 20%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(30px);
  transform: translate(-50%, -50%);
  /* No `transition` here on purpose: profile-dynamic-bg.js already eases
     this element's position every animation frame via translate3d(); a CSS
     transition on top of that double-animates and was part of why this
     forever-running loop was expensive enough to make pages feel like they
     froze the longer a tab stayed open. */
  will-change: transform;
}

.dynamic-bg-particle {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff85c0, #e75480);
  opacity: 0.3;
  animation: particle-float 20s infinite linear;
}

@keyframes particle-float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}

/* Stats header styling moved to `style.vote-overview.css` */

/* Apply same decorative font to filter section headings */
.filter-section h3 {
  font-family: "Dancing Script", cursive;
  font-size: 1.6rem;
  color: var(--primary-pink);
  margin: 0 0 10px;
}

.navigation nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.navigation nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.navigation nav a:hover {
  color: #ffd700;
  background: rgb(255 255 255 / 8%);
}

/* (debug block removed) Navigation will use the normal styling above. */

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 36px;
}

.pagination-status { color: var(--text-secondary); font-size: 0.95rem; }

.pagination-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
  background: rgb(255 255 255 / 85%);
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
}

.pagination-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }

.pagination-link,
.pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  min-width: 34px;
  text-align: center;
  transition: all 0.18s ease;
  border: 1px solid rgb(0 0 0 / 4%);
}

.pagination-link { background: white; color: var(--primary-pink); }
.pagination-link:hover { background: var(--primary-pink); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgb(255 105 180 / 18%); }
.pagination-current { background: linear-gradient(135deg, var(--primary-pink), var(--primary-pink-hover)); color: white; box-shadow: 0 8px 22px rgb(255 105 180 / 22%); }
.pagination-dots { padding: 8px 6px; color: var(--text-secondary); font-weight: 700; }

/* ===== FORMS ===== */
form {
  max-width: min(90vw, 600px);
  margin: 20px auto;
  background: rgb(255 255 255 / 80%);
  padding: clamp(15px, 4vw, 30px);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

/* Pagination container helper for pages using .pagination-container
   Centers the pagination info and provides styled controls. Responsive:
   on narrow screens the controls stack under the info. */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--site-max-width);
  margin: 12px auto;
  padding: 0 12px;
  box-sizing: border-box;
}
.pagination-container .pagination-info {
  flex: 1 1 40%;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.pagination-container .pagination-controls {
  flex: 1 1 60%;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* Buttons used in the markup (.pagination-btn) */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 38px;
  border-radius: 10px;
  background: white;
  color: var(--primary-pink);
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.15s ease;
}
.pagination-btn:hover { background: var(--primary-pink); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgb(255 105 180 / 18%); }
.pagination-btn.active,
.pagination-btn.current,
.pagination-btn[aria-current="page"] {
  background: linear-gradient(135deg, var(--primary-pink), var(--primary-pink-hover));
  color: #fff;
  box-shadow: 0 8px 22px rgb(255 105 180 / 22%);
}

@media (max-width: 600px) {
  .pagination-container { flex-direction: column; gap: 8px; padding: 0 8px; }
  .pagination-container .pagination-info { order: 1; }
  .pagination-container .pagination-controls { order: 2; }
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-pink);
  font-weight: 700;
}

/* gallery-grid canonical rules are defined later; earlier simple definition removed to avoid duplicates */

input,
textarea,
select {
  width: 100%;
  padding: 10px;
  border: 2px solid #ffb6c1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Note: consolidated gallery-grid rules appear later in this file and provide the canonical
   responsive + top-crop behavior. Earlier, smaller definitions were removed to avoid
   duplicate selectors. See the consolidated section below for the authoritative rules. */

/* ===== PERSONAL INFO SECTION - feminine boxed card ===== */
.personal-info-section {
  /* Center content and use the decorative script for headings/text */
  text-align: center;
  font-family: "Dancing Script", cursive;
  color: var(--primary-pink);

  /* Box styling */
  background: linear-gradient(180deg, rgb(255 245 250 / 90%), rgb(255 238 243 / 95%));
  border: 1px solid rgb(255 182 193 / 45%);
  border-radius: 14px;
  padding: 20px 28px;
  max-width: 820px;
  margin: 18px auto;
  box-shadow: 0 8px 24px rgb(255 182 193 / 8%);
  font-size: 1.08rem;
  line-height: 1.45;
}

.personal-info-section h3,
.personal-info-section h2 {
  margin: 0 0 8px;
  color: #e7548b; /* a slightly stronger pink for headings */
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
}

.personal-info-section p {
  margin: 6px 0 0;
  color: #6b2b3a; /* deep rose for body copy for contrast */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 0.98rem;
}

/* decorative flourish above the section (subtle) */
.personal-info-section::before {
  content: "❀";
  display: block;
  font-size: 20px;
  color: rgb(231 84 139 / 90%);
  margin-bottom: 8px;
  transform: translateY(-2px);
}

/* Responsive: reduce padding and font-size on small screens */
@media (max-width: 600px) {
  .personal-info-section {
    padding: 14px 16px;
    margin: 14px 12px;
    font-size: 1.01rem;
    border-radius: 10px;
  }

  .personal-info-section h3,
  .personal-info-section h2 { font-size: 1.4rem; }
}

/* Gallery grid and thumbnail presentation moved to `style.gallery.css`.
   Edit `style.gallery.css` for all gallery-specific layout and image-crop behavior.
*/

/* Profile-page specific overrides moved to style.profile.css */

/* See style.profile.css -> body.is-profile-page scoped rules */

/* PROFILE HEADER: ensure image sits above the info (name, bio) on profile page */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* Ensure the profile name sits under the image and uses the script font */
.profile-header .profile-info-section h1,
.profile-info-section h1 {
  font-family: "Dancing Script", cursive;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--primary-pink);
}

/* BUTTON PRIMITIVES
   Replaced the global `button, input[type="submit"]` rule with
   `.btn` primitives to avoid accidental inheritance from broad
   element selectors. Use the `.btn` class on any interactive
   control that should receive these visual styles.
*/
.btn,
button.btn,
input[type="submit"].btn {
  background: linear-gradient(135deg, var(--primary-pink), #ffb6c1);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

/* Backwards-compatibility helper: if you need to keep raw `<button>`
   elements visually styled, add the `btn` class or use the helper
   `button.btn`. Avoid re-adding a global element selector. */

/* rest omitted for brevity in the backup (full file saved) */

/* === Appended keyframes (shimmer, spin, bounce) === */
@keyframes shimmer {
  0%,
  100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* === Exported inline styles (migrated from PHP/JS inline attributes) === */
.login-indicator { margin-left: 8px; color: rgb(255 255 255 / 95%); font-weight: 700; }
.debug-info { background: #f0f0f0; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; display: none; }
.debug-info.warn { background: #ffeaa7; border-color: #d63031; }
.debug-info.info { background: #e8f4fd; border-color: #2196f3; }
.debug-info.purple { background: #a29bfe; border-color: #6c5ce7; }
.debug-info.error { background: #ff6b6b; color: white; border-color: #d63031; }
.follow-section { margin-top: 15px; text-align: center; }

.btn-follow,
.btn-unfollow { width: auto; display: inline-block; padding: 8px 12px; border-radius: 20px; cursor: pointer; border: none; }
.btn-unfollow { background: #6c757d; color: white; }
.btn-follow { background: #ff6b9d; color: white; }
.medals-container, .Profildata-container { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; justify-content: center; }
.medal-group { min-width: 220px; flex: 1 1 220px; padding: 10px; border-radius: 10px; background: #fff; text-align: center; }
.medal-group.bordered { border: 2px solid #ddd; }
.medal-group-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.medal-empty { color: #888; padding: 8px; border-radius: 8px; background: #fafafa; }
.medal { padding: 6px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 6%); }
.medal-text { font-weight: 600; }

/* removed duplicate rule - styling consolidated above */
.gallery-upload-note { margin-bottom: 16px; }
.profile-manage-btn { padding: 12px 20px; background: var(--primary-pink); color: white; text-decoration: none; border-radius: 5px; margin-right: 10px; display: inline-block; }
.small-badge { background: #eee; color: #333; padding: 6px 10px; border-radius: 8px; text-decoration: none; display: inline-block; }

.spinner-inline {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ffc107;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }

/* Utility: container with limited width for admin/manager panels */
.container-narrow { max-width: 900px; margin-top: 18px; }

/* Utility: inline form display for small controls */
.inline-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }

/* Utility: right-aligned row for actions */
.row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

/* Upload form and preview styles migrated to: style.gallery.css
   Rationale: page-scoped management/upload styles belong with gallery overrides.
   Edit `style.gallery.css` to change upload form or preview presentation.
*/
.btn-pink { background: var(--primary-pink); color: white; padding: 6px 10px; border-radius: 6px; border: none; }

/* ===== FOOTER STYLES (kept in style.css as requested) =====
   Purpose: central, admin-friendly footer rules for the site.
   NOTE: This block is intentionally active and should remain in `style.css`.
*/
.footer {
  position: static;
  background: linear-gradient(135deg, var(--primary-pink), #ffb6c1);
  color: whitesmoke;
  padding: 18px 12px;
  text-align: center;
  font-family: "Parisienne", cursive;
  font-size: 1.5rem;
  z-index: 9999;
  width: 100%;
  margin-top: 2rem;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}
.footer p { margin: 0; }
.footer.footer-inline { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Footer links styling - smaller, normal font */
.footer-links {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-style: normal;
}

/* Compatibility shims: if any code relies on the old important behavior,
   use these classes to preserve that behavior while migrating existing
   templates at your pace. */
.d-none-important,
.hidden-important { display: none !important; }

.footer-links a {
  color: whitesmoke;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Ensure footer copyright appears below links */
.footer.footer-inline .footer-copyright {
  margin-top: 4px;
}

/* Image moderation: owner/admin-only marker on photos still waiting for
   admin approval (includes/image_moderation.php). */
.photo-image-container { position: relative; }
.moderation-pending-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.95);
  color: #3b2a00;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* Persistent notice after an upload that awaits admin approval (gallery.php) */
.moderation-upload-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: #fff8e1;
  border: 2px solid #ffc107;
  color: #5a4300;
  font-size: 0.98rem;
  line-height: 1.4;
}
.moderation-upload-notice > span { font-size: 1.5rem; line-height: 1; }
.moderation-upload-notice.upload-error-notice {
  background: #fdecea;
  border-color: #d9534f;
  color: #7a1f1a;
}

/* Sensitive ("freizügig") photos shown blurred to guests (includes/image_moderation.php).
   The image itself is already a server-side blurred copy; this is just the notice. */
.sensitive-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: rgba(60, 20, 40, 0.35);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  font-size: 0.9rem;
  line-height: 1.35;
  pointer-events: none;
}
.sensitive-overlay-icon { font-size: 2rem; }
.sensitive-overlay strong { font-size: 1.05rem; }
.sensitive-overlay-login {
  pointer-events: auto;
  margin-top: 0.3rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: #ff69b4;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-shadow: none;
}
.sensitive-overlay-login:hover { background: #e0559d; }

/* Rejected-photo notice (includes/image_moderation.php): compact centered
   card matching the owner-only box above it on the profile/gallery page.
   Selectors are doubled up to beat page-level div/form styles. */
.moderation-upload-notice.rejection-notice {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 680px;
  margin: 16px auto;
  padding: 14px 18px;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: linear-gradient(135deg, #fff5f7 0%, #ffecef 100%);
  border: 2px solid #f08a9c;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(217, 83, 79, 0.12);
  color: #7a1f2b;
  font-size: 0.95rem;
}
.moderation-upload-notice.rejection-notice > span { font-size: 1.4rem; line-height: 1.2; }
.moderation-upload-notice.rejection-notice > div { flex: 1; min-width: 0; }
.moderation-upload-notice.rejection-notice strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.rejection-notice .rejection-list { margin: 0 0 10px 1.1rem; padding: 0; }
.rejection-notice .rejection-list li { margin: 3px 0; line-height: 1.4; word-break: break-word; }
.rejection-notice .rejection-list small { color: #a05866; }
.moderation-upload-notice.rejection-notice form {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.moderation-upload-notice.rejection-notice form .btn {
  display: inline-block;
  margin: 0;
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff69b4, #e7548b);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(231, 84, 139, 0.25);
}
.moderation-upload-notice.rejection-notice form .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ================= Legal pages (includes/privacy_*, terms_*, youth_*) ================= */
body.page-legal > main.legal-doc {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 900px;
  margin: calc(var(--nav-height, 130px) + 20px) auto 40px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ffd1e3;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(231, 84, 139, 0.08);
  color: #3b2a33;
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
}
.legal-doc h1 { font-family: "Dancing Script", cursive; color: var(--primary-pink, #e7548b); font-size: 2.4rem; margin: 0 0 4px; text-align: center; }
.legal-doc h2 { font-size: 1.2rem; color: #6b2740; margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid #f6dbe6; scroll-margin-top: calc(var(--nav-height, 130px) + 16px); }
.legal-doc p, .legal-doc li { overflow-wrap: anywhere; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc a { color: #c2185b; }
.legal-doc .legal-meta { text-align: center; color: #8a5a70; font-size: 0.9rem; margin: 0 0 16px; }
.legal-doc .legal-note { background: #f5f0ff; border-left: 4px solid #9b7fd1; padding: 10px 14px; border-radius: 8px; font-size: 0.92rem; }
.legal-doc .legal-highlight { background: #fff5f9; border: 1.5px solid #ffb3d1; border-radius: 12px; padding: 12px 16px; }
.legal-doc .legal-age-badge { text-align: center; font-size: 1.05rem; margin: 12px 0 8px; }
.legal-doc .legal-address { background: #fffafc; border-radius: 10px; padding: 10px 14px; border: 1px solid #f6dbe6; }
.legal-doc .legal-missing { background: #fff3cd; color: #8a5a00; border: 1px dashed #e0b200; border-radius: 4px; padding: 0 4px; font-size: 0.92em; }
.legal-doc .legal-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.legal-doc .legal-toc a { font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #ffc2da; text-decoration: none; }
.legal-doc .legal-toc a:hover { background: #fff0f6; }
.legal-doc .legal-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 8px 0; }
.legal-doc .legal-table th, .legal-doc .legal-table td { border: 1px solid #f6dbe6; padding: 6px 8px; text-align: left; vertical-align: top; }
.legal-doc .legal-table th { background: #fff0f6; color: #6b2740; }
@media (max-width: 600px) {
  body.page-legal > main.legal-doc { padding: 18px 16px; }
  .legal-doc .legal-table { display: block; overflow-x: auto; }
}

/* ================= Contact form (contact.php) ================= */
.contact-doc .contact-form { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 8px; padding: 0; background: transparent; box-shadow: none; border: 0; max-width: none; }
.contact-doc .contact-form label { font-weight: 700; color: #6b2740; margin-top: 8px; font-size: 0.95rem; }
.contact-doc .contact-form input[type=text],
.contact-doc .contact-form input[type=email],
.contact-doc .contact-form input[type=url],
.contact-doc .contact-form select,
.contact-doc .contact-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #f3c6d8; border-radius: 10px;
  background: #fff; font: inherit; color: #3b2a33;
}
.contact-doc .contact-form textarea { resize: vertical; min-height: 140px; }
.contact-doc .contact-form input:focus, .contact-doc .contact-form select:focus, .contact-doc .contact-form textarea:focus { outline: none; border-color: #ff69b4; box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.15); }
.contact-doc .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-doc .contact-row > div { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 600px) { .contact-doc .contact-row { grid-template-columns: 1fr; } }
.contact-doc .contact-url { display: flex; flex-direction: column; gap: 6px; }
.contact-doc .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-doc .contact-privacy { font-size: 0.85rem; color: #8a5a70; margin: 8px 0 4px; }
.contact-doc .contact-submit { align-self: center; min-width: 220px; padding: 12px 24px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff69b4, #e7548b); color: #fff; font-weight: 800; cursor: pointer; margin-top: 8px; }
.contact-doc .contact-success { background: #e8f8ee; border: 1.5px solid #6cc28f; color: #1e6b3a; border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-weight: 600; }
.contact-doc .contact-errors { background: #fdecea; border: 1.5px solid #e89a96; color: #7a1f1a; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.contact-doc .contact-alt { text-align: center; font-size: 0.9rem; color: #8a5a70; }