/* APENIA Booking - WooCommerce */
.apenia-book-wrap { margin-top: 14px; width: 100%; }
/* When inserted after Add to Cart, align inline on desktop; fall back to full width on mobile */
.apenia-book-wrap.apenia-pos-after { display:inline-flex; align-items:center; gap:10px; margin-left:12px; margin-top:0; }
.apenia-book-wrap.apenia-pos-after .apenia-book-btn { width:auto; min-width:220px; }
@media (max-width: 640px){
  .apenia-book-wrap.apenia-pos-after { display:block; margin-left:0; margin-top:12px; }
  .apenia-book-wrap.apenia-pos-after .apenia-book-btn { width:100%; min-width:0; }
}

.apenia-book-btn{
  width: 100%;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  font: 800 15px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  background: linear-gradient(90deg, #D92D20, #B42318) !important; /* APENIA redish */
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(217,45,32,.22);
  transition: transform .12s ease, filter .2s ease;
}
.apenia-book-btn:hover{ filter: brightness(1.03); }
.apenia-book-btn:active{ transform: translateY(1px) scale(.995); }

/* Fullscreen overlay + drawer (right drawer by default) */
#apeniaDrawerOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.58);
  display:none;
  z-index: 999999;
}
#apeniaDrawerOverlay.apenia-show{ display:block; }

#apeniaDrawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width: 520px;
  max-width: 92vw;
  background: #fff;
  border-radius: 18px 0 0 18px;
  transform: translateX(110%);
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
  z-index: 1000000;
  display:none;
  overflow:auto;
  box-shadow: -8px 0 32px rgba(16,24,40,.2), -4px 0 16px rgba(16,24,40,.15);
}
#apeniaDrawer.apenia-show{ display:block; }
#apeniaDrawerOverlay.apenia-show #apeniaDrawer{ transform: translateX(0); }

/* Modes */
#apeniaDrawerOverlay.apenia-mode-left #apeniaDrawer{
  left:0; right:auto;
  border-radius: 0 18px 18px 0;
  transform: translateX(-110%);
  box-shadow: 8px 0 32px rgba(16,24,40,.2), 4px 0 16px rgba(16,24,40,.15);
}
#apeniaDrawerOverlay.apenia-show.apenia-mode-left #apeniaDrawer{ transform: translateX(0); }

#apeniaDrawerOverlay.apenia-mode-fullscreen #apeniaDrawer{
  left:0; right:0; width:100%; max-width:100%; border-radius:0;
  transform: translateY(8px);
}
#apeniaDrawerOverlay.apenia-show.apenia-mode-fullscreen #apeniaDrawer{ transform: translateY(0); }

#apeniaDrawerOverlay.apenia-mode-bottom #apeniaDrawer{
  left:0; right:0; width:100%; max-width:100%;
  top:auto; bottom:0;
  height: 100vh;
  border-radius: 18px 18px 0 0;
  transform: translateY(110%);
}
#apeniaDrawerOverlay.apenia-show.apenia-mode-bottom #apeniaDrawer{ transform: translateY(0); }

#apeniaDrawerOverlay.apenia-mode-top #apeniaDrawer{
  left:0; right:0; width:100%; max-width:100%;
  top:0; bottom:auto;
  height: 100vh;
  border-radius: 0 0 18px 18px;
  transform: translateY(-110%);
}
#apeniaDrawerOverlay.apenia-show.apenia-mode-top #apeniaDrawer{ transform: translateY(0); }

.apenia-topbar{
  position: sticky; top:0;
  background: linear-gradient(135deg, #FFF7F6 0%, #FFFFFF 100%);
  color:#101828;
  border-bottom: 1px solid #F2F4F7;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  z-index: 2;
}
.apenia-brand{ display:flex; gap:14px; align-items:center; }
.apenia-brand img{
  max-height: 32px;
  width: auto;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.apenia-brand .t1{ font: 900 17px/1.3 system-ui; margin:0; letter-spacing:-0.01em; color:#101828; }
.apenia-brand .t2{ font: 500 12px/1.4 system-ui; margin:3px 0 0; opacity:.85; color:#667085; }
.apenia-close{
  border:0; 
  border-radius:999px;
  padding:10px 18px;
  background: #FFFFFF;
  color:#344054;
  border:1px solid #E4E7EC;
  font: 600 13px/1.4 system-ui;
  cursor:pointer;
  transition: all .2s ease;
}
.apenia-close:hover{
  background: #F9FAFB;
  border-color:#D0D5DD;
}

/* Mobile UX: in right-drawer mode, expand to full width */
@media (max-width: 820px){
  #apeniaDrawerOverlay.apenia-mode-right #apeniaDrawer,
  #apeniaDrawerOverlay.apenia-mode-left #apeniaDrawer{
    width: 100%;
    max-width: 100%;
  }
}

.apenia-shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 100px;
}

/* Compact inner width for side drawers (left/right) on desktop */
@media (min-width: 1024px){
  #apeniaDrawerOverlay.apenia-mode-right .apenia-shell,
  #apeniaDrawerOverlay.apenia-mode-left .apenia-shell{
    max-width: 520px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.apenia-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px){
  /* Only split into 2 columns for full/top/bottom (screen-sized) modes */
  #apeniaDrawerOverlay.apenia-mode-fullscreen .apenia-grid,
  #apeniaDrawerOverlay.apenia-mode-bottom .apenia-grid,
  #apeniaDrawerOverlay.apenia-mode-top .apenia-grid{
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}
.apenia-card{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.06);
  border:1px solid #F2F4F7;
  overflow:hidden;
  transition: box-shadow .2s ease;
}
.apenia-card:hover{ box-shadow: 0 4px 12px rgba(16,24,40,.1), 0 12px 32px rgba(16,24,40,.08); }
.apenia-card.pad{ padding: 24px; }
.apenia-product{
  display:flex; gap:16px; align-items:center;
  background: linear-gradient(135deg, #FFF7F6 0%, #FFF5F5 100%);
  border:1px solid #FEE4E2;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
}
.apenia-product img{
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 12px;
  background:#fff;
  border:2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.apenia-product .name{ font: 900 18px/1.3 system-ui; margin:0; color:#101828; letter-spacing:-0.01em; }
.apenia-product .amt{ font: 900 24px/1.2 system-ui; margin: 8px 0 0; color:#D92D20; letter-spacing:-0.02em; }

.apenia-section-title{ 
  font: 900 16px/1.3 system-ui; 
  color:#101828; 
  margin: 0 0 20px; 
  letter-spacing:-0.01em;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.apenia-field label{
  display:block; margin: 0 0 8px;
  font: 700 13px/1.4 system-ui;
  color:#344054;
  letter-spacing: 0.01em;
}
.apenia-field label .apenia-required{ color:#D92D20; margin-left: 2px; }
.apenia-field input, .apenia-field select{
  width:100%;
  border:1.5px solid #D0D5DD;
  border-radius: 12px;
  padding: 14px 16px;
  font: 600 15px/1.4 system-ui;
  outline: none;
  background: #fff;
  color: #101828;
  transition: all .2s ease;
  box-sizing: border-box;
}
.apenia-field input::placeholder, .apenia-field select::placeholder{
  color: #98A2B3;
  font-weight: 500;
}
.apenia-field input:hover, .apenia-field select:hover{
  border-color: #98A2B3;
}
.apenia-field input:focus, .apenia-field select:focus{
  border-color: #D92D20;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12);
  background: #fff;
}
.apenia-field select{
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475067' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.apenia-row{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px){ .apenia-row.two{ grid-template-columns: 1fr 1fr; gap: 16px; } }

.apenia-actions{
  display:flex; gap: 12px; margin-top: 24px; align-items:stretch;
}
.apenia-cancel{
  border:1.5px solid #D0D5DD;
  background:#fff;
  color:#344054;
  border-radius: 10px;
  padding: 14px 20px;
  font: 700 14px/1.4 system-ui;
  cursor:pointer;
  transition: all .2s ease;
  min-width: 100px;
}
.apenia-cancel:hover{
  border-color: #98A2B3;
  background: #F9FAFB;
  color: #101828;
}
.apenia-primary{
  flex:1;
  border:0;
  background: linear-gradient(135deg, #D92D20 0%, #B42318 100%);
  color:#fff;
  border-radius: 10px;
  padding: 14px 24px;
  font: 700 15px/1.4 system-ui;
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(217,45,32,.25), 0 2px 4px rgba(217,45,32,.15);
  position: relative;
  overflow:hidden;
  transition: all .2s ease;
  letter-spacing: 0.01em;
}
.apenia-primary:hover:not([disabled]){
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217,45,32,.3), 0 4px 8px rgba(217,45,32,.2);
  background: linear-gradient(135deg, #E6392A 0%, #C52A1D 100%);
}
.apenia-primary:active:not([disabled]){
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(217,45,32,.25);
}
.apenia-primary[disabled]{ 
  opacity:.6; 
  cursor:not-allowed; 
  transform: none !important;
}
.apenia-primary .spin{
  display:none;
  width: 16px; height: 16px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: rgba(255,255,255,1);
  animation: apeniaSpin 1s linear infinite;
  margin-left: 10px;
}
.apenia-primary.loading .spin{ display:inline-block; }
@keyframes apeniaSpin { to { transform: rotate(360deg);} }

.apenia-note{ 
  margin-top: 16px; 
  color:#667085; 
  font: 500 13px/1.5 system-ui; 
  text-align: center;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 10px;
}
.apenia-error{ 
  margin-top: 16px; 
  color:#B42318; 
  font: 600 13px/1.5 system-ui; 
  padding: 12px 16px;
  background: #FEF3F2;
  border: 1px solid #FEE4E2;
  border-radius: 10px;
}
.apenia-success{ 
  margin-top: 16px; 
  color:#027A48; 
  font: 600 13px/1.5 system-ui; 
  padding: 12px 16px;
  background: #ECFDF3;
  border: 1px solid #ABEFC6;
  border-radius: 10px;
}

.apenia-footer{
  position: relative;
  width: 100%;
  background: rgba(255,255,255,.95);
  border-top:1px solid #EAECF0;
  padding: 16px 24px;
  display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top: 24px;
}
.apenia-lock{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px;
  border: 1px solid #EAECF0;
  border-radius: 10px;
  background:#fff;
  color:#101828;
  font: 600 12px/1.4 system-ui;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.apenia-muted{ color:#667085; font: 500 12px/1.4 system-ui; }
.apenia-muted a{
  color:#344054;
  font-weight:600;
  text-decoration:none;
}
.apenia-muted a:hover{
  text-decoration:underline;
}

/* shimmer */
.apenia-shimmer{
  border-radius: 18px;
  background: linear-gradient(90deg, #F2F4F7 25%, #EAECF0 37%, #F2F4F7 63%);
  background-size: 400% 100%;
  animation: apeniaShimmer 1.1s ease infinite;
}
@keyframes apeniaShimmer{ 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.apenia-skeleton{ padding: 16px; }
.apenia-skel-line{ height: 14px; margin: 10px 0; border-radius: 10px; }
.apenia-skel-big{ height: 46px; border-radius: 14px; }

/* Responsive: drawer and form on small screens */
@media (max-width: 480px){
  #apeniaDrawer{ width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; }
  .apenia-shell{ padding: 16px 16px 90px; }
  .apenia-card.pad{ padding: 20px; }
  .apenia-topbar{ padding: 16px 20px; }
  .apenia-field input, .apenia-field select{ padding: 14px 14px; font-size: 16px; }
  .apenia-actions{ flex-wrap: wrap; }
  .apenia-primary, .apenia-cancel{ min-width: 0; width: 100%; }
  .apenia-product{ padding: 16px; }
  .apenia-product img{ width: 70px; height: 70px; }
  .apenia-footer{ padding: 14px 16px; flex-direction: column; gap: 8px; }
}
@media (max-width: 380px){
  .apenia-grid{ gap: 16px; }
  .apenia-product img{ width: 60px; height: 60px; }
  .apenia-product .name{ font-size: 16px; }
  .apenia-product .amt{ font-size: 20px; }
  .apenia-shell{ padding: 14px 14px 90px; }
  .apenia-card.pad{ padding: 16px; }
}