/**
 * Product View Modal - Dark theme styles
 */

.product-view {
    background: rgba(18, 18, 18, 0.95) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 18px 16px !important;
    min-height: auto;
}

.product-view * {
    color: inherit !important;
}

.product-view-content h2,
.product-view-content h3,
.product-view-content h4,
.product-view-desc h4,
.product-list li {
    color: #f3f4f6 !important;
}

.product-list li span {
    color: #9ca3af !important;
}

.view-list li span {
    color: #f3f4f6 !important;
}

.product-view-price,
.view-price,
.view-price span {
    color: var(--primary) !important;
}

.view-price del {
    color: #9ca3af !important;
}

.view-name,
.view-name a {
    color: #ffffff !important;
}

.view-name a:hover {
    color: var(--primary) !important;
}

.view-details {
    color: #ffffff !important;
}

.product-view > .row {
    align-items: flex-start !important;
}

.product-view > .row > [class*="col-"]:first-child .view-details {
    padding: 8px 14px 8px 4px !important;
    min-height: auto !important;
    display: block !important;
    border-right: 1px solid rgba(113, 146, 203, 0.18) !important;
}

.product-view > .row > [class*="col-"]:last-child .view-details {
    background: linear-gradient(165deg, rgba(14, 20, 33, 0.92), rgba(8, 12, 22, 0.94)) !important;
    border: 1px solid rgba(110, 140, 188, 0.3) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32) !important;
}

.view-desc {
    color: #d1d5db !important;
}

.view-list-group {
    margin-top: 16px !important;
    padding-top: 6px !important;
}

.view-meta,
.view-meta p,
.view-meta label,
.view-meta strong {
    color: #ffffff !important;
}

.view-meta .label-text {
    color: #d1d5db !important;
}

.view-list-group,
.view-list-title {
    color: #ffffff !important;
}

.view-share-list {
    background: transparent !important;
}

.view-share-list li a,
.view-tag-list li a {
    background: rgba(31, 31, 31, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.view-share-list li a:hover,
.view-tag-list li a:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

.view-rating,
.view-rating a {
    color: #ffffff !important;
}

.view-rating .active {
    color: #fbbf24 !important;
}

.product-view .table {
    color: #ffffff !important;
    margin-bottom: 0 !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
    border: 1px solid rgba(120, 147, 190, 0.28) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    table-layout: fixed !important;
}

.product-view .table td {
    color: #ffffff !important;
    border-color: rgba(120, 147, 190, 0.16) !important;
    padding: 10px 11px !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    background: rgba(11, 15, 24, 0.56) !important;
}

.product-view .table strong {
    color: #ffffff !important;
}

.product-view .table tr:first-child td {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #cdd7f5 !important;
    background: rgba(31, 44, 76, 0.48) !important;
    border-bottom: 1px solid rgba(120, 147, 190, 0.24) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.product-view .table td:first-child {
    width: 45% !important;
    color: #d2daec !important;
    font-weight: 500 !important;
}

.product-view .table td.text-right,
.product-view .table td:last-child {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

.product-view .text-wallet {
    color: #67b4ff !important;
    font-weight: 700 !important;
}

.product-view .text-danger {
    color: var(--primary) !important;
}

.form-control-view-product {
    background: rgba(11, 15, 24, 0.88) !important;
    border: 1px solid rgba(120, 147, 190, 0.26) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    width: 100% !important;
}

.form-control-view-product:focus {
    background: rgba(11, 15, 24, 0.96) !important;
    border-color: rgba(67, 146, 255, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(67, 146, 255, 0.18) !important;
    color: #ffffff !important;
}

.form-control-view-product::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.product-action,
.product-action button,
.action-minus1,
.action-plus1 {
    background-color: transparent !important;
}

.action-minus1,
.action-plus1 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    background: rgba(11, 15, 24, 0.88) !important;
    border: 1px solid rgba(120, 147, 190, 0.28) !important;
    color: #ffffff !important;
}

.action-minus1:hover,
.action-plus1:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.action-input {
    min-width: 78px !important;
    max-width: 88px !important;
    height: 36px !important;
    border-radius: 9px !important;
    text-align: center !important;
    font-weight: 700 !important;
    background: rgba(11, 15, 24, 0.9) !important;
    border: 1px solid rgba(120, 147, 190, 0.28) !important;
    color: #ffffff !important;
}

.action-input:focus {
    background-color: rgba(31, 31, 31, 0.9) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.product-view .btn-buy {
    min-height: 46px !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #3577f8, #3f8cff) !important;
    color: #ffffff !important;
    border: 1px solid rgba(121, 170, 255, 0.56) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 12px 24px rgba(46, 122, 255, 0.28) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.product-view .btn-buy:hover {
    background: linear-gradient(90deg, #3f8cff, #5da5ff) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(46, 122, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

.label-text.feat,
.label-text.feat strong,
.view-meta .label-text.feat,
.details-meta .label-text.feat {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(29, 188, 120, 0.95), rgba(15, 147, 88, 0.95)) !important;
    border: 1px solid rgba(74, 222, 128, 0.35) !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin-right: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.label-text.order,
.label-text.order strong,
.view-meta .label-text.order,
.details-meta .label-text.order {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(70, 148, 255, 0.95), rgba(43, 109, 245, 0.95)) !important;
    border: 1px solid rgba(103, 182, 255, 0.4) !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.label_favorite {
    min-height: 46px !important;
    border-radius: 10px !important;
    background: rgba(11, 15, 24, 0.86) !important;
    border: 1px solid rgba(120, 147, 190, 0.24) !important;
    color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.26) 0px 8px 22px !important;
}

.label_favorite:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.input_favorite:checked + .label_favorite svg {
    fill: var(--primary) !important;
    stroke: var(--primary) !important;
}

.card-hot-deal {
    background: rgba(31, 31, 31, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 8px !important;
}

.card-hot-deal b {
    color: #60a5fa !important;
}

.product-view-desc p {
    color: #9ca3af !important;
}

.form-label {
    color: #d1d5db !important;
}

#into_money {
    color: #dde6ff !important;
    font-weight: 700 !important;
}

#into_discount {
    color: #ff6b81 !important;
    font-weight: 700 !important;
}

#into_pay {
    color: #6bb6ff !important;
    font-weight: 800 !important;
}

.product-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.view-add-group {
    margin-top: 12px !important;
}

.view-action-group {
    margin-top: 10px !important;
}

.view-add-group .btn-buy,
.view-action-group .label_favorite {
    width: 100% !important;
}

.product-view .table tr:last-child td {
    background: linear-gradient(90deg, rgba(36, 66, 134, 0.42), rgba(22, 43, 86, 0.42)) !important;
}

.product-view .table tr:last-child td strong {
    color: #79beff !important;
}

.product-view .table tr:nth-last-child(2) td {
    border-bottom: 1px dashed rgba(120, 147, 190, 0.3) !important;
}

.product-view .table tr:nth-child(3) td:last-child {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.product-view .table tr:nth-child(3) .product-action {
    justify-content: flex-end !important;
}

.product-view .table tr:nth-child(4) td {
    border-top: 1px dashed rgba(120, 147, 190, 0.26) !important;
}

.view-name {
    margin-bottom: 8px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
}

.view-meta {
    margin-bottom: 12px !important;
}

.view-meta p {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.view-price {
    margin: 8px 0 10px !important;
}

.view-desc {
    min-height: 0 !important;
    margin-bottom: 8px !important;
}

/* SweetAlert2 - unified dark glass style for buy flow */
div:where(.swal2-container) .swal2-popup {
    background: linear-gradient(165deg, rgba(13, 20, 36, 0.95), rgba(8, 13, 24, 0.94)) !important;
    border: 1px solid rgba(113, 146, 203, 0.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
}

div:where(.swal2-container) .swal2-title,
div:where(.swal2-container) .swal2-html-container {
    color: #e8f1ff !important;
}

div:where(.swal2-container) .swal2-styled.swal2-confirm {
    background: linear-gradient(90deg, #3577f8, #3f8cff) !important;
    border: 1px solid rgba(121, 170, 255, 0.56) !important;
    box-shadow: 0 10px 20px rgba(46, 122, 255, 0.26) !important;
}

div:where(.swal2-container) .swal2-styled.swal2-deny {
    background: linear-gradient(90deg, #dc4d5f, #cf3f50) !important;
    border: 1px solid rgba(244, 123, 139, 0.5) !important;
}

div:where(.swal2-container) .swal2-styled.swal2-cancel {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(113, 146, 203, 0.28) !important;
    color: #dbe8ff !important;
}

@media (max-width: 767px) {
    .product-view {
        padding: 14px !important;
        min-height: auto;
    }

    .product-view > .row > [class*="col-"]:last-child .view-details {
        margin-top: 12px !important;
        padding: 10px !important;
    }

    .product-view > .row > [class*="col-"]:first-child .view-details {
        border-right: none !important;
        border-bottom: 1px solid rgba(113, 146, 203, 0.18) !important;
        padding: 4px 4px 12px !important;
    }

    .product-view .table td {
        padding: 10px !important;
        font-size: 13px !important;
    }

    .product-view .table td:first-child {
        width: 42% !important;
    }

    .view-name {
        font-size: 24px !important;
    }
}