/* 弹窗容器整体样式 - 适配紧凑布局 */
.yn-dialog-contactus-box {
    max-width: 600px !important; /* 限制弹窗最大宽度，匹配效果图 */
    width: 95% !important;
}

/* 基础布局 - 一行两列（紧凑版） */
.yn-dialog-contactus-base-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px !important; /* 缩小列间距，更紧凑 */
    margin-bottom: 10px !important;
}

/* 表单项统一样式 */
.base-info-item {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* 标签样式 - 紧凑化 */
.form-label {
    font-size: 14px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    color: #333 !important;
}

/* 下拉框容器 - 用于定位自定义箭头 */
.yn-select-wrapper {
    position: relative;
    width: 100%;
}

/* 隐藏原生下拉箭头，统一样式（紧凑版） */
.yn-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 25px !important; /* 缩小箭头预留空间 */
    border: 1px solid #ddd !important; /* 更细边框，匹配效果图 */
    border-radius: 4px !important; /* 小圆角 */
    height: 40px !important; /* 降低高度，更紧凑 */
    line-height: 1.4;
    color: #333 !important;
    background-color: #fff !important;
    width: 100% !important;
    font-size: 14px !important;
}

/* 自定义下拉箭头（适配紧凑样式） */
.yn-select-wrapper::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #999; /* 浅一点的箭头颜色 */
    pointer-events: none;
}

/* 聚焦样式（更柔和） */
.yn-select:focus, .form-control:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15) !important;
    border-color: #b8d0fb !important;
}

/* 统一输入框样式（和下拉框对齐） */
.form-control {
    height: 40px !important; /* 和下拉框同高度 */
    width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    box-sizing: border-box !important;
}

/* 日期选择框样式（紧凑版） */
.yn-dialog-contactus-date {
    height: 40px !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    background-color: #fff !important;
    cursor: pointer;
}

/* 人数/酒店/文本域等其他项样式 */
.yn-dialog-contactus-people,
.yn-dialog-contactus-hotel,
.mb-3.mt_10 {
    width: 100%;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* 单选框（酒店星级）样式 */
.from-radio {
    margin-right: 15px !important;
    font-size: 14px !important;
    cursor: pointer;
}
.from-radio input {
    margin-right: 5px !important;
}

/* 文本域样式（紧凑版） */
textarea.form-control {
    height: auto !important;
    min-height: 100px !important; /* 缩小最小高度 */
    padding: 10px !important;
    resize: vertical; /* 仅允许垂直拉伸 */
}

/* 提交按钮样式（匹配效果图） */
.yn_font_btn_box {
    background-color: #ff9900 !important; /* 橙色按钮 */
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    cursor: pointer;
    width: 100% !important; /* 按钮拉满宽度 */
}
.yn_font_btn_box:hover {
    background-color: #e68a00 !important;
}

/* 移动端适配（紧凑布局） */
@media (max-width: 576px) {
    .yn-dialog-contactus-base-info {
        grid-template-columns: 1fr; /* 移动端单列 */
        gap: 8px !important;
    }
    .yn-select, .form-control, .yn-dialog-contactus-date {
        height: 38px !important;
        font-size: 13px !important;
    }
    .yn-select-wrapper::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #999;
    }
}

/* 去除多余间距/宽段 */
.modal-body {
    padding: 15px !important; /* 缩小弹窗内边距 */
}
.modal-header {
    padding: 10px 15px !important;
    border-bottom: 1px solid #eee !important;
}
.modal-footer {
    padding: 10px 15px !important;
    border-top: none !important;
}
.mt_10 {
    margin-top: 10px !important;
}
.mt_20 {
    margin-top: 15px !important;
}
.not-null {
    color: #ff0000 !important;
    margin-left: 2px !important;
}
