/*
  Liquid Motion layer
  - strengthens the glass treatment
  - uses dedicated CCM liquid variables for card, groups, buttons and FAB
*/

.ccm-modal .ccm-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.48), transparent 34%),
    radial-gradient(circle at bottom left, rgba(255,214,183,.24), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,244,236,.12)),
    var(--ccm-lm-card-bg) !important;
  border:1px solid var(--ccm-lm-card-border) !important;
  backdrop-filter: blur(var(--ccm-lm-blur)) saturate(165%) !important;
  -webkit-backdrop-filter: blur(var(--ccm-lm-blur)) saturate(165%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 30px 70px rgba(58,30,16,.18) !important;
  animation: ccmLiquidFade .6s ease both;
}

.ccm-modal .ccm-card::before{
  content:"";
  position:absolute;
  inset:-10% auto auto -8%;
  width:42%;
  height:42%;
  background:radial-gradient(circle, rgba(255,255,255,.24), transparent 68%);
  pointer-events:none;
}

.ccm-modal .ccm-card::after{
  content:"";
  position:absolute;
  right:-8%;
  bottom:-16%;
  width:32%;
  height:36%;
  background:radial-gradient(circle, rgba(255,188,146,.16), transparent 72%);
  pointer-events:none;
}

.ccm-header{
  border-bottom-color:rgba(255,255,255,.24) !important;
}

.ccm-acc summary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,247,241,.1)),
    var(--ccm-lm-acc-bg) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    0 10px 24px rgba(95,58,38,.07);
}

.ccm-acc[open] summary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,248,242,.16)),
    var(--ccm-lm-acc-bg-open) !important;
}

.ccm-acc-body{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,247,242,.02));
}

.ccm-chip{
  background:rgba(255,249,244,.52) !important;
  border-color:rgba(237,178,138,.7) !important;
}

.ccm-btn{
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.ccm-secondary,
.ccm-outline{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,244,236,.14)),
    var(--ccm-lm-btn-bg) !important;
}

.ccm-secondary:hover,
.ccm-outline:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,238,224,.18)),
    var(--ccm-lm-btn-bg-hover) !important;
}

.ccm-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
    var(--ccm-btn-accept-bg) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.ccm-primary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    var(--ccm-btn-accept-bg-hover) !important;
}

.ccm-fab{
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,243,235,.12)),
    var(--ccm-lm-fab-bg) !important;
  border-color:rgba(255,255,255,.24) !important;
  backdrop-filter: blur(var(--ccm-lm-fab-blur)) saturate(145%) !important;
  -webkit-backdrop-filter: blur(var(--ccm-lm-fab-blur)) saturate(145%) !important;
  animation: ccmFabBreath 3.2s ease-in-out infinite;
}

.ccm-fab:hover{
  transform: scale(1.05) translateY(-1px) !important;
}

@keyframes ccmLiquidFade{
  0%{opacity:0;transform:translateY(8px) scale(.97);filter:blur(4px);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}

@keyframes ccmFabBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.03);}
}