/* EN-248 — OUR widgets inside the user's real themes: the EN-234 visit calendar
   («شوفيه في الأتيليه») and the share button. The delivered themes know nothing
   about them, and their source stays untouched (D-042) — so the markup ships
   with the platform and the styling lives here, written entirely in the themes'
   OWN design tokens (--accent/--line/--panel/--sub/--radius…). One file, all
   nine themes: each one restyles it automatically. */

.vc { max-width: 420px; margin: 16px 0; }
.vc-loading { color: var(--sub); font-size: 12.5px; }
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vc-title { font-family: var(--font-head); font-size: 17px; }
.vc-nav { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); width: 32px; height: 32px; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink); }
.vc-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vc-nav:disabled { opacity: .35; cursor: default; }
.vc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vc-dow { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--sub); padding: 4px 0; }
.vc-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.vc-day:hover:not(.is-off) { border-color: var(--accent); }
.vc-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.vc-day.is-off { opacity: .4; cursor: default; border-style: dashed; background: transparent; }
.vc-day.is-busy { text-decoration: line-through; background: var(--bg); }
.vc-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); margin: 12px 0 0; }
.vc-key { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--accent); display: inline-block; }
.vc-key.is-busy { border-color: var(--line); background: var(--bg); }
.vc-note { margin-top: 10px; font-size: 12.5px; color: var(--sub); }
.vc-form { margin-top: 16px; }

/* B-086 — the monogram panel that stands in for a photo the atelier hasn't
   uploaded: it keeps the theme's photo-led layout intact (the block used to
   disappear, which changed the whole design) without ever showing a stock
   image. Drawn entirely in the theme's own tokens, so each of the nine themes
   styles it automatically. */
.coco-mono {
  display: flex; align-items: center; justify-content: center;
  border: var(--media-border); border-radius: var(--media-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--panel);
  overflow: hidden;
}
.coco-mono__letter {
  font-family: var(--font-head); font-size: clamp(64px, 12vw, 148px);
  line-height: 1; color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* the sent-confirmation banner both forms show (session flash) */
.coco-sent { background: var(--panel); border: 1px solid var(--ok); color: var(--ok); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; font-size: 13.5px; }

/* EN-252 / D-225 — a stock placeholder photo standing in a DECORATIVE slot the
   atelier hasn't filled yet (hero, collection cards, the atelier photo, branch
   cards). It must look like the theme's own imagery, so it takes the theme's own
   media frame — nothing dims it and nothing labels it on the public site. A real
   gown card and a testimonial face never get one (see App\Site\SiteStock). */
.coco-stock {
  display: block;
  border: var(--media-border); border-radius: var(--media-radius);
  object-fit: cover;
}
/* full-bleed grounds (noir-atelier's hero) frame themselves — no border there */
.hero-section__bg.coco-stock { border: 0; border-radius: 0; }

/* EN-278 — the atelier-photos grid on the about page: the PLACE itself
   (reception, fitting room), shown ONLY when real photos exist (D-235 — no
   stock, no monogram: a credibility section is real or absent). Tokens only,
   so each theme dresses it itself. */
.coco-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.coco-photos__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: var(--media-border); border-radius: var(--media-radius);
  background: var(--panel);
}
@media (max-width: 760px) { .coco-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; } }