/* Payments Page Specific Styles */

/* Hero Section */
.hero-section {
text-align: center;
margin-bottom: var(--space-16);
padding: var(--space-12);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
border-radius: var(--radius-2xl);
border: 1px solid rgba(16, 185, 129, 0.2);
}

.page-title {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--white) 0%, var(--success) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-4);
}

.page-subtitle {
font-size: 1.25rem;
color: var(--success);
font-weight: 600;
max-width: 600px;
margin: 0 auto var(--space-8);
line-height: 1.6;
}

.hero-features {
display: flex;
justify-content: center;
gap: var(--space-6);
flex-wrap: wrap;
}

.hero-feature {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: rgba(16, 185, 129, 0.1);
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 185, 129, 0.2);
font-size: 0.875rem;
font-weight: 500;
color: var(--white);
}

.hero-feature i {
color: var(--success);
font-size: 1.125rem;
}

/* Payment Methods */
.payment-methods-section {
margin-bottom: var(--space-16);
}

.payment-methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-6);
}

.payment-method-card {
background: var(--dark-surface);
border-radius: var(--radius-xl);
padding: var(--space-6);
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.payment-method-card.featured {
border-color: var(--success);
background: linear-gradient(135deg, var(--dark-surface) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.payment-method-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl), 0 0 25px rgba(139, 92, 246, 0.3);
border-color: var(--primary);
}

.payment-method-card.featured:hover {
border-color: var(--success);
box-shadow: var(--shadow-xl), 0 0 25px rgba(16, 185, 129, 0.3);
}

.payment-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}

.payment-method-card.featured .payment-icon {
background: linear-gradient(135deg, var(--success) 0%, var(--secondary) 100%);
}

.payment-icon i {
font-size: 1.5rem;
color: var(--white);
}

.payment-info h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--white);
margin-bottom: var(--space-2);
}

.payment-info p {
color: var(--dark-text-secondary);
font-size: 0.875rem;
margin-bottom: var(--space-4);
line-height: 1.5;
}

.payment-stats {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-3);
}

.processing-time {
background: rgba(16, 185, 129, 0.2);
color: var(--success);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: 600;
}

.limit {
background: rgba(139, 92, 246, 0.2);
color: var(--primary);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: 600;
}

.payment-method-card img {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 40px;
height: 40px;
border-radius: var(--radius-md);
object-fit: cover;
opacity: 0.7;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.payment-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
color: var(--white);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
text-align: center;
display: block;
transition: all 0.3s ease;
}

.payment-method-card.featured .payment-btn {
background: linear-gradient(135deg, var(--success) 0%, var(--secondary) 100%);
}

.payment-btn:hover {
background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
transform: scale(1.02);
}

/* Banks Section */
.banks-section {
margin-bottom: var(--space-16);
}

.banks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-4);
}

.bank-card {
background: var(--dark-surface);
border-radius: var(--radius-xl);
padding: var(--space-4);
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
text-align: center;
}

.bank-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}

.bank-card img {
width: 60px;
height: 40px;
object-fit: contain;
margin-bottom: var(--space-3);
background: var(--gray-100);
border-radius: var(--radius-md);
}

.bank-card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--white);
margin-bottom: var(--space-3);
}

.bank-features {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.bank-features span {
font-size: 0.75rem;
color: var(--dark-text-secondary);
padding: var(--space-1) var(--space-2);
background: rgba(139, 92, 246, 0.1);
border-radius: var(--radius-sm);
}

/* Quick Facts */
.quick-facts-section {
margin-bottom: var(--space-16);
}

.facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-6);
}

.fact-card {
background: var(--dark-surface);
border-radius: var(--radius-xl);
padding: var(--space-6);
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
text-align: center;
}

.fact-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}

.fact-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--success) 0%, var(--secondary) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
}

.fact-icon i {
font-size: 1.5rem;
color: var(--white);
}

.fact-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--white);
margin-bottom: var(--space-2);
}

.fact-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--success);
margin-bottom: var(--space-2);
}

.fact-content p {
color: var(--dark-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin: 0;
}

/* How It Works */
.how-it-works-section {
margin-bottom: var(--space-16);
}

.steps-container {
background: var(--dark-surface);
border-radius: var(--radius-2xl);
padding: var(--space-8);
border: 1px solid rgba(139, 92, 246, 0.2);
}

.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}

.step-card {
text-align: center;
padding: var(--space-4);
position: relative;
}

.step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 800;
color: var(--white);
margin: 0 auto var(--space-4);
}

.step-content h3 {
font-size: 1rem;
font-weight: 600;
color: var(--white);
margin-bottom: var(--space-2);
}

.step-content p {
color: var(--dark-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: var(--space-3);
}

.step-content img {
width: 60px;
height: 60px;
border-radius: var(--radius-lg);
object-fit: cover;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

/* Security Section */
.security-section {
margin-bottom: var(--space-16);
}

.security-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-6);
}

.security-feature {
text-align: center;
padding: var(--space-6);
background: var(--dark-surface);
border-radius: var(--radius-xl);
border: 1px solid rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
}

.security-feature:hover {
transform: translateY(-3px);
border-color: var(--primary);
}

.security-feature i {
font-size: 2rem;
color: var(--success);
margin-bottom: var(--space-4);
}

.security-feature h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--white);
margin-bottom: var(--space-3);
}

.security-feature p {
color: var(--dark-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin: 0;
}

/* Call to Action */
.cta-section {
background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-surface-light) 100%);
padding: var(--space-12);
border-radius: var(--radius-2xl);
text-align: center;
border: 1px solid rgba(16, 185, 129, 0.3);
margin-top: var(--space-16);
}

.cta-content h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--space-4);
background: linear-gradient(135deg, var(--white) 0%, var(--success) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.cta-content p {
font-size: 1.125rem;
color: var(--dark-text-secondary);
margin-bottom: var(--space-8);
}

.cta-buttons {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}

/* Responsive Design for Payments Page */
@media (max-width: 1024px) {
.page-title {
font-size: 2.5rem;
}


.payment-methods-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}

@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}


.page-subtitle {
    font-size: 1rem;
}

.hero-section {
    padding: var(--space-8);
}

.hero-features {
    gap: var(--space-3);
}

.hero-feature {
    flex-direction: column;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}

.payment-methods-grid {
    grid-template-columns: 1fr;
}

.payment-method-card {
    padding: var(--space-4);
}

.banks-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.facts-grid,
.security-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.steps-grid {
    grid-template-columns: 1fr;
}

.steps-container {
    padding: var(--space-6);
}

.cta-section {
    padding: var(--space-8);
}

.cta-content h2 {
    font-size: 2rem;
}

.cta-buttons {
    flex-direction: column;
    align-items: center;
}
}

@media (max-width: 480px) {
.page-title {
font-size: 1.75rem;
}


.hero-features {
    flex-direction: column;
    align-items: center;
}

.payment-stats {
    flex-direction: column;
    gap: var(--space-2);
}

.cta-content h2 {
    font-size: 1.75rem;
}

.cta-content p {
    font-size: 1rem;
}
}