/* ============================================================
   NEONLENS PHOTOGRAPHY — STYLES
   ============================================================
   Table of Contents:
   1.  CSS Variables
   2.  Reset & Base
   3.  Layout Utilities
   4.  Dark UI Components (neon dashboard)
   5.  Navigation
   6.  Hero (home fullscreen)
   7.  Page Heroes (inner pages)
   8.  Buttons
   9.  Featured / Gallery Grids
   10. About / Portfolio / Values
   11. Photo Detail Page
   12. Support Page
   13. Touch-Up Page
   14. Crop Tool Page
   15. Cart Page
   16. Checkout Page
   17. Order Confirmation Page
   18. Client Portal Page
   19. FAQ Page
   20. Footer
   21. Toast & Chat
   22. Responsive Overrides
   ============================================================ */


/* ============================================================
   1. CSS Variables
   ============================================================ */
:root {
  --bg: #070812;
  --panel: #0c1020;
  --card: #0b0f1d;
  --text: #eef1ff;
  --muted: #b7bfe6;

  --accent: #a855f7;   /* neon purple */
  --accent2: #22d3ee;  /* neon cyan */
  --accent3: #34d399;  /* neon green */
  --danger: #ff4d8d;

  --border: rgba(255, 255, 255, .12);
  --shadow: 0 14px 40px rgba(0, 0, 0, .55);
  --radius: 16px;
  --max: 1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --glow-purple: 0 0 20px rgba(168, 85, 247, .45), 0 0 60px rgba(168, 85, 247, .18);
  --glow-cyan:   0 0 18px rgba(34, 211, 238, .45), 0 0 55px rgba(34, 211, 238, .18);
}


/* ============================================================
   2. Reset & Base
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 15% 0%,   rgba(168, 85, 247, .22), transparent 60%),
    radial-gradient(800px 480px at 85% 10%,  rgba(34, 211, 238, .18), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(52, 211, 153, .10), transparent 55%),
    var(--bg);
  color: var(--text);
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Photography pages override */
body.photo-home {
  margin: 0;
  font-family: "Georgia", "Times New Roman", serif;
  color: #222;
  background: #fff;
}


/* ============================================================
   3. Layout Utilities
   ============================================================ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.row       { display: flex; gap: 16px; flex-wrap: wrap; }
.spread    { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.badge     { display: inline-flex; align-items: center; gap: 8px; background: rgba(124, 92, 255, .15); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 12px; }
.small     { font-size: 12px; color: var(--muted); }
.right     { text-align: right; }

/* Shared clean section containers */
.narrow-copy {
  max-width: 800px;
  text-align: center;
}
.narrow-copy h2 {
  font-size: 34px;
  margin-bottom: 20px;
  font-weight: 500;
  color: #222;
}
.narrow-copy p {
  font-family: Arial, sans-serif;
  line-height: 1.8;
  color: #555;
}


/* ============================================================
   4. Dark UI Components (neon dashboard)
   ============================================================ */
.heroCard    { border: 1px solid var(--border); background: linear-gradient(135deg, rgba(124, 92, 255, .20), rgba(46, 229, 157, .10)); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.heroInner   { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0; }
.heroText    { padding: 26px; }
.h1          { font-size: 40px; line-height: 1.05; margin: 0 0 12px; }
.lead        { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.h2          { font-size: 22px; margin: 0 0 10px; }
.sub         { color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

.heroMedia {
  min-height: 280px;
  background:
    radial-gradient(700px 420px at 20% 30%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(500px 320px at 80% 25%, rgba(34, 211, 238, .22),  transparent 55%),
    radial-gradient(600px 380px at 60% 80%, rgba(168, 85, 247, .20),  transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  background-size: cover;
  background-position: center;
}

.hero  { padding: 26px 0 10px; }
.section { padding: 18px 0; }

.grid                { display: grid; gap: 14px; }
.grid.cards          { grid-template-columns: repeat(3, 1fr); }
.grid.photos         { grid-template-columns: repeat(4, 1fr); }

.card                { border: 1px solid var(--border); background: rgba(18, 26, 42, .65); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card.media          { padding: 0; overflow: hidden; }
.card .title         { font-weight: 700; margin: 0 0 8px; }
.card .meta          { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 0; }
.card .pad           { padding: 14px; }

.photo               { border: 1px solid var(--border); background: rgba(18, 26, 42, .50); border-radius: 14px; overflow: hidden; cursor: pointer; }
.photo .thumb        { aspect-ratio: 4/3; background: radial-gradient(500px 240px at 20% 30%, rgba(255,255,255,.12), transparent 60%), linear-gradient(135deg, rgba(124,92,255,.45), rgba(0,0,0,.1)); }
.photo .cap          { padding: 10px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }

.chips               { display: flex; gap: 8px; flex-wrap: wrap; }
.chip                { padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; }
.chip.active         { background: rgba(124,92,255,.18); color: var(--text); }

.breadcrumbs         { padding: 12px 0; color: var(--muted); font-size: 13px; }
.breadcrumbs a       { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); }

/* Dark forms */
.form                { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .full          { grid-column: 1 / -1; }
label                { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  outline: none;
}
textarea             { min-height: 110px; resize: vertical; }

.table               { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; color: var(--muted); }
.table th            { color: var(--text); font-weight: 700; }
.totalRow td         { color: var(--text); font-weight: 700; }

/* Crop widget */
.cropWrap   { display: grid; grid-template-columns: 1fr .9fr; gap: 14px; }
.cropStage  { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(46,229,157,.15)); position: relative; aspect-ratio: 16/10; }
.cropBox    { position: absolute; left: 18%; top: 18%; width: 48%; height: 52%; border: 2px dashed rgba(255,255,255,.85); background: rgba(0,0,0,.18); border-radius: 12px; cursor: move; }
.cropHint   { position: absolute; left: 12px; bottom: 12px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(11,15,25,.55); color: var(--text); font-size: 12px; }


/* ============================================================
   5. Navigation
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 25, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.navbar  { padding: 14px 0; }
.brand   { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .4px; }
.logo    { width: 34px; height: 34px; border-radius: 12px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.75), transparent 35%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: var(--glow-cyan), var(--glow-purple); position: relative; }

nav a          { opacity: .9; }
nav a:hover    { opacity: 1; }
.navlinks      { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.navright      { display: flex; gap: 10px; align-items: center; }
.pill          { border: 1px solid var(--border); background: rgba(255,255,255,.04); padding: 9px 12px; border-radius: 999px; color: var(--muted); }
.pill input    { background: transparent; border: 0; color: var(--text); outline: none; width: 170px; }

/* Photography site header */
.site-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
}

.nav-minimal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 30px;
}

.brand-minimal {
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: 600;
}

.minimal-nav {
  display: flex;
  gap: 28px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.minimal-nav a        { color: #222; text-decoration: none; padding: 6px 10px; }
.minimal-nav a.active { border: 1px solid #222; }


/* ============================================================
   6. Buttons
   ============================================================ */
.btn         { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 14px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
.btn:hover   { background: rgba(255,255,255,.10); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #6d28d9); border-color: transparent; box-shadow: var(--glow-purple); }
.btn.success { background: linear-gradient(135deg, var(--accent2), #60a5fa); border-color: transparent; color: #061017; box-shadow: var(--glow-cyan); }
.btn.danger  { background: rgba(255,92,122,.15); border-color: rgba(255,92,122,.4); }
.iconbtn     { width: 42px; height: 42px; border-radius: 999px; }

/* Photography site buttons */
.hero-btn {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  transition: transform 0.15s ease;
}
.hero-btn.dark        { border: 1px solid #222; color: #222; }
.hero-btn:active      { transform: scale(0.93); transition: transform 0.1s ease; }

.text-link {
  display: inline-block;
  margin-top: 16px;
  color: #222;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  border-bottom: 1px solid #222;
}


/* ============================================================
   7. Hero (home fullscreen)
   ============================================================ */
.hero-photo {
  height: 100vh;
  min-height: 650px;
  background-image:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
    url("images/NeonPortrait.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.hero-overlay {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content          { color: white; padding: 20px; }
.hero-content h1       { font-size: 64px; margin: 0 0 12px; letter-spacing: 2px; font-weight: 600; }
.hero-content p        { font-family: Arial, sans-serif; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 28px; }


/* ============================================================
   8. Page Heroes (inner pages)
   ============================================================ */
.page-hero {
  height: 60vh;
  min-height: 420px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background images per page */
.page-hero-portfolio    { background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), url("images/Wedding.jpg"); }
.page-hero-about        { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonPortrait2.jpg"); }
.page-hero-gallery      { background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), url("images/NeonGlitter.jpg"); }
.page-hero-photo        { background-image: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), url("images/NeonPortrait.jpg"); }
.page-hero-support      { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonGirl.jpg"); }
.page-hero-touchup      { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonGlitter.jpg"); }
.page-hero-crop         { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonPortrait2.jpg"); }
.page-hero-cart         { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/Wedding2.jpg"); }
.page-hero-checkout     { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/Wedding.jpg"); }
.page-hero-confirmation { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonGlitter.jpg"); }
.page-hero-portal       { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/Wedding2.jpg"); }
.page-hero-faq          { background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), url("images/NeonPortrait2.jpg"); }

.page-hero-overlay {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-hero-content       { color: #fff; padding: 20px; }
.page-hero-content h1    { font-size: 56px; margin: 0 0 12px; letter-spacing: 2px; font-weight: 600; }
.page-hero-content p     { font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin: 0; }


/* ============================================================
   9. Featured / Gallery Grids
   ============================================================ */
.featured-section { padding: 70px 20px; background: #fff; }

.featured-section h2,
.about-preview h2,
.contact-preview h2 { text-align: center; font-size: 34px; margin-bottom: 30px; font-weight: 500; }

.featured-grid            { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.featured-item            { text-decoration: none; color: #222; }
.featured-item img        { width: 100%; height: 320px; object-fit: cover; display: block; }
.featured-item span       { display: block; text-align: center; margin-top: 12px; font-family: Arial, sans-serif; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }

.gallery-clean-section    { padding: 70px 20px 90px; background: #fff; }
.gallery-clean-grid       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-clean-item       { display: block; }
.gallery-clean-item img   { width: 100%; height: 320px; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-clean-item:hover img { transform: scale(1.02); }


/* ============================================================
   10. About / Portfolio / Values
   ============================================================ */
.about-preview          { padding: 80px 20px; background: #f8f8f8; }
.about-preview-inner    { max-width: 800px; margin: 0 auto; text-align: center; }
.about-preview p        { font-family: Arial, sans-serif; line-height: 1.8; color: #555; }
.contact-preview        { padding: 70px 20px 90px; text-align: center; background: #fff; }

.portfolio-categories   { padding: 70px 20px; background: #fff; }
.portfolio-grid         { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.portfolio-card         { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; }
.portfolio-card img     { width: 100%; height: 500px; object-fit: cover; display: block; }
.portfolio-label        { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 24px; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); }
.portfolio-label h2     { margin: 0 0 8px; font-size: 32px; font-weight: 500; }
.portfolio-label span   { font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.portfolio-copy         { padding: 80px 20px; background: #f7f7f7; }

.about-section-clean    { padding: 80px 20px; background: #fff; }
.about-clean-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-clean-image img  { width: 100%; height: 620px; object-fit: cover; display: block; }
.about-clean-text h2    { font-size: 38px; font-weight: 500; margin: 0 0 20px; color: #222; }
.about-clean-text p     { font-family: Arial, sans-serif; line-height: 1.9; color: #555; margin-bottom: 18px; }

.about-values           { padding: 70px 20px 90px; background: #f7f7f7; }
.values-grid            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-item             { text-align: center; }
.value-item h3          { font-size: 24px; font-weight: 500; margin-bottom: 12px; color: #222; }
.value-item p           { font-family: Arial, sans-serif; color: #555; line-height: 1.8; }


/* ============================================================
   11. Photo Detail Page
   ============================================================ */
.photo-detail-section    { padding: 70px 20px; background: #fff; }
.photo-detail-grid       { display: grid; grid-template-columns: 1.25fr .85fr; gap: 40px; align-items: start; }
.photo-main-display img  { width: 100%; height: 760px; object-fit: cover; display: block; }
.photo-detail-panel      { padding-top: 10px; }
.photo-detail-copy h2    { font-size: 38px; font-weight: 500; color: #222; margin: 0 0 18px; }
.photo-detail-copy p     { font-family: Arial, sans-serif; color: #555; line-height: 1.8; margin-bottom: 28px; }

.photo-order-form label  { display: block; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #666; margin-bottom: 8px; }

.form-row-clean          { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row-clean.single   { grid-template-columns: 1fr; }
.form-row-clean select,
.form-row-clean textarea { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.form-row-clean textarea { min-height: 130px; resize: vertical; }

.photo-action-group               { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.photo-action-group .hero-btn.dark { background: #fff; }

.photo-secondary-links   { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.photo-secondary-links a { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; width: fit-content; }

.photo-meta-clean        { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; font-family: Arial, sans-serif; font-size: 13px; color: #666; }

.related-gallery-section { padding: 0 20px 90px; background: #fff; }
.related-gallery-section h2 { text-align: center; font-size: 34px; font-weight: 500; color: #222; margin: 0 0 30px; }


/* ============================================================
   12. Support Page
   ============================================================ */
.support-clean-section   { padding: 80px 20px; background: #fff; }
.support-clean-grid      { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.support-copy h2         { font-size: 38px; font-weight: 500; margin: 0 0 20px; color: #222; }
.support-copy p          { font-family: Arial, sans-serif; line-height: 1.9; color: #555; margin-bottom: 18px; }

.support-links-clean     { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.support-links-clean a   { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }

.support-form-wrap       { background: #fafafa; padding: 32px; }
.support-form-clean input,
.support-form-clean select,
.support-form-clean textarea { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.support-form-clean textarea { min-height: 140px; resize: vertical; }
.support-button-row      { margin-top: 16px; }

.support-info-strip      { padding: 0 20px 90px; background: #fff; }
.support-info-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.support-info-item       { text-align: center; padding: 28px 20px; border-top: 1px solid #ddd; }
.support-info-item h3    { font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #222; }
.support-info-item p     { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.8; }


/* ============================================================
   13. Touch-Up Page
   ============================================================ */
.touchup-clean-section    { padding: 80px 20px; background: #fff; }
.touchup-clean-grid       { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: start; }
.touchup-copy h2          { font-size: 38px; font-weight: 500; margin: 0 0 20px; color: #222; }
.touchup-copy p           { font-family: Arial, sans-serif; line-height: 1.9; color: #555; margin-bottom: 18px; }

.touchup-examples         { margin-top: 30px; }
.touchup-examples h3      { font-size: 24px; font-weight: 500; margin: 0 0 14px; color: #222; }
.touchup-examples ul      { margin: 0; padding-left: 18px; font-family: Arial, sans-serif; color: #555; line-height: 1.9; }

.touchup-form-wrap        { background: #fafafa; padding: 32px; }
.touchup-form-clean input,
.touchup-form-clean select,
.touchup-form-clean textarea { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.touchup-form-clean textarea { min-height: 150px; resize: vertical; }
.touchup-button-row       { margin-top: 16px; }

.touchup-bottom-strip     { padding: 0 20px 90px; background: #fff; }
.touchup-bottom-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.touchup-bottom-item      { text-align: center; padding: 28px 20px; border-top: 1px solid #ddd; }
.touchup-bottom-item h3   { font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #222; }
.touchup-bottom-item p    { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.8; }


/* ============================================================
   14. Crop Tool Page
   ============================================================ */
.crop-clean-section       { padding: 80px 20px; background: #fff; }
.crop-clean-grid          { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.crop-clean-copy h2       { font-size: 38px; font-weight: 500; margin: 0 0 20px; color: #222; }
.crop-clean-copy p        { font-family: Arial, sans-serif; line-height: 1.9; color: #555; margin-bottom: 18px; }

.crop-clean-links         { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.crop-clean-links a       { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }

.crop-clean-panel         { background: #fafafa; padding: 28px; }
.crop-stage-clean         { position: relative; width: 100%; overflow: hidden; background: #eee; margin-bottom: 24px; }
.crop-stage-clean img     { width: 100%; height: 520px; object-fit: cover; display: block; user-select: none; }
.crop-box-clean           { position: absolute; left: 22%; top: 15%; width: 42%; height: 58%; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.25); cursor: move; }

.crop-controls-clean textarea,
.crop-controls-clean select { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.crop-controls-clean textarea { min-height: 130px; resize: vertical; }
.crop-button-row          { margin-top: 16px; }

.crop-info-strip          { padding: 0 20px 90px; background: #fff; }
.crop-info-grid           { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.crop-info-item           { text-align: center; padding: 28px 20px; border-top: 1px solid #ddd; }
.crop-info-item h3        { font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #222; }
.crop-info-item p         { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.8; }


/* ============================================================
   15. Cart Page
   ============================================================ */
.cart-clean-section       { padding: 80px 20px; background: #fff; }
.cart-clean-grid          { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.cart-items-wrap h2,
.cart-total-panel h2      { font-size: 34px; font-weight: 500; color: #222; margin: 0 0 24px; }

.cart-item-clean          { display: grid; grid-template-columns: 140px 1fr auto; gap: 22px; align-items: center; padding: 22px 0; border-top: 1px solid #ddd; }
.cart-item-clean:last-child { border-bottom: 1px solid #ddd; }
.cart-item-image img      { width: 140px; height: 140px; object-fit: cover; display: block; }
.cart-item-details h3     { margin: 0 0 10px; font-size: 24px; font-weight: 500; color: #222; }
.cart-item-details p      { margin: 0 0 8px; font-family: Arial, sans-serif; color: #555; line-height: 1.7; }
.cart-item-price          { font-family: Arial, sans-serif; font-size: 18px; color: #222; white-space: nowrap; }

.cart-item-controls       { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.cart-qty-wrap            { display: flex; flex-direction: column; gap: 6px; }
.cart-qty-wrap label      { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #666; margin: 0; }
.cart-qty-wrap select     { width: 90px; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 10px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.cart-remove-btn          { background: none; border: none; padding: 0; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; border-bottom: 1px solid #222; cursor: pointer; }
.cart-reset-btn           { margin-top: 18px; background: none; border: none; padding: 0; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; border-bottom: 1px solid #222; cursor: pointer; }

.cart-total-panel         { background: #fafafa; padding: 30px; }
.cart-total-row           { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #ddd; font-family: Arial, sans-serif; color: #555; }
.cart-total-row.total     { font-size: 18px; color: #222; font-weight: 700; }
.cart-action-buttons      { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.cart-helper-links        { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cart-helper-links a      { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }
.cart-note-strip          { padding: 0 20px 90px; background: #fff; }


/* ============================================================
   16. Checkout Page
   ============================================================ */
.checkout-clean-section   { padding: 80px 20px; background: #fff; }
.checkout-clean-grid      { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }

.checkout-form-wrap       { background: #fafafa; padding: 34px; }
.checkout-form-wrap h2,
.checkout-summary-panel h2 { font-size: 34px; font-weight: 500; color: #222; margin: 0 0 24px; }
.checkout-subhead         { margin-top: 32px !important; }

.checkout-form-clean input,
.checkout-form-clean select { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.checkout-button-row      { margin-top: 18px; }

.checkout-summary-panel   { background: #fafafa; padding: 30px; }
.checkout-summary-item    { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #ddd; font-family: Arial, sans-serif; color: #555; }
.checkout-summary-item.total { font-size: 18px; font-weight: 700; color: #222; }
.checkout-helper-copy     { margin-top: 24px; }
.checkout-helper-copy p   { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.8; }
.checkout-side-links      { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.checkout-side-links a    { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }


/* ============================================================
   17. Order Confirmation Page
   ============================================================ */
.confirmation-clean-section  { padding: 80px 20px 100px; background: #fff; }
.confirmation-clean-wrap     { max-width: 900px; margin: 0 auto; text-align: center; }

.confirmation-badge          { display: inline-block; padding: 8px 16px; border: 1px solid #222; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; margin-bottom: 24px; }
.confirmation-clean-wrap h2  { font-size: 42px; font-weight: 500; color: #222; margin: 0 0 18px; }
.confirmation-lead           { max-width: 720px; margin: 0 auto 36px; font-family: Arial, sans-serif; line-height: 1.9; color: #555; }

.confirmation-info-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.confirmation-info-card      { padding: 28px 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.confirmation-info-card h3   { margin: 0 0 12px; font-size: 22px; font-weight: 500; color: #222; }
.confirmation-info-card p    { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.7; }

.confirmation-summary-box    { max-width: 760px; margin: 0 auto 34px; padding: 30px; background: #fafafa; text-align: left; }
.confirmation-summary-box h3 { margin: 0 0 14px; font-size: 28px; font-weight: 500; color: #222; }
.confirmation-summary-box p  { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.9; }

.confirmation-action-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.confirmation-helper-links   { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.confirmation-helper-links a { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }


/* ============================================================
   18. Client Portal Page
   ============================================================ */
.portal-clean-section     { padding: 80px 20px; background: #fff; }
.portal-clean-grid        { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }

.portal-signin-wrap,
.portal-gallery-wrap      { background: #fafafa; padding: 32px; }
.portal-signin-wrap h2,
.portal-gallery-wrap h2   { font-size: 34px; font-weight: 500; color: #222; margin: 0 0 20px; }
.portal-copy              { font-family: Arial, sans-serif; line-height: 1.8; color: #555; margin-bottom: 22px; }

.portal-signin-form input { width: 100%; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 0; padding: 14px 12px; font-family: Arial, sans-serif; font-size: 14px; }
.portal-button-row        { margin-top: 16px; }

.portal-album-list        { display: flex; flex-direction: column; gap: 18px; }
.portal-album-item        { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; text-decoration: none; color: #222; padding-bottom: 18px; border-bottom: 1px solid #ddd; }
.portal-album-item img    { width: 120px; height: 120px; object-fit: cover; display: block; }
.portal-album-text h3     { margin: 0 0 8px; font-size: 24px; font-weight: 500; color: #222; }
.portal-album-text p      { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.7; }

.portal-links-clean       { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.portal-links-clean a     { width: fit-content; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #222; text-decoration: none; border-bottom: 1px solid #222; }

.portal-info-strip        { padding: 0 20px 90px; background: #fff; }
.portal-info-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.portal-info-item         { text-align: center; padding: 28px 20px; border-top: 1px solid #ddd; }
.portal-info-item h3      { font-size: 24px; font-weight: 500; margin: 0 0 12px; color: #222; }
.portal-info-item p       { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.8; }


/* ============================================================
   19. FAQ Page
   ============================================================ */
.faq-clean-section        { padding: 80px 20px 100px; background: #fff; }
.faq-clean-wrap           { max-width: 950px; margin: 0 auto; }

.faq-intro                { text-align: center; margin-bottom: 40px; }
.faq-intro h2             { font-size: 38px; font-weight: 500; color: #222; margin: 0 0 18px; }
.faq-intro p              { max-width: 720px; margin: 0 auto; font-family: Arial, sans-serif; color: #555; line-height: 1.9; }

.faq-list-clean           { display: flex; flex-direction: column; gap: 0; }
.faq-item-clean           { padding: 28px 0; border-top: 1px solid #ddd; }
.faq-item-clean:last-child { border-bottom: 1px solid #ddd; }
.faq-item-clean h3        { margin: 0 0 12px; font-size: 26px; font-weight: 500; color: #222; }
.faq-item-clean p         { margin: 0; font-family: Arial, sans-serif; color: #555; line-height: 1.9; }

.faq-links-clean          { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }


/* ============================================================
   20. Footer
   ============================================================ */
.footer         { margin-top: 26px; border-top: 1px solid var(--border); padding: 20px 0; color: var(--muted); }
.footer a       { text-decoration: underline; text-decoration-color: rgba(255,255,255,.15); }

.site-footer    { background: #111; color: #ddd; padding: 60px 20px 30px; }
.footer-grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-col h3,
.footer-col h4  { margin: 0 0 14px; color: #fff; font-weight: 600; }
.footer-col p   { margin: 0 0 10px; font-family: Arial, sans-serif; line-height: 1.7; }
.footer-col a   { display: block; margin-bottom: 8px; font-family: Arial, sans-serif; text-decoration: none; color: #bbb; }
.footer-col a:hover { color: #fff; }
.footer-bottom  { border-top: 1px solid #333; margin-top: 40px; padding-top: 20px; text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #aaa; }


/* ============================================================
   21. Toast & Chat
   ============================================================ */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 100;
  background: rgba(18, 26, 42, .92); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px; border-radius: 999px;
  box-shadow: var(--shadow); display: none;
}

.chatLauncher { position: fixed; right: 18px; bottom: 18px; z-index: 90; }
.chatPanel    { position: fixed; right: 18px; bottom: 74px; z-index: 91; width: 320px; max-width: calc(100vw - 36px); border: 1px solid var(--border); border-radius: 18px; background: rgba(18,26,42,.95); box-shadow: var(--shadow); display: none; overflow: hidden; }
.chatHeader   { padding: 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.chatBody     { padding: 12px; max-height: 260px; overflow: auto; color: var(--muted); font-size: 13px; }
.bubble       { padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; margin: 8px 0; background: rgba(255,255,255,.04); }
.bubble.me    { border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.12); color: var(--text); }
.chatForm     { padding: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chatForm input { border-radius: 999px; }

/* Shared clean layout helpers for Book / Packages */
.section-clean {
  padding: 80px 20px;
  background: #fff;
}

.panel-light {
  background: #fafafa;
  padding: 32px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.clean-copy h2 {
  font-size: 38px;
  font-weight: 500;
  margin: 0 0 20px;
  color: #222;
}

.clean-copy p {
  font-family: Arial, sans-serif;
  line-height: 1.9;
  color: #555;
  margin-bottom: 18px;
}

.clean-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.clean-links a {
  width: fit-content;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #222;
}

/* ============================================================
   22. Responsive Overrides
   ============================================================ */
@media (max-width: 980px) {
  .heroInner              { grid-template-columns: 1fr; }
  .grid.cards             { grid-template-columns: repeat(2, 1fr); }
  .grid.photos            { grid-template-columns: repeat(2, 1fr); }
  .cropWrap               { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Navigation */
  .nav-minimal            { flex-direction: column; gap: 12px; }
  .minimal-nav            { flex-wrap: wrap; justify-content: center; gap: 14px; }

  /* Heroes */
  .hero-content h1        { font-size: 44px; }
  .page-hero-content h1   { font-size: 42px; }

  /* Grids */
  .featured-grid          { grid-template-columns: repeat(2, 1fr); }
  .gallery-clean-grid     { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid         { grid-template-columns: 1fr; }
  .about-clean-grid       { grid-template-columns: 1fr; }
  .values-grid            { grid-template-columns: 1fr; }

    .grid-2 {
    grid-template-columns: 1fr;
  }

  .panel-light {
    padding: 24px;
  }
  
  /* Images */
  .portfolio-card img,
  .about-clean-image img  { height: 420px; }

  /* Photo detail */
  .photo-detail-grid      { grid-template-columns: 1fr; }
  .photo-main-display img { height: 500px; }
  .form-row-clean         { grid-template-columns: 1fr; }

  /* Support / Touchup / Crop */
  .support-clean-grid,
  .support-info-grid      { grid-template-columns: 1fr; }
  .support-form-wrap      { padding: 24px; }
  .touchup-clean-grid,
  .touchup-bottom-grid    { grid-template-columns: 1fr; }
  .touchup-form-wrap      { padding: 24px; }
  .crop-clean-grid,
  .crop-info-grid         { grid-template-columns: 1fr; }
  .crop-clean-panel       { padding: 24px; }
  .crop-stage-clean img   { height: 420px; }

  /* Cart / Checkout */
  .cart-clean-grid        { grid-template-columns: 1fr; }
  .cart-item-clean        { grid-template-columns: 1fr; }
  .cart-item-image img    { width: 100%; height: 300px; }
  .checkout-clean-grid    { grid-template-columns: 1fr; }
  .checkout-form-wrap,
  .checkout-summary-panel { padding: 24px; }

  /* Confirmation */
  .confirmation-info-grid { grid-template-columns: 1fr; }
  .confirmation-clean-wrap h2 { font-size: 34px; }
  .confirmation-summary-box   { padding: 24px; }

  /* Portal */
  .portal-clean-grid,
  .portal-info-grid       { grid-template-columns: 1fr; }
  .portal-signin-wrap,
  .portal-gallery-wrap    { padding: 24px; }
  .portal-album-item      { grid-template-columns: 1fr; }
  .portal-album-item img  { width: 100%; height: 260px; }

  /* FAQ */
  .faq-intro h2           { font-size: 32px; }
  .faq-item-clean h3      { font-size: 22px; }

  /* Footer */
  .footer-grid            { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .grid.cards             { grid-template-columns: 1fr; }
}