@charset "UTF-8";

/* ====== Variables ====== */
:root {
    --main-white: #ffffff;
    --main-gray: #f8f9fa;       /* 页面背景浅灰 */
    --text-dark: #222222;       /* 深色文字 */
    --text-light: #ffffff;      /* 白色文字 */
    --accent-color: #ff6b6b;    /* 点缀色（按钮、图标、链接） */
    --card-bg: rgba(255, 255, 255, 0.95); /* 半透明卡片背景 */
    --card-shadow: rgba(0,0,0,0.08);
}

/* ====== Body ====== */
body {
    font-family: "Segoe UI", sans-serif;
    background-color: var(--main-gray);
    color: var(--text-dark);
}

/* =========================
   Navbar 样式修复：左右分布
   ========================= */
.navbar {
    background-color: #9b111e; /* 酒红色 */
}

/* 关键：容器设置为 flex，使左右对齐 */
.navbar-container {
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: center;            /* 垂直居中 */
    padding: 1rem 2rem;             /* 添加内边距 */
}

/* ===== 导航栏文字改为金色 ===== */
.navbar .navbar-brand,
.navbar .navbar-menu a {
    color: #FFD700; /* 金色 */
}

/* hover / 当前选中 */
.navbar .navbar-menu a:hover,
.navbar .navbar-menu a.active {
    color: #F4C542; /* 更柔和一点的金色 */
}

/* 右侧导航菜单 */
.navbar-menu {
    display: flex;
    gap: 2rem;              /* 设置菜单项间距 */
}

.navbar-menu li {
    list-style: none; /* 去除默认的项目符号 */
}

.navbar-menu a {
    color: #fff !important;
    font-weight: 500;
    text-decoration: none; /* 去除默认下划线 */
}

/* hover 效果 */
.navbar-menu a:hover {
    color: #ffd966 !important; /* 金色 */
}

/* =========================
   响应式设计：移动端折叠菜单
   ========================= */
@media (max-width: 991px) {
    .navbar-container {
        flex-direction: column; /* 屏幕小，导航菜单垂直显示 */
        align-items: flex-start;
    }

    .navbar-menu {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ====== Header ====== */
.header-section {
    background: linear-gradient(135deg, #b11226, #9b111e);
    color: var(--text-light);
    text-align: center;
    padding: 1.8rem;
    padding: 5rem 0;
}

/* 居中标题和副标题 */
.header-section h1 {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem;  /* 增加间距，确保美观 */
}

.header-section p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 1.5rem; /* 增加间距 */
}

/* 居中按钮 */
.d-flex {
    display: flex;
    justify-content: center;
    gap: 1rem; /* 按钮间距 */
}

/* ====== Button ====== */
.btn-main {
    background: linear-gradient(135deg, #FFD700, #FFB400);  /* 金色渐变 */
    color: #fff;  /* 按钮文字颜色为白色 */
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* 按钮 hover 效果 */
.btn-main:hover {
    box-shadow: 0 8px 20px rgba(255, 217, 102, 0.6);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #FFB400, #FFD700);  /* 鼠标悬停时金色渐变反转 */
}

/* ====== Features Section ====== */
#features .container {
    padding-left: 0; /* 移除容器的左右间距 */
    padding-right: 0;
}

/* Features Row: Flexbox for horizontal layout */
.features-row {
    display: flex;
    justify-content: space-between; /* 平均分配卡片的间距 */
    gap: 5px;  /* 设置卡片间的间距 */
    flex-wrap: wrap; /* 小屏幕时会换行 */
}

/* Features Row: 水平排列 */
.features-row {
    display: flex;
    justify-content: space-between; /* 左中右均匀分布 */
    gap: 10px; /* 卡片间距 */
    flex-wrap: nowrap; /* 不换行 */
}

/* Feature Card: 调整宽度和间距 */
.feature-card {
    background-color: #ffcccc;
    border-radius: 16px;
    padding: 1.8rem;
    box-shadow: 0 12px 10px rgba(0,0,0,0.1);
    text-align: center;

    flex: 0 0 32%;  /* 固定宽度占容器 32% */
    min-width: 230px; /* 保证最小宽度，防止文字溢出 */
    max-width: 32%;   /* 最大宽度 */
    box-sizing: border-box; /* 包括padding在内 */
}

/* 卡片 hover 效果 */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* 卡片标题和文字 */
.feature-card h2 {
    color: #9b111e; /* 酒红色标题 */
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.feature-card p {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6; /* 增加行间距，更易阅读 */
}

.feature-link {
    color: #9b111e;
    font-weight: 500;
    text-decoration: none;
}

.feature-link:hover {
    text-decoration: underline;
}

/* 小屏幕自适应 */
@media (max-width: 1200px) {
    .features-row {
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .features-row {
        flex-wrap: wrap; /* 中屏幕换行 */
    }
    .feature-card {
        flex: 0 0 48%; /* 两列显示 */
        max-width: 48%;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .feature-card {
        flex: 0 0 100%; /* 一列显示 */
        max-width: 100%;
    }
}
/* Footer 样式 */
.footer-section {
    background-color: rgba(30, 30, 30, 0.95);  /* 背景色（深灰色带透明度） */
    color: var(--text-light);  /* 文字颜色 */
    padding: 2rem 0;  /* 上下内边距 */
}

.footer-section p {
    margin: 0;
    text-align: center;  /* 确保文本居中 */
    font-size: 1rem;  /* 可以调整字体大小 */
}

/* ====== Contact & QR Section ====== */
.contact-qr-section {
    background-color: #fff5f5; /* 浅红背景 */
    padding: 4rem 0;
    text-align: center; /* 所有文字居中 */
}

.contact-qr-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #9b111e;
    margin-bottom: 0.5rem;
}

.contact-qr-section p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 2rem;
}

/* 二维码卡片 */
.qr-card {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* 卡片内容居中 */
}

.qr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.qr-card img.qr-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 1rem;
}

.qr-card h3 {
    font-size: 1.25rem;
    color: #9b111e;
    margin: 0;
}

/* ====== Contact & QR Section ====== */
.contact-qr-section {
    background-color: #fff5f5; /* 浅红背景 */
    padding: 4rem 0;
    text-align: center; /* 所有文字居中 */
}

.contact-qr-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #9b111e;
    margin-bottom: 0.5rem;
}

.contact-qr-section p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 2rem;
}

/* 联系卡片的最大宽度 */
.contact-form-card {
    max-width: 600px;  /* 最大宽度 */
    margin: 0 auto;  /* 居中 */
    padding: 2rem;  /* 内边距 */
    background-color: #fff; /* 设置卡片背景色 */
    border-radius: 16px; /* 设置圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 提交按钮居中 */
.contact-form-card .d-flex {
    justify-content: center; /* 水平居中 */
    margin-top: 1rem;  /* 上方添加间距 */
}

.contact-form-card .btn-main {
    width: 50%; /* 设置按钮宽度为 50% */
    max-width: 300px; /* 限制最大宽度 */
    margin: 0 auto; /* 确保按钮在父容器中居中 */
}
/* 二维码同一行并列居中 */
.qr-card img.qr-image {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
}

/* 联系表卡片 */
.contact-form-card {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
}

/* 表单文本左对齐 */
.contact-form-card .form-floating input,
.contact-form-card .form-floating textarea {
    text-align: left;
}

/* 提交按钮居中 */
.contact-form-card .btn-main {
    display: inline-block;
    margin: 0 auto;
}
.contact-form-card .form-floating {
    margin-bottom: 1rem; /* 原来 mb-3 ≈ 1rem，这里加大 */
}
/* 提交按钮与输入框拉开更大的距离 */
.contact-form-card .text-center {
    margin-top: 3rem; /* 约等于输入框间距的 2 倍 */
}

/* 关于网页的css */
/* 全局样式重置 - 适配公司官网，消除默认边距和样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑", "Microsoft YaHei", SimSun, 宋体, Arial, sans-serif;
}

/* 全局基础样式 - 温柔暖调，可修改为公司品牌色 */
body {
    background-color: #fefaf7; /* 页面底色，可修改 */
    color: #333;
    line-height: 1.8;
    font-size: 16px;
}

/* 页面主容器 - 与公司官网子页同宽度，居中显示 */
.mom-entrepreneur-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 头部logo+导航样式 - 对接公司官网导航风格 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0e8e3;
}
.header-logo img {
    height: 60px; /* 适配公司logo尺寸，可修改 */
}
.header-nav a {
    color: #666;
    text-decoration: none;
    margin-left: 30px;
    font-size: 15px;
    transition: color 0.3s;
}
.header-nav a:hover {
    color: #e66782; /* 主色调-鼠标悬浮，可修改为公司品牌色 */
}

/* 头图标语区 - 居中醒目，氛围感拉满 */
.banner-section {
    text-align: center;
    margin-bottom: 60px;
    padding: 20px 0;
}
.banner-section h1 {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}
.banner-section p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* 故事主体区 - 图文结合，左文右图，响应式自动变上下 */
.story-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-bottom: 70px;
}
.story-text {
    flex: 1;
    min-width: 300px; /* 最小宽度，保证手机端显示 */
}
.story-text p {
    margin-bottom: 20px;
    color: #555;
    font-size: 16px;
}
.story-img {
    flex: 1;
    min-width: 300px; /* 最小宽度，保证手机端显示 */
}
.story-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    object-fit: cover; /* 图片适配，避免变形 */
    height: auto;
}

/* 撑腰号召区 - 浅底色突出，核心诉求醒目 */
.support-section {
    background-color: #fff5f7; /* 浅粉暖调背景，可修改 */
    padding: 45px 30px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 60px;
}
.support-section h2 {
    font-size: 26px;
    color: #e66782; /* 主色调，可修改为公司品牌色 */
    margin-bottom: 25px;
    font-weight: 600;
}
.support-section p {
    max-width: 900px;
    margin: 0 auto 20px;
    color: #555;
}

/* 撑腰按钮 - 跳转商品页面，贴合公司交互风格 */
.support-btn {
    display: inline-block;
    padding: 12px 40px;
    background-color: #e66782; /* 主色调，可修改为公司品牌色 */
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 500;
    margin-top: 10px;
    transition: all 0.3s; /* 悬浮过渡效果 */
}
.support-btn:hover {
    background-color: #d5556f; /* 主色调加深，可修改 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(230,103,130,0.2);
}

/* 暖心收尾区样式 */
.ending-section {
    text-align: center;
    color: #666;
    font-size: 17px;
    padding-top: 20px;
    border-top: 1px solid #f0e8e3;
    margin-bottom: 40px;
}

/* 底部信息 - 对接公司官网底部样式 */
.page-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #f0e8e3;
    color: #999;
    font-size: 14px;
}

/* 响应式适配 - 手机端（768px以下）样式优化 */
@media (max-width: 768px) {
    .banner-section h1 {
        font-size: 26px;
    }
    .banner-section p {
        font-size: 16px;
    }
    .support-section h2 {
        font-size: 22px;
    }
    .page-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .header-nav a {
        margin: 0 10px; /* 手机端导航间距缩小 */
    }
    .story-section {
        gap: 20px; /* 手机端图文间距缩小 */
    }
}

/* 全局样式重置 - 适配官网，消除默认边距和样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑", "Microsoft YaHei", SimSun, 宋体, Arial, sans-serif;
}

/* 全局基础样式 - 温柔低饱和调，适配美肤中心调性，可修改 */
body {
    background-color: #f9f7f5; /* 页面底色，温柔高级，可修改 */
    color: #333;
    line-height: 1.8;
    font-size: 16px;
}

/* 页面主容器 - 居中显示，与官网子页同宽度 */
.mom-entrepreneur-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 头部logo+导航样式 - 含YL缩写logo专属设计 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e5e2;
}
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px; /* logo与店铺名间距 */
}
/* Y/L缩写logo - 纯CSS设计，可修改颜色/尺寸/圆角 */
.yl-logo {
    width: 60px; /* logo尺寸，可修改 */
    height: 60px; /* logo尺寸，与宽度一致 */
    background-color: #c89f94; /* logo主色，可修改为品牌色 */
    color: #fff;
    font-size: 28px; /* 字母大小，可修改 */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* 圆角，可改圆形：50% */
    letter-spacing: 2px;
}
/* 店铺名样式 */
.shop-name {
    font-size: 22px;
    font-weight: 600;
    color: #555; /* 店铺名颜色，可修改 */
}
/* 导航样式 */
.header-nav a {
    color: #666;
    text-decoration: none;
    margin-left: 30px;
    font-size: 15px;
    transition: color 0.3s;
}
.header-nav a:hover {
    color: #c89f94; /* 导航悬浮色，与logo主色一致，可修改 */
}

/* 头图标语区 - 居中醒目，贴合美肤中心温柔调性 */
.banner-section {
    text-align: center;
    margin-bottom: 60px;
    padding: 20px 0;
}
.banner-section h1 {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.5;
}
.banner-section p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* 故事主体区 - 图文结合，左文右图，响应式自动变上下 */
.story-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-bottom: 70px;
}
.story-text {
    flex: 1;
    min-width: 300px; /* 手机端最小宽度，保证显示 */
}
.story-text p {
    margin-bottom: 20px;
    color: #555;
    font-size: 16px;
}
.story-img {
    flex: 1;
    min-width: 300px; /* 手机端最小宽度，保证显示 */
}
.story-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    object-fit: cover; /* 图片适配，避免变形 */
    height: auto;
}

/* 撑腰号召区 - 浅底色突出，核心诉求醒目，适配美肤场景 */
.support-section {
    background-color: #f5f0ee; /* 浅背景色，与主色调呼应，可修改 */
    padding: 45px 30px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 60px;
}
.support-section h2 {
    font-size: 26px;
    color: #c89f94; /* 主色调，与logo一致，可修改 */
    margin-bottom: 25px;
    font-weight: 600;
}
.support-section p {
    max-width: 900px;
    margin: 0 auto 20px;
    color: #555;
}

/* 预约按钮 - 贴合美肤中心，hover有动态效果 */
.support-btn {
    display: inline-block;
    padding: 12px 40px;
    background-color: #c89f94; /* 按钮主色，与logo一致，可修改 */
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 500;
    margin-top: 10px;
    transition: all 0.3s; /* 悬浮过渡效果 */
}
.support-btn:hover {
    background-color: #b88c80; /* 按钮加深色，可修改 */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(200,159,148,0.2);
}

/* 暖心收尾区样式 - 温柔共鸣 */
.ending-section {
    text-align: center;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
    padding-top: 20px;
    border-top: 1px solid #e9e5e2;
    margin-bottom: 40px;
}

/* 底部信息 - 对接官网底部样式，简洁清晰 */
.page-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9e5e2;
    color: #999;
    font-size: 14px;
    line-height: 1.6;
}

/* 响应式适配 - 手机端（768px以下）样式优化 */
@media (max-width: 768px) {
    .banner-section h1 {
        font-size: 24px;
    }
    .banner-section p {
        font-size: 16px;
    }
    .support-section h2 {
        font-size: 22px;
    }
    /* 手机端头部改为列布局，logo居中 */
    .page-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .header-nav a {
        margin: 0 10px; /* 手机端导航间距缩小 */
    }
    .story-section {
        gap: 20px; /* 手机端图文间距缩小 */
    }
    /* 手机端YL logo尺寸微调 */
    .yl-logo {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .shop-name {
        font-size: 20px;
    }
}

/* ===== 品牌 LOGO + 文字 ===== */
.navbar-brand {
    display: flex;
    align-items: center;     /* 垂直居中 */
    gap: 10px;               /* 图片和文字间距 */
    text-decoration: none;
}

/* LOGO 图片 */
.brand-logo {
    height: 36px;            /* 控制 LOGO 高度 */
    width: auto;
}

/* 品牌文字 */
.brand-text {
    font-size: 36px;         /* 设置与logo相同的高度 */
    font-weight: 600;
    color: #FFD700;          /* 金色，和你现在风格一致 */
    white-space: nowrap;     /* 防止换行 */
}

/* ====== Feature Cards 背景图片 ====== */
.feature-card {
    background-color: transparent; /* 透明背景 */
    background-size: cover;       /* 背景图片覆盖整个卡片 */
    background-position: center;  /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    color: #fff;                  /* 文本颜色为白色，便于与图片对比 */
    padding: 2rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    flex: 1 1 30%; /* 让卡片宽度自动适配，最大占30% */
    max-width: 30%;
    min-width: 30%;
    margin-bottom: 20px;
    text-align: center;
}

/* 卡片公共背景设置 */
.feature-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
}

/* 美肤 */
.bg-skin {
    background-image: url("assets/skin.jpg");
}

/* 塑形 */
.bg-body {
    background-image: url("assets/body.jpg");
}

/* 抗衰 */
.bg-anti {
    background-image: url("assets/anti.jpg");
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 16px;
    z-index: 0;
}

.feature-card * {
    position: relative;
    z-index: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* ===== 页面基础 ===== */
body {
    background: #fff;
    color: #333;
}

/* ===== 导航栏 ===== */
.navbar {
    background: #b60000; /* 红色背景 */
    padding: 15px 0;
}

.navbar-container {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;F
    justify-content: space-between;
}

/* LOGO 区 */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: 60px;
}

.logo span {
    color: #fff;
    font-size: 32px;   /* 品牌文字高度接近图片 */
    font-weight: bold;
    line-height: 1;
}

/* 菜单 */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.nav-menu a:hover {
    text-decoration: underline;
}

/* ===== 头图 ===== */
.hero {
    background: #f2f2f2;
    text-align: center;
    padding: 80px 20px;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    color: #666;
}

/* ===== 内容区 ===== */
.section {
    width: 90%;
    margin: 60px auto;
    text-align: center;
}

.section h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.section p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* ===== 底部 ===== */
.footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

body {
    background: #f7f7f7;
    color: #333;
}

/* ===== 页面头部 ===== */
.page-header {
    text-align: center;
    padding: 60px 20px 40px;
}

.page-header h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.page-header p {
    font-size: 16px;
    color: #666;
}

/* ===== 预约区域 ===== */
.appointment-container {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.appointment-card {
    background: #fff;
    width: 480px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.appointment-card h2 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 30px;
}

/* ===== 表单 ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    outline: none;
}

.form-group textarea {
    height: 90px;
    resize: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b60000;
}

/* ===== 按钮 ===== */
.form-button {
    text-align: center;
    margin-top: 30px;
}

.form-button button {
    background: #b60000;
    color: #fff;
    border: none;
    padding: 12px 50px;
    font-size: 16px;
    border-radius: 30px;
    cursor: pointer;
}

.form-button button:hover {
    background: #8f0000;
}

/* ===== 底部 ===== */
.footer {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding-bottom: 30px;
}

/* =========================
   雨霖国际美肤中心
   预约咨询页面样式
   ========================= */

/* 页面基础 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 页面背景 */
body {
    background-image: url("assets/bg.jpg"); /* 背景图 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 页面整体居中 */
.page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 中央卡片 */
.card {
    width: 420px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    text-align: center;
}

/* 标题 */
.card h1 {
    font-size: 26px;
    margin-bottom: 8px;
}

.card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* 表单 */
.form-item {
    margin-bottom: 15px;
    text-align: left;
}

.form-item label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.form-item input {
    width: 100%;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 14px;
}

/* 按钮 */
.btn-box {
    text-align: center;
    margin-top: 20px;
}

.btn-box button {
    width: 160px;
    height: 42px;
    border-radius: 21px;
    border: none;
    background: #e79a9a;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.btn-box button:hover {
    opacity: 0.85;
}
/* =========================
   雨霖国际美肤中心
   预约咨询页面样式
   ========================= */

/* 页面基础 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 页面背景 */
body {
    background-image: url("assets/bg.jpg"); /* 背景图 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 页面整体居中 */
.page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 中央卡片 */
.card {
    width: 420px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    text-align: center;
}

/* 标题 */
.card h1 {
    font-size: 26px;
    margin-bottom: 8px;
}

.card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* 表单 */
.form-item {
    margin-bottom: 15px;
    text-align: left;
}

.form-item label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.form-item input {
    width: 100%;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 14px;
}

/* 按钮 */
.btn-box {
    text-align: center;
    margin-top: 20px;
}

.btn-box button {
    width: 160px;
    height: 42px;
    border-radius: 21px;
    border: none;
    background: #e79a9a;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.btn-box button:hover {
    opacity: 0.85;
}
.carousel-caption.custom-caption {
    color: #000000;
    text-shadow: 0 0 8px #000, 0 0 12px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    font-weight: 600;
}

/* 二维码样式 */
.qrcode-card {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: inline-block;
}
.qrcode-card img {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* 响应式适配：小屏端二维码居中 */
@media (max-width: 992px) {
    .qrcode-card {
        display: block;
    }
}
/* 修复表单区域间距（可选） */
.booking-section .row.align-items-center {
    gap: 15px;
}
    align-items: center;
}

/* 中央卡片 */
.card {
    width: 420px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    text-align: center;
}

/* 标题 */
.card h1 {
    font-size: 26px;
    margin-bottom: 8px;
}

.card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

/* 表单 */
.form-item {
    margin-bottom: 15px;
    text-align: left;
}

.form-item label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

.form-item input {
    width: 100%;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 0 10px;
    font-size: 14px;
}

/* 按钮 */
.btn-box {
    text-align: center;
    margin-top: 20px;
}

.btn-box button {
    width: 160px;
    height: 42px;
    border-radius: 21px;
    border: none;
    background: #e79a9a;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.btn-box button:hover {
    opacity: 0.85;
}
.carousel-caption.custom-caption {
    color: #000000;
    text-shadow: 0 0 8px #000, 0 0 12px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    font-weight: 600;
}

/* 二维码样式 */
.qrcode-card {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: inline-block;
}
.qrcode-card img {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* 响应式适配：小屏端二维码居中 */
@media (max-width: 992px) {
    .qrcode-card {
        display: block;
    }
}
/* 修复表单区域间距（可选） */
.booking-section .row.align-items-center {
    gap: 15px;
}