/* Skippix Calendar Builder. Override the variables in your theme or Elementor Custom CSS. */
.skpcal {
  --skpcal-accent: #1d1d1f;
  --skpcal-accent-ink: #fff;
  --skpcal-line: #d9d9de;
  --skpcal-muted: #6e6e73;
  --skpcal-tile: #f3f3f5;
  --skpcal-radius: 6px;
  --skpcal-thumb: 140px;
  font: inherit;
  color: inherit;
}
.skpcal *, .skpcal *::before, .skpcal *::after { box-sizing: border-box; }
.skpcal [hidden] { display: none !important; }

/* Neutralise theme/Elementor button styles inside the builder. */
.skpcal .skpcal__thumb,
.skpcal .skpcal__slot,
.skpcal .skpcal__link {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}
.skpcal .skpcal__thumb:focus-visible,
.skpcal .skpcal__slot:focus-visible,
.skpcal .skpcal__link:focus-visible,
.skpcal .skpcal__remove:focus-visible { outline: 2px solid var(--skpcal-accent); outline-offset: 2px; }

.skpcal__layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .skpcal__layout { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); align-items: start; }
  .skpcal__cal { position: sticky; top: 1rem; }
}
.skpcal__h { margin: 0 0 .25rem; }
.skpcal__hint { margin: 0 0 1rem; color: var(--skpcal-muted); font-size: .9em; }

/* Gallery */
.skpcal__gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--skpcal-thumb), 30%), 1fr));
}
.skpcal__gallery li { margin: 0; padding: 0; }
.skpcal .skpcal__thumb {
  display: block; position: relative; width: 100%; aspect-ratio: 1;
  background: var(--skpcal-tile); border-radius: var(--skpcal-radius); overflow: hidden;
}
.skpcal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s, transform .15s; }
.skpcal__thumb:hover img { transform: scale(1.03); }
.skpcal__thumb.is-used img { opacity: .35; }
.skpcal__badge {
  position: absolute; top: .35rem; left: .35rem;
  background: var(--skpcal-accent); color: var(--skpcal-accent-ink);
  font-size: .75rem; font-weight: 600; line-height: 1; padding: .3em .5em; border-radius: 999px;
}
.skpcal__badge:empty { display: none; }

/* Jump-to-send button: inherits the theme's button style, like "Send my calendar". */
.skpcal .skpcal__tosend { display: block; width: 100%; margin-top: 1rem; }

/* "View larger" icon on each gallery thumbnail */
.skpcal__gallery li { position: relative; }
.skpcal .skpcal__zoom {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; right: .35rem; bottom: .35rem; width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
}
.skpcal .skpcal__zoom:hover { background: rgba(0,0,0,.85); }
/* On calendar slots: small, bottom-left, only when the slot has a photo (label sits below the frame) */
.skpcal .skpcal__zoom--slot { display: none; right: auto; left: .25rem; bottom: 1.45rem; width: 1.6rem; height: 1.6rem; }
.skpcal .skpcal__zoom--slot svg { width: 14px; height: 14px; }
.skpcal__slots li.is-filled .skpcal__zoom--slot { display: flex; }
.skpcal .skpcal__zoom:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Large preview (lives on <body>, outside .skpcal) */
html.skpcal-lb-open { overflow: hidden; }
.skpcal-lb {
  position: fixed; inset: 0; z-index: 100000; background: rgba(10,10,12,.94); color: #fff;
  display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; grid-template-rows: 1fr auto; align-items: center;
}
.skpcal-lb[hidden] { display: none; }
.skpcal-lb__fig { grid-column: 2; grid-row: 1; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 3rem 0 1rem; box-sizing: border-box; min-height: 0; }
.skpcal-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.5); transition: filter .2s; }
.skpcal-lb__img.is-loading { filter: blur(3px); min-width: min(60vw, 900px); }
.skpcal-lb button { font: inherit; cursor: pointer; }
.skpcal-lb__close { position: absolute; top: .75rem; right: 1rem; background: none; border: 0; color: #fff; font-size: 2.25rem !important; line-height: 1; padding: .25rem .5rem; }
.skpcal-lb__nav { grid-row: 1; background: none; border: 0; color: #fff; font-size: 3rem !important; line-height: 1; padding: 1rem .5rem; opacity: .75; }
.skpcal-lb__nav:hover { opacity: 1; }
.skpcal-lb__prev { grid-column: 1; }
.skpcal-lb__next { grid-column: 3; }
.skpcal-lb__nav[hidden] { visibility: hidden; display: block; }
.skpcal-lb__bar { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; padding: .75rem 1rem 1.25rem; font-size: .95rem; }
.skpcal-lb__count { opacity: .7; }
.skpcal-lb__state { font-weight: 600; }
.skpcal-lb__action { background: #fff; color: #111; border: 0; border-radius: 999px; padding: .6em 1.4em; font-weight: 600; }
.skpcal-lb__action:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) {
  .skpcal-lb { grid-template-columns: 2.25rem 1fr 2.25rem; }
  .skpcal-lb__nav { font-size: 2.25rem !important; padding: .5rem .25rem; }
}

/* Filename above the preview image (download picker) */
.skpcal-lb.has-caption .skpcal-lb__fig { flex-direction: column; gap: .6rem; }
.skpcal-lb.has-caption .skpcal-lb__img { max-height: calc(100% - 2.2rem); }
.skpcal-lb__caption { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; color: #e8e8ea; text-align: center; word-break: break-all; }

/* Bulk download picker */
.skpdl .skpcal__thumb.is-picked { box-shadow: inset 0 0 0 4px var(--skpcal-accent); }
.skpdl .skpcal__thumb.is-picked img { opacity: .8; }
.skpdl.is-full .skpcal__thumb:not(.is-picked) img { opacity: .45; }
.skpdl__count { font-weight: 600; margin: 0 0 .5rem; }
.skpdl__tray { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; max-height: 60vh; overflow: auto; }
.skpdl__tray li { display: grid; grid-template-columns: 48px 1fr auto auto; gap: .5rem; align-items: center; margin: 0; }
.skpcal .skpdl__zoom { position: static; width: 1.6rem; height: 1.6rem; }
.skpcal .skpdl__zoom svg { width: 14px; height: 14px; }
.skpdl__tray img { width: 48px; height: 48px; object-fit: cover; border-radius: 3px; display: block; }
.skpdl__name { font-size: .85rem; word-break: break-all; }
.skpcal .skpdl__remove { all: unset; cursor: pointer; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; border-radius: 50%; background: var(--skpcal-tile); }
.skpdl__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.skpdl__download:disabled { opacity: .5; cursor: default; }

/* Editors: shortcode generator */
.skpcal .skpcal__admin { font-size: .85em; }
.skpcal__scout { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }

/* Slots */
.skpcal__slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.skpcal__slots li { position: relative; margin: 0; padding: 0; }
.skpcal__slots li.is-cover { grid-column: 1 / -1; }
.skpcal .skpcal__slot { display: block; width: 100%; }
.skpcal__frame {
  display: flex; align-items: center; justify-content: center; position: relative;
  aspect-ratio: 4 / 3; border: 1.5px dashed var(--skpcal-line); border-radius: var(--skpcal-radius);
  background: var(--skpcal-tile); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.is-cover .skpcal__frame { aspect-ratio: 16 / 9; }
.skpcal__frame img { width: 100%; height: 100%; object-fit: contain; display: none; }
.is-filled .skpcal__frame { border-style: solid; }
.is-filled .skpcal__frame img { display: block; }
.is-filled .skpcal__empty { display: none; }
.skpcal__empty { font-size: 1.5rem; color: var(--skpcal-muted); }
.skpcal__label { display: block; font-size: .8rem; margin-top: .2rem; text-align: center; }
.is-active .skpcal__frame { border: 2px solid var(--skpcal-accent); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.skpcal__slot.is-over .skpcal__frame { border-color: var(--skpcal-accent); background: #e9e9ee; }
.is-flash .skpcal__frame { animation: skpcal-flash .6s ease 2; }
@keyframes skpcal-flash { 50% { border-color: var(--skpcal-accent); box-shadow: 0 0 0 4px rgba(0,0,0,.15); } }

.skpcal__remove {
  position: absolute; top: .25rem; right: .25rem; display: none;
  width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 1rem; cursor: pointer;
}
.is-filled .skpcal__remove { display: block; }

.skpcal__tools { margin: .5rem 0 0; text-align: right; }
.skpcal .skpcal__link { color: var(--skpcal-muted); text-decoration: underline; font-size: .85rem; }

/* Progress bar: sticky at the bottom on small screens */
.skpcal__bar {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  margin: 1.5rem 0 0; padding: .6rem .9rem; border-radius: var(--skpcal-radius);
  background: var(--skpcal-accent); color: var(--skpcal-accent-ink); font-size: .9rem;
}
.skpcal__bar .skpcal__link { color: inherit; }
.skpcal__count { font-weight: 600; }
@media (max-width: 899px) {
  .skpcal__bar { position: sticky; bottom: .5rem; z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
}
@media (min-width: 900px) { .skpcal__bar .skpcal__link { display: none; } }

/* Form */
.skpcal__form { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 600px) { .skpcal__form { grid-template-columns: 1fr 1fr; } .skpcal__wide { grid-column: 1 / -1; } }
.skpcal__form label { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.skpcal__form label > span { font-size: .85rem; font-weight: 600; }
.skpcal__form input, .skpcal__form textarea { width: 100%; }
.skpcal__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.skpcal__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.skpcal__need { margin: 0; color: var(--skpcal-muted); font-size: .9rem; }
.skpcal:not(.is-complete) .skpcal__submit { opacity: .55; }
.skpcal__status { min-height: 1.5em; margin: .75rem 0 0; font-weight: 600; }
.skpcal__done { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--skpcal-line); border-radius: var(--skpcal-radius); }
.skpcal__done p { margin: .25rem 0 1rem; }
.skpcal__anchor { height: 0; }
.skpcal__done-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.skpcal__colpick { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.skpcal__colpick > span { font-size: .85rem; font-weight: 600; }
.skpcal__colpick select { max-width: 100%; }
.skpcal__form--cart select { width: 100%; }
.skpcal__form--cart .skpcal__h { margin-bottom: 0; }
.skpcal__price { margin: 0; font-weight: 600; min-width: 5em; }
/* After sending: selections stay visible but locked until "Start a new calendar". */
.skpcal.is-sent .skpcal__layout { opacity: .5; pointer-events: none; transition: opacity .3s; }
.skpcal.is-sent .skpcal__bar .skpcal__link { display: none; }