@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');

.amc-root, .amc-root * { box-sizing: border-box; }

.amc-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px;
  overflow-x: clip;
  min-width: 0;
  box-sizing: border-box;
}

.amc-wrap .amc-root {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

.amc-root {
  --amc-pink:#ff4d6d;
  --amc-hot:#ff2e63;
  --amc-ink:#2b2b36;

  display: block;
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  margin: 30px auto;
  padding: 18px 16px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-width: 0;
  box-sizing: border-box;
}

.amc-bg{
  position:absolute;
  inset:0;
  border-radius: 22px;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255,77,109,.30), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(255,122,162,.26), transparent 60%),
    linear-gradient(180deg, rgba(255,240,246,1) 0%, rgba(255,247,251,1) 40%, rgba(255,255,255,1) 100%);
}

.amc-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 77, 109, 0.22);
  border-radius: 20px;
  padding: 30px 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  text-align: center;
  overflow: hidden;
  overflow-x: clip;
  min-width: 0;
}

.amc-media {
  margin: 0 auto 14px;
  border-radius: 16px;
  overflow: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  line-height: 0;
}

.amc-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  vertical-align: middle;
}

.amc-media.amc-video {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.amc-video-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* Force video to never exceed container – overrides intrinsic size */
.amc-video-inner video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  min-width: 0;
  object-fit: contain;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Extra clamp so video never causes horizontal scroll */
.amc-root .amc-media.amc-video {
  max-width: 100%;
}
.amc-root .amc-video-inner {
  max-width: 100%;
}
.amc-root .amc-video-inner video {
  max-width: 100% !important;
}

.amc-kicker{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.02em;
  color: rgba(43,43,54,.74);
}

.amc-title{
  margin:0 0 10px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.8vw, 24px);
  line-height: 1.25;
  color: var(--amc-ink);
}

.amc-subtitle{
  margin:0 0 16px;
  opacity:.85;
}

.amc-grid{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
}

.amc-row{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 16px;
  width: min(560px, 95%);
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,77,109,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.amc-label{
  font-weight: 800;
  color: var(--amc-hot);
  text-transform: lowercase;
}

.amc-num{
  font-weight: 900;
  color: var(--amc-hot);
  font-size: 28px;
  min-width: 120px;
  text-align:right;
}

.amc-footer{
  margin: 14px 0 0;
  font-weight: 800;
  opacity: .85;
}

/* ---- Theme: Christmas ---- */
.amc-theme-christmas .amc-bg {
  background:
    radial-gradient(800px 500px at 50% -20%, rgba(200, 50, 50, .25), transparent 50%),
    radial-gradient(600px 400px at 90% 80%, rgba(30, 100, 50, .2), transparent 50%),
    linear-gradient(180deg, #fef8f8 0%, #f0fdf4 40%, #fff 100%) !important;
}
.amc-theme-christmas .amc-card {
  border-color: rgba(180, 50, 50, .3) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.08), 0 0 0 1px rgba(30, 100, 50, .1) !important;
}
.amc-theme-christmas .amc-label,
.amc-theme-christmas .amc-num { color: #b91c1c !important; }
.amc-theme-christmas .amc-row {
  border-color: rgba(180, 50, 50, .15) !important;
  background: rgba(255, 255, 255, .85) !important;
}

/* ---- Theme: Birthday ---- */
.amc-theme-birthday .amc-bg {
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255, 200, 100, .35), transparent 55%),
    radial-gradient(700px 500px at 80% 70%, rgba(255, 105, 180, .25), transparent 55%),
    linear-gradient(180deg, #fffbf5 0%, #fff5f8 50%, #fff 100%) !important;
}
.amc-theme-birthday .amc-card {
  border-color: rgba(255, 150, 80, .3) !important;
  box-shadow: 0 18px 60px rgba(255, 150, 80, .12) !important;
}
.amc-theme-birthday .amc-label,
.amc-theme-birthday .amc-num { color: #c2410c !important; }
.amc-theme-birthday .amc-row {
  border-color: rgba(255, 150, 80, .2) !important;
  background: rgba(255, 255, 255, .85) !important;
}

/* ---- Theme: Beach ---- */
.amc-theme-beach .amc-bg {
  background:
    radial-gradient(1000px 600px at 30% -10%, rgba(100, 180, 220, .4), transparent 55%),
    radial-gradient(800px 500px at 90% 60%, rgba(245, 220, 180, .35), transparent 55%),
    linear-gradient(180deg, #f0f9ff 0%, #fefce8 40%, #fff 100%) !important;
}
.amc-theme-beach .amc-card {
  border-color: rgba(56, 149, 211, .25) !important;
  box-shadow: 0 18px 60px rgba(56, 149, 211, .1) !important;
}
.amc-theme-beach .amc-label,
.amc-theme-beach .amc-num { color: #0369a1 !important; }
.amc-theme-beach .amc-row {
  border-color: rgba(56, 149, 211, .18) !important;
  background: rgba(255, 255, 255, .85) !important;
}

/* ---- Theme: Halloween ---- */
.amc-theme-halloween .amc-bg {
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(230, 130, 30, .35), transparent 55%),
    radial-gradient(700px 500px at 85% 70%, rgba(40, 40, 50, .2), transparent 55%),
    linear-gradient(180deg, #fff8f0 0%, #f5f5f8 50%, #fff 100%) !important;
}
.amc-theme-halloween .amc-card {
  border-color: rgba(180, 80, 20, .35) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .12) !important;
}
.amc-theme-halloween .amc-label,
.amc-theme-halloween .amc-num { color: #c2410c !important; }
.amc-theme-halloween .amc-row {
  border-color: rgba(180, 80, 20, .2) !important;
  background: rgba(255, 250, 245, .9) !important;
}

/* ---- Theme: Romantic ---- */
.amc-theme-romantic .amc-bg {
  background:
    radial-gradient(1000px 600px at 15% -5%, rgba(220, 50, 90, .35), transparent 55%),
    radial-gradient(800px 500px at 95% 50%, rgba(255, 120, 150, .28), transparent 55%),
    linear-gradient(180deg, #fff5f8 0%, #ffe4ec 40%, #fff 100%) !important;
}
.amc-theme-romantic .amc-card {
  border-color: rgba(190, 40, 80, .3) !important;
  box-shadow: 0 18px 60px rgba(190, 40, 80, .12) !important;
}
.amc-theme-romantic .amc-label,
.amc-theme-romantic .amc-num { color: #be185d !important; }
.amc-theme-romantic .amc-row {
  border-color: rgba(190, 40, 80, .2) !important;
  background: rgba(255, 255, 255, .85) !important;
}

@media (prefers-reduced-motion: reduce){
  .amc-root *{ transition:none !important; animation:none !important; }
}