/* 貓朵金工 官網功能外掛：前台樣式。
   顏色一律使用主題 theme.json 的 CSS 變數，換主題時只需補上同名變數。 */

.md-work-cta h3{ margin:0 0 1em; }
.md-work-cta-buttons{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:1.6em; }

.md-links{ display:grid; gap:12px; max-width:32em; margin:2em auto; }
.md-links-item{
  display:block; text-align:center; padding:1.15em 1.4em;
  border:1px solid var(--wp--preset--color--line, #E2DACB);
  color:var(--wp--preset--color--ink, #1A1714);
  font-size:.9rem; letter-spacing:.12em; transition:.35s cubic-bezier(.22,.61,.36,1);
}
.md-links-item:hover{
  background:var(--wp--preset--color--ink, #1A1714);
  color:var(--wp--preset--color--paper, #FAF7F1);
  border-color:var(--wp--preset--color--ink, #1A1714);
}

/* 後台商品面板：讓 textarea 高一點 */
#maoduo_product_data textarea,
#maoduo_course_data textarea{ height:5em; }

/* ============================================================
   課程預約彈窗
   ============================================================
   色彩、圓角與字體都取自佈景主題的 CSS 變數；主題若沒載入
   （例如被換掉），fallback 值會讓彈窗仍然可讀可用。
   ============================================================ */
:root{
  --mdb-paper: var(--wp--preset--color--paper, #FAF7F1);
  --mdb-paper2:var(--wp--preset--color--paper-2, #F2EDE4);
  --mdb-ink:   var(--wp--preset--color--ink, #1A1714);
  --mdb-ink2:  var(--wp--preset--color--ink-2, #3B342B);
  --mdb-muted: var(--wp--preset--color--muted, #6E655A);
  --mdb-line:  var(--wp--preset--color--line, #E4DCCD);
  --mdb-brass: var(--wp--preset--color--brass, #9C7A33);
  --mdb-err:   #B4552F;
  --mdb-r:     var(--wp--custom--radius--md, 18px);
  --mdb-pill:  var(--wp--custom--radius--pill, 999px);
}

html.md-book-open{ overflow:hidden; }

.md-book{ position:fixed; inset:0; z-index:9999; display:flex; }
.md-book[hidden]{ display:none; }
.md-book-backdrop{
  position:absolute; inset:0; background:rgba(16,14,12,.55);
  animation:mdb-fade .25s ease;
}
@keyframes mdb-fade{ from{opacity:0} to{opacity:1} }

.md-book-panel{
  position:relative; z-index:1;
  margin:auto; width:min(520px, calc(100vw - 32px));
  max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--mdb-paper); border-radius:var(--mdb-r);
  padding:clamp(24px,3vw,36px);
  box-shadow:0 30px 80px rgba(16,14,12,.28);
  animation:mdb-rise .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes mdb-rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

.md-book-x{
  position:absolute; top:14px; right:14px;
  background:none; border:0; cursor:pointer; color:var(--mdb-muted);
  padding:6px; line-height:0; border-radius:var(--mdb-pill);
}
.md-book-x:hover{ color:var(--mdb-ink); background:var(--mdb-paper2); }

.md-book-title{ font-size:1.14rem; font-weight:400; letter-spacing:.06em; margin:0 0 .4em; color:var(--mdb-ink); }
.md-book-sub{ font-size:.82rem; color:var(--mdb-muted); margin:0 0 1.8em; line-height:1.9; }

.md-book-field{ margin-bottom:1.3em; }
.md-book-field label{
  display:block; font-size:.78rem; letter-spacing:.1em; color:var(--mdb-ink2); margin-bottom:.6em;
}
.md-book-field input,
.md-book-field select,
.md-book-field textarea,
.md-book-cal input[type="date"]{
  width:100%; box-sizing:border-box;
  padding:.85em 1.1em; font-size:.9rem; font-family:inherit; color:var(--mdb-ink);
  background:#fff; border:1px solid var(--mdb-line); border-radius:10px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.md-book-field textarea{ resize:vertical; min-height:88px; }
.md-book-field input:focus,
.md-book-field select:focus,
.md-book-field textarea:focus,
.md-book-cal input[type="date"]:focus{
  outline:none; border-color:var(--mdb-brass); box-shadow:0 0 0 3px rgba(156,122,51,.14);
}
.md-book-field input.has-error,
.md-book-cal input.has-error{ border-color:var(--mdb-err); }

.md-book-err{ color:var(--mdb-err); font-size:.78rem; margin:.55em 0 0; }
.md-book-err[hidden]{ display:none; }
.md-book-hint{ color:var(--mdb-muted); font-size:.75rem; margin:.55em 0 0; }
.md-book-hint:empty{ display:none; }
.md-req{ color:var(--mdb-err); }

.md-hp{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

/* 月曆 */
.md-book-cal{
  border:1px solid var(--mdb-line); border-radius:var(--mdb-r);
  padding:clamp(16px,2vw,22px); margin-bottom:1.3em; background:#fff;
}
.md-book-cal-title{
  display:flex; align-items:center; gap:.6em;
  font-size:.85rem; letter-spacing:.06em; color:var(--mdb-ink); margin:0 0 1.2em;
}
.md-book-cal-icon{
  width:17px; height:17px; flex:0 0 17px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E655A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E");
}
/* 月曆顯示時，原生日期欄位收起來（仍在表單裡，送出的就是它） */
.md-book-cal .md-book-cal-body:not([hidden]) ~ input[type="date"]{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

.md-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1em; }
.md-cal-label{ font-size:.92rem; letter-spacing:.06em; color:var(--mdb-ink); }
.md-cal-nav{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--mdb-line); border-radius:var(--mdb-pill);
  color:var(--mdb-ink2); cursor:pointer; transition:.3s ease;
}
.md-cal-nav:hover{ border-color:var(--mdb-ink); color:var(--mdb-ink); }

.md-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.md-cal-wd{
  text-align:center; font-size:.72rem; letter-spacing:.06em; color:var(--mdb-muted);
  padding:.6em 0 .9em;
}
.md-cal-pad{ display:block; }
.md-cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--mdb-pill); cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--mdb-ink);
  transition:background .2s ease, color .2s ease;
}
.md-cal-day:hover:not(:disabled){ background:var(--mdb-paper2); }
.md-cal-day:disabled{ color:#C9C1B4; cursor:default; }
.md-cal-day.is-chosen{ background:var(--mdb-ink); color:var(--mdb-paper); }

.md-book-foot{ display:flex; justify-content:flex-end; margin-top:1.8em; }
.md-book-foot .md-submit{ min-width:150px; }

/* 送出後的提示：跟著頁面內容走，不在彈窗裡 */
.md-book-flash{
  max-width:760px; margin:0 auto clamp(20px,3vw,34px);
  padding:1.1em 1.5em; font-size:.86rem; line-height:2; border-radius:10px;
}
.md-book-flash.is-ok{ background:var(--mdb-paper2); border-left:2px solid var(--mdb-brass); color:var(--mdb-ink2); }
.md-book-flash.is-error{ background:#FBEFE9; border-left:2px solid var(--mdb-err); color:#7A3320; }

@media(max-width:560px){
  .md-book-panel{ margin:0; width:100%; max-height:100vh; border-radius:0; }
  .md-book{ align-items:stretch; }
}
@media (prefers-reduced-motion: reduce){
  .md-book-panel,.md-book-backdrop{ animation:none; }
}