page {
    background-color: #f5f7fb;
    overflow-y: hidden;
}

.monthly-payment-container {
    box-sizing: border-box;
    width: 100%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff3f1;
    padding: 20rpx 0;
    height: 45rpx;
}

.header-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-right: 10rpx;
    font-weight: bold;
}

.header-arrow {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
}

/* 搜索框样式 */
.search-box {
    display: flex;
    align-items: center;
    background-color: #f5f7fb;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    margin: 20rpx 0;
}

.search-icon {
    margin-right: 15rpx;
}

.search-input {
    flex: 1;
    font-size: 26rpx;
    color: #333333;
    background-color: transparent;
}

/* 下拉停车场列表样式 */
.parking-list {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    border-radius: 0 0 40rpx 40rpx;
    position: fixed;
    top: 80rpx;
    left: 0;
    right: 0;
    z-index: 999;
}

.overlay {
    position: absolute;
    top: 90rpx;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
}

.parking-items {
    max-height: 600rpx;
    overflow-y: auto;
}

.parking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.parking-item:last-child {
    border-bottom: none;
}

.parking-item-right {
    flex: 1;
}

.parking-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10rpx;
    display: block;
}

.parking-distance {
    font-size: 26rpx;
    color: #999999;
    margin-right: 20rpx;
}

.parking-address {
    font-size: 26rpx;
    color: #999999;
    display: block;
    margin-top: 8rpx;
}

.parking-item-left {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.parking-selected {
    font-size: 40rpx;
    color: #ff4219;
    position: relative;
    right: 30rpx;
}

.parking-spaces {
    background-color: #ffeeee;
    border-radius: 20rpx;
    padding: 8rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30rpx;
}

.spaces-label {
    font-size: 22rpx;
    color: #ff4219;
    margin-bottom: 4rpx;
}

.spaces-number {
    font-size: 30rpx;
    font-weight: bold;
    color: #ff4219;
}

/* 车辆选择器 */
.changeCar {
    background-color: #fff;
    border-bottom: 1rpx solid #eeeeee;
    position: relative;
}

.car-selector {
    width: 27%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 100rpx;
}

.selected-car-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
}

/* 车辆下拉列表样式 */
.car-dropdown {
    width: 33%;
    height: 600rpx;
    overflow-y: auto;
    background-color: #ffffff;
    border-top: 1rpx solid #f0f0f0;
    position: absolute;
    top: 100rpx;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    margin-left: 50rpx;
    border-radius: 20rpx;
}

.dropdown-arrow {
    position: absolute;
    top: -8px;
    left: 20%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

/* 车辆选项样式 */
.car-item {
    padding: 30rpx;
    font-size: 28rpx;
    color: #333333;
    border-bottom: 1rpx solid #f0f0f0;
    text-align: center;
    font-weight: bold;
}

.car-item:last-child {
    border-bottom: none;
}

.car-item:active {
    background-color: #f5f7fb;
}

.container {
    background-color: #fff;
    padding: 30rpx;
}

.title {
    font-size: 30rpx;
    margin-top: 10rpx;
    margin-bottom: 30rpx;
    text-align: center;
}

.selectColorBox {
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx auto 0;
}

.selectColor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.color {
    margin-right: 10rpx;
}

/* 弹窗样式 */
.payIpt {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
}

.tit {
    font-size: 32rpx;
    text-align: center;
    padding: 30rpx 0;
    font-weight: bold;
    border-bottom: 1rpx solid #eee;
}

/* 颜色列表样式 */
.color-list {
    max-height: 500rpx;
    padding: 20rpx 0;
}

.color-item {
    font-size: 28rpx;
    text-align: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.color-item:last-child {
    border-bottom: none;
}

.color-item.active {
    color: #ff4016;
}

/* 底部按钮样式 */
.popup-footer {
    display: flex;
    border-top: 1rpx solid #eee;
}

.cancel-btn,
.confirm-btn {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    font-size: 32rpx;
}

.cancel-btn {
    color: #666;
    border-right: 1rpx solid #eee;
}

.confirm-btn {
    color: #ff4016;
}

/* 查询停车费 */
.order-record {
    text-align: center;
    padding: 30rpx 0;
    border-top: 1rpx solid #eeeeee;
    background-color: #ffffff;
}

.order-record-text {
    font-size: 28rpx;
    color: #ff3f11;
}

/* 停车费展示部分样式 */
.cost-container {
    background-color: #ffffff;
    padding: 40rpx 30rpx;
    margin-top: 20rpx;
}

.not-found{
    text-align: center;
    font-size: 28rpx;
    color: #999999;
}

.cost-image{
    width: 100%;
    height: 150rpx;
    margin-bottom: 10rpx;
}

.cost-header {
    text-align: center;
    margin-bottom: 20rpx;
}

.cost-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
}

.cost-title2 {
    color: #999999;
    margin-left: 10rpx;
}

.cost-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    color: #ff3f11;
    font-weight: bold;
}

.amount-symbol {
    margin-right: 10rpx;
}

.amount-number {
}

.cost-info {
    margin-bottom: 30rpx;
}

.info-item {
    display: flex;
    justify-content: center;
    margin-bottom: 15rpx;
    font-size: 24rpx;
    color: #999999;
}

.info-label {
    margin-right: 10rpx;
}

.info-value {
}

.notice {
    background-color: #fff8f4;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
}

.notice-text {
    font-size: 26rpx;
    color: #999999;
    text-align: center;
    display: block;
}

.notice-text2 {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
}

.payment-methods {
    margin-bottom: 40rpx;
}

.payment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
}

.payment-item:last-child {
    border-bottom: none;
}

.payment-item-content {
    display: flex;
    align-items: center;
}

.payment-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
    border-radius: 50%;
}

.payment-name {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
}

.payment-selected {
    width: 30rpx;
    height: 30rpx;
    border: 3rpx solid #ff3f11;
    border-radius: 50%;
    position: absolute;
    right: 50rpx;
}

.payment-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15rpx;
    height: 15rpx;
    background-color: #ff3f11;
    border-radius: 50%;
}

.pay-button {
    width: 70%;
    margin: 0 auto;
    background-color: #ff370b;
    color: #ffffff;
    text-align: center;
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 50rpx;
}