@charset "utf-8";

/* bbs_receipt_widget v1.10 — 이름·지원분야·핸드폰: 선명한 흰 테두리 */

.mb-receipt-widget {
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 24px 16px;
    border-radius: 10px;
    max-width: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    color-scheme: dark;
}

/* 팝업/섹션에서 강제로 주는 흰 border 무력화 */
.elementor-popup-modal .mb-receipt-widget,
.elementor-location-popup .mb-receipt-widget,
.dialog-lightbox-widget .mb-receipt-widget {
    border: none !important;
    outline: none !important;
}

.mb-receipt-widget .mb-receipt-widget-table th,
.mb-receipt-widget .mb-receipt-widget-table td,
.mb-receipt-widget .mb-receipt-widget-table label,
.mb-receipt-widget .mbrw-agree-label span {
    color: #fff;
}

.mb-receipt-widget-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
}

.mb-receipt-widget-table,
.mb-receipt-widget-table th,
.mb-receipt-widget-table td {
    border: none !important;
    box-shadow: none;
}

.mb-receipt-widget-table th,
.mb-receipt-widget-table td {
    padding: 12px 0;
    vertical-align: middle;
    text-align: left;
}

.mb-receipt-widget-table th {
    font-weight: bold;
    width: 28%;
    max-width: 120px;
    padding-right: 10px;
    box-sizing: border-box;
}

.mb-receipt-widget-table td {
    width: auto;
}

.mb-receipt-widget-table tr.mbrw-fullrow > td {
    padding: 12px 0;
    width: 100%;
}

/* 일반 행: 이름 입력 (캡차 행 제외) */
.mb-receipt-widget-table tr:not(.mbrw-captcha-row):not(.mbrw-privacy-row) input[type="text"]:not(.mbrw-kcaptcha-input):not([name="kcaptcha_img"]) {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}

.mb-receipt-widget input[name="title"]:focus,
.mbrw-phone-group .mbrw-phone-mid:focus,
.mbrw-phone-group .mbrw-phone-end:focus,
.mbrw-phone-group .mbrw-phone-prefix:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 지원분야 select — 테마/브라우저 기본 흰 배경 무력화 (모바일 WebKit 포함) */
.mb-receipt-widget select[name="category1"],
.mb-receipt-widget select[id^="mbrw-category1-"] {
    width: 100%;
    max-width: 100%;
    padding: 8px 32px 8px 10px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(32, 32, 36, 0.98) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.mb-receipt-widget select[name="category1"] option,
.mb-receipt-widget select[id^="mbrw-category1-"] option {
    background-color: #2d2d32 !important;
    color: #fff !important;
}

.mb-receipt-widget select[name="category1"]:focus,
.mb-receipt-widget select[id^="mbrw-category1-"]:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 핸드폰: 그룹 안에서는 절대 width:100% 금지 */
.mbrw-phone-wrap {
    width: 100%;
    min-width: 0;
}

.mbrw-phone-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

.mbrw-phone-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.mbrw-phone-group .mbrw-phone-prefix {
    flex: 0 0 4.25rem;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    max-width: 4.75rem !important;
    margin: 0 !important;
    padding: 8px 6px;
    padding-right: 22px;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.mbrw-phone-group .mbrw-phone-mid,
.mbrw-phone-group .mbrw-phone-end {
    flex: 1 1 0;
    min-width: 0 !important;
    width: 1% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 6px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}

.mbrw-phone-divider {
    flex: 0 0 auto;
    align-self: center;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    padding: 0 1px;
    user-select: none;
}

.mbrw-phone-group input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.mbrw-phone-group select option {
    background: #333;
    color: #fff;
}

/* 캡차 */
.mbrw-captcha-hint {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
}

.mbrw-captcha-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.mbrw-captcha-flex br {
    display: none !important;
}

.mb-receipt-widget .mbrw-captcha-cell img.mb_kcaptcha {
    flex: 0 0 auto;
    display: block;
    width: auto;
    height: 32px;
    max-width: min(140px, 42vw);
    object-fit: contain;
    border-radius: 2px;
}

.mb-receipt-widget .mbrw-captcha-cell input[name="kcaptcha_img"],
.mb-receipt-widget .mbrw-captcha-cell input.mbrw-kcaptcha-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.96);
    color: #111;
    box-sizing: border-box;
    font-size: 14px;
}

.mb-receipt-widget .mbrw-debug-panel {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 200, 100, 0.5);
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
}

.mb-receipt-widget .mbrw-debug-title {
    font-weight: bold;
    color: #fc6;
    margin-bottom: 6px;
}

.mb-receipt-widget .mbrw-debug-hint {
    margin: 0 0 8px;
    color: #ccc;
}

.mb-receipt-widget .mbrw-debug-pre {
    margin: 0;
    padding: 8px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #0d0d12;
    color: #9f9;
    border-radius: 2px;
    font-size: 11px;
}

.mbrw-privacy-row td {
    padding-top: 14px;
}

.mbrw-privacy-box {
    max-height: 120px;
    overflow-y: auto;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.mbrw-agree-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
}

.mbrw-agree-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2196f3;
    cursor: pointer;
}

.mb-receipt-widget-submit {
    margin-top: 20px;
}

.mbrw-submit-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    background: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.mbrw-submit-btn:hover {
    background: #f0f0f0;
}

.mbrw-submit-btn:active {
    opacity: 0.9;
}

.mbrw-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mbrw-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
}

.mbrw-message a {
    color: #fff;
    text-decoration: underline;
}

.mbrw-message.mbrw-success {
    background: rgba(76, 175, 80, 0.35);
    border: 1px solid rgba(76, 175, 80, 0.55);
}

.mbrw-message.mbrw-error {
    background: rgba(244, 67, 54, 0.35);
    border: 1px solid rgba(244, 67, 54, 0.55);
}