/* Dashboard Styles - Exact Image Match */
.vs-dashboard-container {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
}
.vs-my-vouchers-page {
    padding: 40px 40px 120px 40px;
    background: #f8f9fa;
    min-height: calc(100vh - 280px);
}

.qr-modal-overlay, .vs-wallet-modal, .vs-success-modal{
    z-index: 999;
}

.vs-back-home-btn span{
    padding: 10px 16px;
    border-radius: 50px;
    color: #fff;
    background-color: var(--e-global-color-blocksy_palette_1);
}

.boxed-container{
    max-width: 1400px !important;
    width: 100% !important;
    margin: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 20px;
    padding-right: 20px;
}
.boxed-content, .vs-orders-container{
    max-width: 1400px !important;
    margin: auto !important;
    padding-left: 20px;
    padding-right: 20px;
}
.vs-wallet-main-content, .vs-full-width-transactions{
    max-width: 1400px !important;
}

/* Top Header - Logo and Back Button */
.vs-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.vs-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vs-logo-icon {
    width: 40px;
    height: 40px;
    background: #085C44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vs-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.vs-back-home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 20px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.vs-back-home-btn:hover {
    background: #e5e7eb;
}

/* Dashboard Header - Greeting and Tabs */.vs-dashboard-header {
 background: url('https://vibevouch.com/wp-content/uploads/2025/11/Hero.svg') bottom center / cover, linear-gradient(135deg, #E6EFEC 0%, #E6EFEC 100%); padding: 40px 0px; display: flex ; justify-content: space-between; align-items: center; position: relative; 
}

/* Decorative Background Pattern */
.vs-dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="80" r="2.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    opacity: 0.3;
    pointer-events: none;
}

.vs-greeting-section h2 {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    line-height: 1.1;
}

.vs-dashboard-header h2 {
    font-size: 32px;
    font-weight: 500;
    color: #2B2B2B;
    margin: 0 0 8px 0;
    line-height: 1.1;
    text-align: left !important;
}
.vs-dashboard-header span {
    /* font-size: 18px !important; */
    color: #042E2299;
    /* margin: 0; */
    /* font-weight: 500; */
}

.vs-username {
    font-size: 18px;
    color: #374151;
    margin: 0;
    font-weight: 500;
}

.balance-card-wrapper {
    display: flex;
}

.balance-card{
    display: flex;
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    width: 100%;
    min-width: 680px;
    justify-content: space-between;
    align-items: center;
}

.balance-card-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.balance-icon {
    background: var(--theme-palette-color-3);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 12px;
}

.balance-amount h4, .balance-amount p{
    margin-bottom: 0px;
}
.balance-amount p{
    color: #00000080;
}

.balance-icon svg {
    color: #fff;
}

.balance-card .balance-card-right a.generate-nav-btn {
    padding: 16px 24px !important;
    font-size: 16px !important;
    border: 2px solid var(--theme-palette-color-3) !important;
    line-height: 18px;
}

.balance-card .balance-card-right a.generate-nav-btn:hover {
    color: #fff !important;
}

a.generate-nav-btn svg{
    width: 20px;
}

.vs-dashboard-header .boxed-container{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media(max-width: 1100px){
    .vs-dashboard-header .boxed-container{
        flex-direction: column;
    }
    .vs-dashboard-header h2 {
        text-align: center !important;
    }
    .vs-dashboard-header .boxed-container{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    }
    .balance-card{
        width: auto !important;
    }
    .balance-card-wrapper {
        justify-content: center;
    }
    .balance-amount {
        text-align: left !important;
    }
}

@media(max-width: 800px){
    .vs-tab-link {
        padding: 10px 12px !important;
    }
}

@media(max-width: 756px){
    .balance-card{
        width: 100% !important;
        min-width: 0px !important;
    }
    .vs-dashboard-header .boxed-container {
        gap: 6px !important;
    }
}

@media(max-width: 640px){
    .vs-dashboard-header .boxed-container{
        flex-direction: row;
    }
    .vs-dashboard-header h2 {
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    line-height: 1.1;
    text-align: left !important;
}
.vs-dashboard-header span {
    /* font-size: 16px !important; */
    /* color: #374151; */
    margin: 0;
    font-weight: 500;
}
    .vs-dashboard-header {
        padding: 24px 0px !important;
    }
    .balance-card{
        padding: 16px;
    }
}
@media(max-width: 550px){
    .balance-card{
        /* flex-direction: column; */
        gap: 15px;
    }
    .balance-card .balance-card-right a.generate-nav-btn {
        padding: 12px !important;
        font-size: 0px !important;
        border: 2px solid var(--theme-palette-color-3) !important;
        line-height: 0px;
        gap: 0px !important;
    }

    a.generate-nav-btn svg{
        width: 20px;
    }

    .balance-card-left {
        gap: 8px;
    }
    .balance-card-left .balance-icon svg{
        width: 24px;
        height: 24px;
    }
    .balance-card-left .balance-amount h4{
        font-size: 22px;
    }
    .balance-card-left .balance-amount p{
        font-size: 14px;
    }
}


/* Dashboard Tabs */
.vs-dashboard-tabs {
    position: relative;
    z-index: 1;
}

.vs-tab-nav {
    display: flex;
    gap: 0 !important;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 50px !important;
    overflow: hidden;
}

.vs-tab-link {
    /* padding: 14px 24px; */
    color: #042E22;
    text-decoration: none;
    font-size: 14px;    
    font-weight: 500;
    border-radius: 0px !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vs-tab-link.active {
    background: #085C44;
    color: white;
}

.vs-tab-link:hover:not(.active) {
    background: #f3f4f6;
    color: #374151;
}

.vs-logout-btn {
    background: #ef4444 !important;
    color: white !important;
}

.vs-logout-btn:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* Tab Content */
.vs-tab-content {
    min-height: calc(100vh - 280px);
}

/* Voucher Generator */
.vs-voucher-generator {
   
    position: relative;
}

.vs-generator-step {
    display: none;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 280px);
}

.vs-generator-step.active {
    display: grid;
}

/* Left Side - Illustration */
.vs-generator-left {
    background: url('https://vibevouch.com/wp-content/uploads/2025/11/Vector-5.png') top center/cover, linear-gradient(135deg, #085C44 0%, #1f3d2a 100%);
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    gap: 30px;
}

.vs-illustration-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.vs-illustration-container img{
    width: 70%;
}

.vs-hero-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
}

.vs-bottom-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.2;
    color: white;
}

.vs-bottom-text p {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

/* Right Side - Generator Form */
.vs-generator-right {
    background: #f8f9fa;
    padding: 60px 40px;
}

.vs-generator-title {
    font-size: 28px;
    font-weight: 700;
    color: #085C44;
    margin: 0 0 40px 0;
    line-height: 1.2;
}

.vs-generator-form {
    background: #E6EFEC;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
}

.vs-generator-right .vs-generator-form #vs-voucher-form{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.vs-form-group {
    margin-bottom: 24px;
}

.vs-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #085C44;
    margin-bottom: 8px;
}

.vs-select-wrapper {
    position: relative;
}

.vs-select-wrapper select {
    width: 100%;
    padding: 16px 20px;
    background: white;
    border: 1px solid #E6EFEC;
    border-radius: 8px;
    font-size: 16px;
    color: #1a1a1a;
    appearance: none;
    cursor: pointer;
    height: 60px;
}

.vs-select-wrapper select:focus {
    outline: none;
    border-color: #085C44;
    box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.1);
}

.vs-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
}

/* Amount Row */
.vs-amount-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* margin-bottom: 24px; */
}

.vs-generator-form .vs-amount-right input[type=number] {
    width: 100%;
    padding: 16px 20px !important;
    background: white;
    border: 1px solid #E6EFEC !important;
    border-radius: 8px !important;
    font-size: 16px;
    color: #1a1a1a;
    height: 60px;
}

.vs-generator-form .vs-amount-right input:focus {
    outline: none;
    border-color: #085C44;
    box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.1);
}

.vs-generator-form .vs-amount-right input::placeholder {
    color: #9ca3af;
}

/* Generate Button */
.vs-generate-btn {
    width: 100%;
    padding: 16px;
    background: #085C44;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vs-generate-btn:hover {
    background: #1f3d2a;
}

.vs-generate-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Preview Section */
.vs-preview-section {
    margin-top: 32px;
}

.vs-preview-title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px 0;
}

.vs-voucher-preview {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.vs-voucher-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vs-voucher-logo {
    width: 64px;
    height: 64px;
    background: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.vs-voucher-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vs-voucher-details h4 {
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
    text-align: left;
}

.vs-voucher-amount {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-voucher-validity {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.vs-voucher-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-status-active {
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.vs-terms-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    min-width: 68px;
}

@media (max-width: 1100px) {
    #vs-step-1.vs-generator-step {
        grid-template-columns: 2fr 3fr !important;
    }
    .vs-bottom-text h2{
        font-size: 26px;
    }
    .vs-billing-row {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 757px) {
    #vs-step-1.vs-generator-step, #vs-step-2.vs-generator-step {
        grid-template-columns: 1fr !important;
    }
    .vs-bottom-text h2{
        font-size: 26px;
    }
    .vs-illustration-container img {
        width: 40% !important;
    }
    .vs-generator-left {
        min-height: 0px !important;
        padding: 20px !important;
        gap: 20px;
    }

    .vs-voucher-card {
        flex-direction: row !important;
    }
    .vs-voucher-details {
        flex-wrap: wrap;
    }
    .vs-billing-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 500px) {
    .vs-voucher-type-selection {
        flex-direction: column;
        margin-bottom: 0px;
    }
    .vs-generator-form {
        padding: 20px;
    }
    .vs-voucher-preview {
        padding: 15px;
    }
    .vs-billing-row {
        grid-template-columns: 1fr !important;
    }
    
}

@media (max-width: 380px) {
    .vs-voucher-card .vs-voucher-details {
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 6px;
    }    
    .vs-voucher-validity {
        margin-bottom: 0px;
    }
}

/* Step 2 - Billing Left Side */
.vs-billing-left {
    background: var(--e-global-color-blocksy_palette_1);
    padding: 40px;
    color: white !important;
}

.vs-billing-left .vs-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white !important;
    cursor: pointer;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 500;
}

.vs-back-btn:hover {
    opacity: 0.8;
}

.vs-billing-left .billing-wrapper{
    background-color: #E6EFEC1A !important;
    padding: 24px;
    border-radius: 16px;
}

.vs-billing-section,
.vs-payment-section {
    margin-bottom: 40px;
}

.vs-billing-section h3,
.vs-payment-section h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px 0;
    color: white;
}

.vs-billing-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.vs-billing-row-single{
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

.vs-billing-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-billing-field label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.vs-generator-step.active .vs-billing-left .vs-billing-field input,
.vs-generator-step.active .vs-billing-left .vs-billing-field select, input#ccheroes-card-number,  input#ccheroes-card-holder-name{
    padding: 12px 16px;
    background: var(--e-global-color-blocksy_palette_1);
    border: 1px solid var(--e-global-color-blocksy_palette_1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    height: 60px;
}
input#ccheroes-card-number {
    height: 60px;
    color: #fff;
}
input#ccheroes-card-holder-name{
    height: 60px;
    color: #fff;
}
.vs-billing-field input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.vs-billing-field input:focus,
.vs-billing-field select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

.vs-card-field {
    margin-bottom: 20px;
}

.vs-card-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.vs-card-input {
    position: relative;
}

.vs-card-input input {
    width: 100%;
    padding: 12px 16px;
    padding-right: 120px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.vs-card-icons {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

.vs-card-icons img {
    width: 24px;
    height: 16px;
    object-fit: contain;
}

.vs-date-input {
    position: relative;
}

.vs-date-input input {
    width: 100%;
    padding: 12px 16px;
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.vs-date-input svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
}

/* Step 2 - Order Summary Right Side */
.vs-order-right {
    background: #f8f9fa;
    padding: 60px 40px;
}

.vs-order-summary {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

.vs-order-summary h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 24px 0;
}

.vs-order-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 24px;
}

.vs-order-logo {
    width: 64px;
    height: 64px;
    background: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.vs-order-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vs-order-details h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-order-amount {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-order-expiry {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.vs-order-terms {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.vs-order-breakdown {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

.vs-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #6b7280;
}

.vs-breakdown-item.vs-total {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 12px;
}

.vs-voucher-generator .vs-proceed-btn {
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.vs-proceed-btn:hover {
    border-color: #085C44;
    background: #f0f9f4;
    color: #085C44;
}

/* Payment Success Modal */
.vs-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.vs-success-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    padding: 40px;
}

.vs-success-modal .vs-success-close {
    position: absolute;
    top: 20px;
    right: 20px;
    /* background: #ef4444; */
    color: #000;
    border: 1px solid #000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.vs-success-header {
    text-align: center;
    margin-bottom: 40px;
}

.vs-success-icon {
    width: 64px;
    height: 64px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.vs-success-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.vs-success-header p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Voucher Display */
.vs-voucher-display {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    margin-bottom: 32px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
}

.vs-qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-qr-image {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.vs-voucher-card-display {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.vs-voucher-header-display {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.vs-voucher-brand-display {
    display: flex;
    gap: 12px;
}

.vs-brand-logo-display {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #1a1a1a;
}

.vs-voucher-info-display h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-voucher-amount-display {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-voucher-expiry-display {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.vs-voucher-status-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-status-active-display {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.vs-menu-dropdown .vs-menu-btn, .vs-success-modal .vs-voucher-right .vs-menu-btn {
    background: none !important;
    border: none;
    font-size: 18px;
    color: #6b7280 !important;
    cursor: pointer;
    padding: 4px;
}

.vs-menu-dropdown .vs-menu-btn:hover, .vs-menu-dropdown .vs-menu-btn:focus, .vs-success-modal .vs-voucher-right .vs-menu-btn:hover, .vs-success-modal .vs-voucher-right .vs-menu-btn:focus {
    background-color: transparent !important;
    color: #6b7280 !important;
    border: none !important;
}

.vs-voucher-details-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.vs-voucher-terms {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.vs-voucher-id {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Success Actions */
.vs-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.vs-code-btn {
    background: #d4e157;
    color: #1a1a1a;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vs-code-btn:hover {
    background: #c0ca33;
}

.vs-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vs-action-btn:hover {
    background: #f9fafb !important;
    border-color: #085C44 !important;
    background-color: #085C44 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .vs-success-content {
        padding: 24px;
        margin: 20px;
    }
    
    .vs-voucher-display {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .vs-qr-image {
        width: 120px;
        height: 120px;
    }
    
    .vs-success-actions {
        flex-direction: column;
    }
    
    .vs-voucher-header-display {
        flex-direction: row;
        gap: 12px;
        text-align: left;
    }
}
@media (max-width: 520px) {
    .vs-voucher-header-display {
        flex-direction: column;
    }
}

/* Notifications */
.vs-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease;
}

.vs-notification-success {
    background: #10b981;
    color: white;
}

.vs-notification-error {
    background: #ef4444;
    color: white;
}

.vs-notification-info {
    background: #3b82f6;
    color: white;
}

.vs-notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.vs-notification-message {
    font-size: 14px;
    font-weight: 500;
	text-align: left;
}

.vs-notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    opacity: 0.8;
}

.vs-notification-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* My Vouchers Page */
.vs-my-vouchers-page {
    padding: 40px 0px;
    background: #f8f9fa;
    min-height: calc(100vh - 280px);
}

.vs-vouchers-back {
    margin-bottom: 32px;
}

.vs-back-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    color: #085C44 !important;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0px !important;
}

.vs-back-link:hover {
    color: #374151;
}

/* Voucher Status Tabs */
.vs-voucher-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    border-bottom: 2px solid #e5e7eb;
}

.vs-my-vouchers-page .vs-voucher-tabs .vs-voucher-tab {
    padding: 8px 24px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    border-radius: 0px;
}

.vs-voucher-tab.active {
    color: #085C44 !important;
    border-bottom-color: #085C44 !important;
}

.vs-voucher-tab:hover:not(.active) {
    color: #374151;
}

/* Voucher Content */
.vs-voucher-content {
    position: relative;
}

.vs-voucher-list {
    display: none;
}

.vs-voucher-list.active {
    display: block;
}

.vs-voucher-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px 0;
}

.vs-empty-vouchers {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.vs-voucher-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Voucher Item Card */
.vs-voucher-item-card {
    display: grid;
    grid-template-columns:140px auto;
    gap: 80px;
    align-items: center;
    background: url('https://vibevouch.com/wp-content/uploads/2025/11/Card-1-3.png') left/cover;
    padding: 20px;
    border-radius: 24px;
}

.vs-voucher-list[data-status="partially_used"] .vs-voucher-item-card {
	grid-template-columns: 160px auto;
}



/* QR Code */
.vs-voucher-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
	padding: 12px;
}

.qr-code-wrapper{
	border: 1px solid #085C44; 
	border-radius: 5px; 
	padding: 5px; 
	background: white; 
	box-sizing: border-box; 
	position: relative;
}

.vs-qr-code, .vs-voucher-qr img {
    width: 100%;
    /* height: 80px; */
    aspect-ratio: 1/1;
    object-fit: cover;
}
.vs-voucher-qr .qr-logo{
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}

.vs-voucher-qr .qr-logo img{
	width: 26px; 
	height: 26px;
}

.vs-qr-placeholder {
    width: 80px;
    height: 80px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

/* Brand Logo */
.vs-voucher-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-brand-logo {
    width: 64px;
    height: 64px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.vs-brand-placeholder {
    width: 64px;
    height: 64px;
    background: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
}

.vs-voucher-actions .vs-action-btn p{
    margin-bottom: 0px;
    line-height: 1em;
}

.vs-btn-info .vs-voucher-expiry {
    display: none;
}
.card-title-tags{
    gap: 10px;
}


@media(max-width: 1150px){
	.vs-voucher-list[data-status="partially_used"] .vs-voucher-item-card {
	grid-template-columns: 200px auto;
}
}

@media(max-width: 860px){
    .vs-voucher-status-section, .vs-btn-info .vs-voucher-meta, .vs-copy-btn span, .vs-voucher-main .vs-voucher-expiry {
        display: none;
    }
    .vs-action-btn {
        padding: 5px 12px !important;
    }
    .card-title-tags .vs-voucher-terms{
        display: block !important;
    }
    .vs-voucher-main {
        width: 100%;
    }
    .vs-btn-info .vs-voucher-expiry {
        display: flex;
        align-items: center;
    }
    .voucher-details {
        gap: 10px !important;
    }
}

@media(max-width: 757px){
    .vs-voucher-brand {
        display: none;
    }
    .vs-voucher-item-card {
        grid-template-columns: 110px auto !important;
        gap: 50px !important;
        border-radius: 10px !important;
        background: url('https://vibevouch.com/wp-content/uploads/2025/11/Card-24.svg') left/cover;
    }
    .vs-voucher-title {
        font-size: 16px !important;
        line-height: 18px !important;
    }
    .vs-voucher-amount, .vs-remaining-amount, .vs-used-amount, .vs-original-amount {
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .vs-btn-info .vs-voucher-actions .vs-action-btn {
        font-size: 10px !important;
    }
    .vs-btn-info {
        flex-direction: column !important;
        gap: 5px !important;
    }
    .card-title-tags .vs-voucher-terms{
        min-width: 68px;
    }
    .vs-vouchers-back, .vs-back-link {
        margin-bottom: 10px !important;
    }
    .vs-back-link{
        margin-bottom: 20px !important;
    }
    .vs-my-vouchers-page .vs-voucher-tabs .vs-voucher-tab {
        padding: 5px 10px !important;
        font-size: 14px !important;
    }
}

@media(max-width: 500px){
    .vs-voucher-item-card {
		grid-template-columns: 80px auto !important;
        gap: 20px !important;
        background: none;
        background-color: #fff;
    }
    .vs-voucher-title {
        font-size: 14px !important;
        line-height: 16px !important;
    }
    .vs-voucher-amount, .vs-remaining-amount, .vs-used-amount, .vs-original-amount {
        font-size: 13px !important;
        line-height: 16px !important;
        margin: 0px !important;
    }
    .card-title-tags .vs-voucher-terms{
        display: none !important;
    }
}
@media (max-width: 425px) {
    .vs-btn-info {
        flex-direction: column !important;
    }
}

@media (max-width: 390px) {
    .vs-btn-info {
        flex-direction: column !important;
    }
    .vs-btn-info .vs-voucher-actions .vs-action-btn {
        gap: 0px !important;
        font-size: 0px !important;
    }
    .vs-voucher-item-card {
        grid-template-columns: 64px auto !important;
    }
}

/* Voucher Details */
.vs-info{
    display: flex;
    gap: 20px;
}
.vs-voucher-details {
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: space-between;
    width: 100%;
}

.vs-voucher-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.card-title-tags {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title-tags .vs-voucher-terms{
    display: none;
}

.vs-voucher-amount {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.vs-voucher-expiry {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

.vs-voucher-status {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-active {
    background: #3b82f6;
    color: white;
}

.status-used {
    background: #f59e0b;
    color: white;
}

.status-expired {
    background: #ef4444;
    color: white;
}

/* Voucher Meta */
.vs-voucher-meta {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.vs-voucher-id {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.vs-voucher-terms {
    background: #ECF86E;
    color: #042E22;
    padding: 4px 6px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

/* Voucher Actions */
.vs-voucher-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.vs-voucher-actions .vs-action-btn, .vs-success-modal .vs-success-actions .vs-action-btn, .vs-success-modal .vs-success-actions .vs-code-btn, .vs-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 32px;
    background: white !important;
    border: 1px solid #085C4475 !important;
    border-radius: 40px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--e-global-color-blocksy_palette_3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.vs-voucher-actions .vs-action-btn:hover, .vs-success-modal .vs-success-actions .vs-action-btn:hover, .vs-success-modal .vs-success-actions .vs-code-btn:hover {
    background: var(--e-global-color-blocksy_palette_2) !important;
	color: var(--e-global-color-blocksy_palette_3) !important;
}

/* Menu Dropdown */
.vs-menu-dropdown {
    position: relative;
}

.voucher-details{
    display: flex;
    justify-content: space-between;
}

.vs-btn-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vs-voucher-actions .vs-menu-btn {
    background: none;
    border: none;
    padding: 0px 4px;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.vs-menu-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.vs-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    min-width: 120px;
    z-index: 1000;
    display: none;
}

.vs-dropdown-menu.show {
    display: block;
}

.vs-dropdown-menu .vs-dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.vs-dropdown-menu .vs-dropdown-item:hover, .vs-dropdown-menu .vs-dropdown-item:focus {
    background: none !important;
    color: var(--e-global-color-blocksy_palette_1) !important;
    border: none !important;
}

.vs-dropdown-menu .vs-dropdown-item.vs-delete-btn:hover {
    background: none !important;
    border: none !important;
    color: #dc2626 !important;
}

/* Responsive */
@media (max-width: 1130px) {
    .vs-voucher-item-card {
        grid-template-columns:180px auto;
        gap: 80px;
    }
    .voucher-details {
        flex-direction: column;
        gap: 15px;
    }
    .vs-btn-info {
        flex-direction: row;
    }
    .vs-voucher-meta, .vs-voucher-actions{
        justify-content: start;
    }
}

@media (max-width: 1024px) {
    .vs-voucher-item-card {
        grid-template-columns:180px auto;
        gap: 80px;
    }

    .vs-voucher-badges{
        min-width: none;
    }
    
    .vs-voucher-details {
        flex-direction: column;
        gap: 12px;
    }
    
    .vs-voucher-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    .vs-btn-info {
        flex-direction: row;
    }
    .vs-voucher-meta, .vs-voucher-actions{
        justify-content: start;
    }
}

@media (max-width: 640px) {
    /* .vs-my-vouchers-page {
        padding: 20px;
    } */
    
    .vs-voucher-tabs {
        flex-wrap: wrap;
    }
    
    .vs-voucher-tab {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
}

/* Purchase History Page */
.vs-purchase-history-page {
    padding: 40px;
    background: #f8f9fa;
    min-height: calc(100vh - 280px);
}

.vs-history-back {
    margin: 32px 0px;
}

.vs-back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.vs-back-link:hover {
    color: #374151;
}

/* Orders Container */
.vs-orders-container {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
}

.vs-orders-title {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

.vs-empty-orders {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.vs-empty-orders p {
    font-size: 16px;
    margin-bottom: 16px;
}

.vs-generate-link {
    color: #085C44;
    text-decoration: none;
    font-weight: 600;
}

.vs-generate-link:hover {
    text-decoration: underline;
}

/* Orders Table */
.vs-orders-table {
    width: 100%;
}

.vs-table-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr 1fr !important;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.vs-transactions-table .vs-table-header,  .vs-transactions-table .vs-table-row{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr !important;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.vs-header-cell {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vs-table-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vs-table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr 1fr !important;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    transition: background 0.2s ease;
}

.vs-table-row:hover {
    background: #f9fafb;
    border-radius: 8px;
    margin: 0 -16px;
    padding: 20px 16px;
}

.vs-table-row:last-child {
    border-bottom: none;
}

.vs-table-cell {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #374151;
}

@media (max-width: 767px) {
    .vs-header-cell {
        font-size: 11px;
    }

    .vs-table-body .vs-table-cell, .vs-table-body .vs-table-cell .vs-status-badge, .vs-table-body .vs-table-cell .vs-download-btn{
        font-size: 11px !important;
    }

    .vs-table-scrolls{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vs-orders-container{
        min-width: 900px !important
    }
    .vs-table-row, .vs-table-header {
        grid-template-columns: 1fr 180px 1fr 1fr 1fr 1fr 1fr !important;
    }
}

/* Product ID */
.vs-product-id-text {
    color: #085C44;
    font-weight: 600;
}

/* Brand Info */
.vs-brand-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vs-brand-logo-small {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.vs-brand-placeholder-small {
    width: 32px;
    height: 32px;
    background: #1a1a1a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.vs-brand-name {
    font-weight: 500;
    color: #1a1a1a;
}

/* Status Badge */
.vs-status-badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-active {
    background: #dbeafe;
    color: #1e40af;
}

.status-used {
    background: #dcfce7;
    color: #166534;
}

.status-expired {
    background: #fee2e2;
    color: #991b1b;
}

/* Download Button */
.vs-table-cell.vs-download .vs-download-btn, .vs-table-row .vs-col-action .vs-invoice-btn {
    color: #3b82f6;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
    padding: 0px;;
}

.vs-download-btn:hover {
    color: #1d4ed8;
}

/* Other Tab Content */
.vs-my-vouchers-content,
.vs-purchase-history-content,
.vs-user-settings-content {
    padding: 40px;
    background: #f8f9fa;
    min-height: calc(100vh - 280px);
}

.vs-content-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.vs-content-header p {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 32px 0;
}

/* Empty State */
.vs-empty-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    border: 2px dashed #d1d5db;
}

.vs-empty-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.vs-empty-state h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.vs-empty-state p {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.vs-cta-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #085C44;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.vs-cta-btn:hover {
    background: #1f3d2a;
}

/* Responsive */
@media (max-width: 1024px) {
    .vs-voucher-generator {
        grid-template-columns: 1fr;
    }
    
    .vs-illustration-container img{
        width: 90%;
    }

    .vs-generator-left {
        order: -1;
        min-height: 300px;
        padding: 40px 20px;
    }
    
    .vs-generator-right {
        padding: 40px 20px;
    }
    
    .vs-dashboard-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .vs-greeting-section h2 {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .vs-top-header {
        padding: 16px 20px;
        flex-direction: column;
        gap: 16px;
    }
    
    .vs-dashboard-header {
        padding: 24px 20px;
    }
    
    .vs-greeting-section h2 {
        font-size: 28px;
    }
    
    .vs-amount-row {
        grid-template-columns: 1fr;
    }
    
    .vs-voucher-card {
        flex-direction: column;
        text-align: center;
    }
    
    .vs-tab-nav {
        flex-wrap: wrap;
        justify-content: center;
        padding: 2px;
    }
    
    .vs-tab-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .vs-my-vouchers-content,
    .vs-purchase-history-content,
    .vs-user-settings-content {
        padding: 20px;
    }
}
/* Payment Method Card Icons - Real Logos */
.vs-card-icon {
    width: 40px;
    height: 24px;
    border-radius: 4px;
    position: relative;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.vs-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
}

.vs-card-icon.visa,
.vs-card-icon.mastercard,
.vs-card-icon.amex,
.vs-card-icon.american,
.vs-card-icon.discover {
    background: white;
}