/*--------------------------------------------------------------
# Bid Requests Original Styles
--------------------------------------------------------------*/

/* PAGE HEADER VISIBILITY */
.page-header__inner h2,
.thm-breadcrumb li,
.thm-breadcrumb li a,
.thm-breadcrumb li span {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.thm-breadcrumb li a:hover {
    color: #3573fa !important;
}

/* PAGE */
.booking-wrapper {
    width: 100%;
}

/* HEADER (Commented out in EJS, moved to .local-header to avoid conflict) */
.local-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.page-header span {
    font-size: 20px;
    cursor: pointer;
}

/* TABS */
.tabs {
    display: flex;
    border-bottom: 1px solid #e3e6f0;
    margin-bottom: 14px;
}

.tabs button {
    flex: 1;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 16px;
    color: #8a8f9c;
    cursor: pointer;
    position: relative;
}

.tabs button.active {
    color: #2f55ff;
    font-weight: 600;
}

.tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #2f55ff;
    border-radius: 6px;
}

/* CARD */
.request-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    border-left: 4px solid #2f55ff;
}

.request-card.cancelled {
    border-left-color: #ff4d4d;
}

/* TOP ROW */
.card-top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #777;
}

.badge {
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11px;
    background: #e9f0ff;
    color: #2f55ff;
}

.badge.cancel {
    background: #ffecec;
    color: #ff4d4d;
}

/* META */
.meta {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.meta i {
    margin-right: 4px;
}

/* TITLE */
.title {
    font-size: 16px;
    font-weight: 600;
    margin: 6px 0 8px;
}

/* TAGS */
.tags {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #eef2ff;
    color: #2f55ff;
}

.tag.green {
    background: #e9fff3;
    color: #22b573;
}

/* INFO BOX */
.info {
    background: #f6f8ff;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info i {
    margin-right: 4px;
}

/* ACTIONS */
.actions {
    display: flex;
    gap: 10px;
}

.btn-outline {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #ff4d4d;
    background: #fff;
    color: #ff4d4d;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-primary {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: none;
    background: #3573fa;
    /* Restored original blue */
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* CANCEL NOTE */
.cancel-note {
    background: #fff1f1;
    color: #ff4d4d;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 8px;
}

.cancel-note i {
    margin-right: 5px;
}

/* TAB CONTENT */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* POPUP BASE */
.bid-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bid-popup.active {
    display: flex;
}

.bid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.bid-container {
    position: relative;
    width: 100%;
    max-width: 390px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    z-index: 2;
}

/* TOP */
.top-info {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.top-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 10px;
}

.top-row h4 {
    margin: 0;
    font-size: 14px;
}

/* CARD */
.bid-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

/* PROVIDER */
.provider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.provider-left {
    display: flex;
    gap: 10px;
}

.provider-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #626f81;
}

.provider-left h5 {
    margin: 0;
    font-size: 14px;
}

.rating {
    font-size: 11px;
    color: #ff9800;
}

.status {
    background: #fff3e0;
    color: #ff9800;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 20px;
}

/* DURATION */
.duration-box {
    background: #f5f7fb;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    margin: 12px 0;
}

/* AMOUNT */
.amount-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 12px;
}

.amount-row b {
    color: #2f55ff;
}

/* MESSAGE */
.message label {
    font-size: 12px;
    color: #777;
}

.msg {
    margin-top: 6px;
    background: #f5f7fb;
    padding: 8px;
    border-radius: 10px;
    font-size: 13px;
}

/* BUTTONS IN BID POPUP */
.decline {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid #ff4d4d;
    background: #fff;
    color: #ff4d4d;
    cursor: pointer;
    font-size: 13px;
    transition: .25s;
}

.accept {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid #22b573;
    background: #fff;
    color: #22b573;
    font-size: 13px;
    cursor: pointer;
    transition: .25s;
}

.btn-details {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid #2f55ff;
    color: #2f55ff;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: .25s;
}

/* MODALS/OVERLAYS */
.popup-overlay,
.pay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* POPUP BOX */
.popup-box,
.pay-box {
    background: #fff;
    width: 90%;
    max-width: 360px;
    border-radius: 18px;
    padding: 22px;
}

.popup-box h3,
.pay-box h3 {
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 700;
}

.popup-box p,
.sub {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 20px;
}

.popup-actions,
.actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancel {
    background: #fff;
    border: 1px solid #d0d5dd;
    color: #8a8a8a;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
}

.btn-decline {
    background: #ff4d4d;
    border: none;
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
}

.btn-confirm {
    background: #3573fa;
    border: none;
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
}

/* PAYMENT DETAIL CARD */
.detail-card {
    background: #f7f9fd;
    border-radius: 16px;
    padding: 14px;
    font-size: 13px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.amount {
    font-size: 16px;
    color: #2f55ff;
    font-weight: 700;
}

.section-title {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 600;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    height: 56px;
    border-radius: 14px;
    border: 1.6px solid #e1e5f0;
    cursor: pointer;
    margin-bottom: 10px;
}

.payment-option.active {
    border-color: #3f4f8c;
    background: #eef4ff;
}

.payment-option .icon {
    font-size: 18px;
    color: #3f4f8c;
}

.payment-option span {
    font-size: 14px;
}

.check-circle {
    margin-left: auto;
}

/* SAVED CARD */
.saved-card {
    background: #fffcf0;
    border: 1px solid #ffeeba;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    color: #856404;
}

/* BID MODAL DETAILS */
.bid-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bid-modal.active {
    display: flex;
}

.bid-modal-box {
    position: relative;
    width: 95%;
    max-width: 530px;
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    max-height: 90vh;
    overflow-y: auto;
}

.bid-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bid-section {
    margin-bottom: 18px;
}

.bid-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.bid-card.bid-service,
.bid-card.bid-provider {
    display: flex;
    gap: 12px;
    align-items: center;
}

.bid-card img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.bid-address {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.bid-images {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.bid-images img {
    width: 80px;
    height: 80px;
}

.bid-booking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.bid-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.bid-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.btn-decline {
    background: #ffecec;
    color: #ff4d4d;
}

.btn-accept {
    background: #3573fa;
    color: #fff;
}