/*

POSPANDA - SaaS POS System

完整版，保留了模板所有功能
---------------------------------------------
目录
------------------------------------------------
1. Typography → 字体排版
2. General → 通用样式
3. Nav → 导航栏
4. Hero Carousel → 首页大轮播图
5. Accordion → 折叠面板
6. Shop → 商店页面
7. Product → 产品展示
8. Carousel Hero → 主轮播图
9. Carousel Brand → 品牌轮播图
10. Services → 服务区块
11. Contact map → 联系方式 + 地图
12. Footer → 页脚
13. Small devices (landscape phones, 576px and up)  
    小屏设备（横屏手机，宽度 ≥576px）
14. Medium devices (tablets, 768px and up)  
    中屏设备（平板，宽度 ≥768px）
15. Large devices (desktops, 992px and up)  
    大屏设备（桌面端，宽度 ≥992px）
16. Extra large devices (large desktops, 1200px and up)  
    超大屏设备（大桌面端，宽度 ≥1200px）
--------------------------------------------- */




/* 字体排版与样式 */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* 通用样式 */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}   /* 黄色 */
.text-muted { color: #bcbcbc !important;}     /* 灰色 */
.text-success { color: #1b76ed !important;}   /* 蓝色 */
.text-light { color: #cfd6e1 !important;}     /* 浅灰蓝 */
.text-justify {
    text-align: justify;
    text-justify: inter-word; /* 增强对齐效果 */
    line-height: 1.8; /* 增加行距，更美观 */
}

.bg-dark { background-color: #212934 !important;}   /* 深灰色 */
.bg-light { background-color: #eff3f8 !important;}  /* 浅灰色 */
.bg-gradient {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,   /* 顶部 近白的蓝 */
    #e7f1ff 20%,  /* 中部 轻浅蓝 */
    #cfe2ff 40%  /* 底部 略深浅蓝 */

  ) !important;
}  /* 渐变背景 */

.bg-image {
  background-image: url('../img/B12.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} /* 图片背景 */


.bg-black { background-color: #1d242d !important;} /* 黑色背景 */
.bg-success { background-color: #1b76ed !important;} /* 绿色背景/按钮 */
.btn-success { 
  background-color: #1b76ed !important;
  border-color: #1b76ed !important;
}
.pagination .page-link:hover {color: #000;} /* 分页 */
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #1b76ed;
  color: #fff;
}
/* Feature Split 基础 背景颜色*/
.feature-split-section {
  overflow: hidden;
  background-color: #ffffff;  /* 浅蓝背景 (AliceBlue) */
}

/* ------------------------------------------------------------------------- */
/* 默认feature-hover：浮起+轻微放大 */
.feature-hover img{
  transition: transform .45s cubic-bezier(.2,.8,.2,1), 
              box-shadow .45s, filter .45s;
  will-change: transform;
}
.feature-hover:hover img{
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
  filter: saturate(1.05);
}

/* 可选：轻微倾斜（把 a 再加上 hover-tilt 类即可） */
.hover-tilt img{
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.hover-tilt:hover img{
  transform: translateY(-6px) scale(1.04) rotate3d(0,0,1,2deg);
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
}

/* 可选：弹一下（把 a 再加 hover-bounce 类） */
@keyframes hover-bounce {
  40% { transform: translateY(-10px) scale(1.06); }
  100% { transform: translateY(-8px)  scale(1.06); }
}
.hover-bounce:hover img{
  animation: hover-bounce .5s both;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------------------------- */


/* 左图背景圆圈 */
.hero-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: linear-gradient(to top, #1b76ed, #acc9f0);
  z-index: 0;
}

/* 图标容器：渐变背景 + 圆角方块 */
.fi-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px; /* 圆角矩形 */
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #78b3ff, #1b76ed); /* 橙-红渐变 */
  box-shadow: 0 6px 12px rgba(115, 131, 150, 0.35); /* 柔和阴影 */
}

.fi-icon i {
  font-size: 28px;
  color: #fff; /* 图标白色 */
}


/* 手机图 */
.phone-img {
  position: relative;
  display: block;
  max-width: 90%;
  transform: rotate(-12deg);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
  margin: 60px auto;
  z-index: 1; /* 确保手机在圆圈上面 */
}


/* 熊猫收银图电脑后台和手机 */
.laptopmobile-img {
  position: relative;
  display: block;
  max-width: 95%;
  transform: rotate(0deg);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
  margin: 60px auto;
  z-index: 1; /* 确保手机在圆圈上面 */
}

/* 方形封面：统一比例 */
.product-square {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 保持1:1方形 */
  object-fit: cover;     /* 填满裁切 */
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* 卡片细节 */
.card .card-title {
  font-weight: 700;
}




/* 导航栏 */
#pospanda_nav_top { min-height: 40px;}
#pospanda_nav_top * { font-size: .9em !important;}
#pospanda_main_nav a { color: #212934;}
#pospanda_main_nav a:hover { color: #1b76ed;}
#pospanda_main_nav .navbar .nav-icon { margin-right: 20px;}


.navbar-nav {
    margin-left: auto; /* 推到右边 */
}

/*---------------------------------------------------------------------------------------------------------------*/
/* 轮播图 Hero Carousel （首页大轮播图背景是浅灰色，左右切换箭头是绿色、2.8倍大）*/
#pospanda-hero-carousel { background: #efefef !important;}
/*首页 主banner 背景是图片的*/
#pospanda-hero-carousel2 .carousel-item {
  background-image: url('../img/B11.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 620px;
}

/* 轮播项本身允许加内边距 */
#pospanda-hero-carousel2 .carousel-item { position: relative; }

@media (max-width: 576px) {
  /* 给圆点让出空间，避免压住文字 */
  #pospanda-hero-carousel2 .carousel-item {
    padding-bottom: 3.25rem;      /* ≈ 圆点的高度+间距 */
  }
  /* 圆点稍微往上提一点（可选） */
  #pospanda-hero-carousel2 .carousel-indicators {
    bottom: .25rem;
  }
}


@media (max-width: 576px) {
  #pospanda-hero-carousel2 h1.h1{
    font-size: 1.2rem;          /* 原来很大，改小一点 */
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  #pospanda-hero-carousel2 h3.h2{
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: .75rem;
  }
  #pospanda-hero-carousel2 p{
    font-size: .75rem;
    line-height: 1.5;
    margin-bottom: 0;
  }
}

@media (max-width: 576px){
  #pospanda-hero-carousel2 .row{
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}


/*------------------------------------------------------------------------------------------------------------------*/

/* 轮播图的高级圆点样式 */
.carousel-indicators {
    bottom: 30px; /* 调整位置 */
}

.carousel-indicators [data-bs-target] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ccc; /* 默认灰色 */
    border: none;
    margin: 0 6px;
    transition: all 0.4s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.carousel-indicators .active {
    width: 32px; /* 激活时拉长变成小药丸 */
    border-radius: 5px;
    background: linear-gradient(135deg, #1b76ed, #1b76ed); /* 高级渐变绿 */
   
}


/* 展开收起 Accordion */
.pospanda-accordion a { color: #000;}
.pospanda-accordion a:hover { color: #333d4a;}

/* 商店页面 Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}

/* 产品展示 Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);} /* 产品卡片有阴影 */
.product-wap .product-color-dot.color-dot-red { background:#f71515;} /*红色点*/
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;} /*蓝色点*/
.product-wap .product-color-dot.color-dot-black { background:#000000;} /*黑色点*/
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;} /*浅灰色点*/
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;} /*绿色点*/
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* 品牌 LOGO Brand 默认灰色、半透明，鼠标移上去变彩色、全亮 */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* 服务图标 Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}

/* 联系地图Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}



/* ------------------------------------------------------------------------- */

/* 下载区：容器四周腾出空间，让蓝色背景不顶边 */
.downloads-wrap{
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 14px;              /* 若 bg-image 是颜色/渐变，会有柔和圆角 */
}

/* 卡片外观与内边距 */
.download-card{
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  background: #fff;                 /* 保证内容区清晰 */
}
.download-card .card-img-top{
  display: block;
  width: 100%;
  height: auto;
}
.download-card .card-body{
  padding: 18px 20px;               /* 关键：增大文本区内边距 */
}

/* 标题与段落间距，避免贴边 */
#downloads .h2, #downloads h2,
#downloads .h3, #downloads h3,
#downloads .h5, #downloads h5{
  margin: 10px 0 12px;
}
#downloads .card-text{ line-height: 1.5; }

/* 让行间距更松；与 .row.g-4 一起生效 */
#downloads .row{ row-gap: 12px; }

/* 小屏优化：缩小左右 padding，避免挤压 */
@media (max-width: 992px){
  .downloads-wrap{ padding-left: 20px; padding-right: 20px; }
}
/*--------------------------------------------------------------------------- */





/*熊猫收银2APP中间图核心功能---------------------------*/

/* ===== 熊猫收银 · 核心功能 - 样式 ===== */


.feature-center-img{
  max-width: 320px;                 /* 中间截图最大宽度（可按图修改） */
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.15));
}

.feature-item h5{ font-weight: 700; }
.feature-item p{ font-size: 0.95rem; }

/* 彩色圆形图标 */
.feature-round{
  width: 52px; height: 50px;
  border-radius: 20%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* 你可以改这些品牌色 */
.bg-violet { background: #8b5cf6; }
.bg-green  { background: #10b981; }
.bg-red    { background: #ef4444; }
.bg-yellow { background: #f59e0b; }
.bg-blue   { background: #3b82f6; }
.bg-purple { background: #7c3aed; }

/* 响应式优化 */
@media (max-width: 991.98px){
  .feature-center-img{ max-width: 260px; margin: 10px 0 20px; }
}
/*--------------------------------------------------------------------------- */






/* ------------------------------------------------------------------------- */
/* UI Showcase */
.ui-showcase {
  background-image: url('../img/B12.jpg'); /* 背景图路径 */
  background-size: cover;   /* 图片自动缩放，保证铺满 */
  background-position: center center; /* 居中对齐 */
  background-repeat: no-repeat; /* 不重复平铺 */
  border-radius: 14px; 
}

.ui-rail{
  position:relative; 
  max-width:1200px; 
  margin:-30px auto; 
  padding:40px 64px;
}
.ui-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px, 260px); /* 每张卡片宽度 */
  gap:32px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; /* Firefox 隐藏滚动条 */
}
.ui-track::-webkit-scrollbar{ display:none; } /* WebKit 隐藏滚动条 */

.shot{
  width:100%; height:auto;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 35px rgba(0,0,0,.15);
  scroll-snap-align:start;
}

/* 箭头按钮 */
.ui-btn{
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  width:44px; height:44px; 
  border:0; border-radius:50%;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ui-btn.prev{ left:12px; }
.ui-btn.next{ right:12px; }
.ui-btn i{ font-size:18px; }

/* 响应式：小屏收紧内边距与卡片宽度 */
@media (max-width:992px){
  .ui-rail{ padding:24px 56px; }
  .ui-track{ grid-auto-columns:minmax(200px, 230px); gap:24px; }
}
@media (max-width:576px){
  .ui-rail{ padding:20px 48px; }
  .ui-track{ grid-auto-columns:minmax(180px, 200px); gap:20px; }
}

/*--------------------------------------------------------------------------- */


/*------------------------------------------------------------------------ */

/* ===== 熊猫打卡教程下载 Banner 样式 ===== */
.cta-banner{
  position: relative;
  border-radius: 20px;                 /* 圆角，和截图一致 */
  overflow: hidden;
  min-height: 100px;                   /* 基础高度 */
  background: url('../img/B12.jpg') center/cover no-repeat; /* ← 换成你的背景图 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-overlay{
  position: absolute;
  inset: 0;
  /* 深色渐变让白字更清晰 */
  background: linear-gradient(90deg, rgba(103, 103, 103, 0.55), rgba(82, 82, 82, 0.35));
}
.cta-body{ position: relative; padding: 40px 1%; }

.cta-title{
  color:#fff;
  font-weight: 1000;
  line-height: 1.25;
  letter-spacing: .2px;
  margin:-50;
}

/* 按钮阴影更突出 */
.cta-btn{ box-shadow: 0 12px 24px rgba(0,0,0,.18); border:0; }

/* 响应式：中大屏更高、更大字 */
@media (min-width: 768px){
  .cta-banner{ min-height: 300px; }
  .cta-title{ font-size: 2rem; }
}
@media (min-width: 1200px){
  .cta-banner{ min-height: 170px; }
  .cta-title{ font-size: 2.25rem; }
}

/* 右侧插图：固定在横幅右下角 */
.cta-illustration{
  position: absolute;
  right: 28px;
  bottom: 0;
  height: 100%;                 /* 占横幅高度的 90% */
  max-height: 320px;           /* 上限，避免过大 */
  object-fit: contain;
  z-index: 1;                  /* 高于遮罩层 */
  pointer-events: none;        /* 不挡点击 */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.25));
}

/* 让中间文字右侧留出“插图占位”空间，避免重叠 */
@media (min-width: 992px){
  .cta-body{ padding-right: 100px; }  /* 这个值≈插图宽度，可按实际图调整 */
}

/* 更大屏时稍微放大插图 */
@media (min-width: 1200px){
  .cta-illustration{ max-height: 460px; }
}









/*------------------------------------------------------------------------ */


/* 页脚Footer */
#pospanda_footer a { color: #dcdde1;}
#pospanda_footer a:hover { color: #68bb7d;}
#pospanda_footer ul.footer-link-list li { padding-top: 10px;}
#pospanda_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#pospandafooter ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#pospanda_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#pospanda_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
/* 小屏手机（<576px）时的样式 */
@media (max-width: 575.98px) {
  .product-wap .h3, 
  .product-wap li, 
  .product-wap i, 
  .product-wap p {
    font-size: 12px !important;
  }
  .product-wap .product-color-dot {
    width: 6px;
    height: 6px;
  }
}

/* 横屏手机及以上（≥576px）时的样式 */
@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { 
    font-size: 1em !important;
  }
  
  .product-wap .h3, 
  .product-wap li, 
  .product-wap i, 
  .product-wap p {
    font-size: 14px !important; /* 可以比小屏大一些 */
  }
  .product-wap .product-color-dot {
    width: 8px;
    height: 8px;
  }
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}