:root {
--dspanel-primary: #3b82f6;
--dspanel-primary-dark: #2563eb;
--dspanel-secondary: #1e40af;
--dspanel-bg: #f0f9ff;
--dspanel-card-bg: #ffffff;
--dspanel-text: #1e293b;
--dspanel-text-muted: #64748b;
--dspanel-border: #e2e8f0;
--dspanel-success: #10b981;
--dspanel-error: #ef4444;
--dspanel-warning: #f59e0b;
--dspanel-radius: 12px;
--dspanel-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--dspanel-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} .dspanel-page * {
box-sizing: border-box;
}
.dspanel-page body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: var(--dspanel-bg);
color: var(--dspanel-text);
line-height: 1.6;
} .dspanel-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--dspanel-heading-color, var(--dspanel-text));
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: var(--dspanel-primary);
color: white; }
.btn-primary:hover {
background: var(--dspanel-primary-dark);
transform: translateY(-1px);
color: white;
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-outline {
background: transparent;
border: 2px solid var(--dspanel-border);
color: var(--dspanel-heading-color); }
.btn-outline:hover {
border-color: var(--dspanel-primary);
color: var(--dspanel-primary);
}
.btn-lg {
padding: 16px 32px;
font-size: 16px;
}
.btn-block {
width: 100%;
} .dspanel-header {
background: var(--dspanel-card-bg);
border-bottom: 1px solid var(--dspanel-border);
position: sticky;
top: 0;
z-index: 100;
}
.dspanel-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
}
.header-logo img {
height: 40px;
width: auto;
}
.header-logo .logo-text {
font-size: 22px;
font-weight: 700;
color: var(--dspanel-text);
text-decoration: none;
}
.header-nav {
display: flex;
gap: 32px;
}
.header-nav a {
color: var(--dspanel-text-muted);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.header-nav a:hover {
color: var(--dspanel-primary);
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
}
.mobile-menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--dspanel-text);
transition: all 0.3s;
}
.mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--dspanel-card-bg);
border-bottom: 1px solid var(--dspanel-border);
padding: 20px;
}
.mobile-menu.active {
display: block;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-nav a {
color: var(--dspanel-text);
text-decoration: none;
font-weight: 500;
padding: 12px 0;
border-bottom: 1px solid var(--dspanel-border);
}
@media (max-width: 768px) {
.header-nav,
.header-actions {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
} .dspanel-hero {
padding: 80px 0;
text-align: center;
background: linear-gradient(135deg, var(--dspanel-primary) 0%, var(--dspanel-secondary) 100%);
color: white;
}
.dspanel-hero h1 {
font-size: 48px;
font-weight: 800;
margin: 0 0 16px;
line-height: 1.2;
color: white !important;
}
.dspanel-hero .hero-subtitle {
font-size: 20px;
opacity: 0.9;
margin: 0 0 32px;
color: white !important;
}
.dspanel-hero .btn {
background: white;
color: var(--dspanel-primary);
}
.dspanel-hero .btn:hover {
transform: translateY(-2px);
box-shadow: var(--dspanel-shadow-lg);
}
@media (max-width: 768px) {
.dspanel-hero {
padding: 60px 0;
}
.dspanel-hero h1 {
font-size: 32px;
}
} .dspanel-services {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 32px;
font-weight: 700;
margin: 0 0 48px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.service-card {
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
overflow: hidden;
box-shadow: var(--dspanel-shadow);
transition: all 0.3s;
cursor: pointer;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--dspanel-shadow-lg);
}
.service-card.unavailable {
opacity: 0.7;
cursor: not-allowed;
}
.service-card.unavailable:hover {
transform: none;
}
.card-image {
position: relative;
height: 180px;
background: linear-gradient(135deg, var(--dspanel-primary) 0%, var(--dspanel-secondary) 100%);
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.placeholder-image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
opacity: 0.5;
}
.unavailable-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--dspanel-error);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.dspanel-stock-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--dspanel-success);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
}
.card-desc {
color: var(--dspanel-text-muted);
font-size: 14px;
margin: 0 0 16px;
}
.card-meta {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.card-meta span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--dspanel-text-muted);
}
.card-delivery.instant {
color: var(--dspanel-success);
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--dspanel-border);
}
.card-price {
font-size: 24px;
font-weight: 700;
color: var(--dspanel-primary);
}
.card-price small {
font-size: 14px;
font-weight: 400;
color: var(--dspanel-text-muted);
} .dspanel-features {
padding: 80px 0;
background: var(--dspanel-card-bg);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
}
.feature-card {
text-align: center;
padding: 32px;
}
.feature-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
background: linear-gradient(135deg, var(--dspanel-primary) 0%, var(--dspanel-secondary) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.feature-card h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
}
.feature-card p {
color: var(--dspanel-text-muted);
margin: 0;
} .dspanel-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: none;
align-items: center; justify-content: center;
padding: 20px;
overflow-y: auto; }
.dspanel-modal.active {
display: flex;
}
.modal-overlay {
position: fixed; top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.modal-container {
position: relative;
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
max-width: 500px;
width: 100%;  margin: auto; box-shadow: var(--dspanel-shadow-lg);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
color: var(--dspanel-text-muted);
z-index: 10;
padding: 8px;
border-radius: 50%;
transition: all 0.2s;
}
.modal-close:hover {
background: var(--dspanel-bg);
color: var(--dspanel-text);
}
.modal-content {
padding: 24px;
}
.modal-product {
display: flex;
gap: 20px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--dspanel-border);
}
.modal-image {
width: 120px;
height: 120px;
flex-shrink: 0;
border-radius: var(--dspanel-radius);
overflow: hidden;
background: var(--dspanel-bg);
}
.modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-info h2 {
font-size: 20px;
margin: 0 0 8px;
}
.modal-info p {
color: var(--dspanel-text-muted);
font-size: 14px;
margin: 0;
}
.modal-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
}
.meta-item {
text-align: center;
padding: 8px;
background: var(--dspanel-bg);
border-radius: 8px;
}
.meta-label {
display: block;
font-size: 11px;
color: var(--dspanel-text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.meta-value {
display: block;
font-size: 14px;
font-weight: 600;
} .modal-payment h3 {
font-size: 18px;
margin: 0 0 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.form-group input[type="email"],
.form-group input[type="text"] {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
transition: border-color 0.2s;
}
.form-group input:focus {
outline: none;
border-color: var(--dspanel-primary);
}
.form-hint {
font-size: 12px;
color: var(--dspanel-text-muted);
margin: 8px 0 0;
} .contact-methods {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.contact-method {
cursor: pointer;
}
.contact-method input {
display: none;
}
.contact-method-content {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
transition: all 0.2s;
font-weight: 500;
}
.contact-method:hover .contact-method-content {
border-color: var(--dspanel-primary);
}
.contact-method input:checked+.contact-method-content {
border-color: var(--dspanel-primary);
background: rgba(59, 130, 246, 0.05);
color: var(--dspanel-primary);
}
.contact-method svg {
flex-shrink: 0;
} .payment-methods {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.payment-method {
cursor: pointer;
}
.payment-method input {
display: none;
}
.payment-method-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
transition: all 0.2s;
}
.payment-method:hover .payment-method-content {
border-color: var(--dspanel-primary);
}
.payment-method input:checked+.payment-method-content {
border-color: var(--dspanel-primary);
background: rgba(59, 130, 246, 0.05);
}
.payment-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.payment-name {
font-size: 14px;
font-weight: 600;
}
.payment-type {
font-size: 11px;
color: var(--dspanel-text-muted);
} .btn-loader {
display: flex;
align-items: center;
gap: 8px;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} .modal-success,
.modal-error {
text-align: center;
padding: 40px 20px;
}
.success-icon {
color: var(--dspanel-success);
margin-bottom: 16px;
}
.error-icon {
color: var(--dspanel-error);
margin-bottom: 16px;
} .dspanel-dashboard {
padding: 60px 0;
min-height: 60vh;
}
.dspanel-dashboard h1 {
margin: 0 0 32px;
}
.dashboard-lookup {
text-align: center;
padding: 60px 20px;
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
}
.lookup-form {
max-width: 400px;
margin: 24px auto 0;
}
.lookup-form .form-group {
display: flex;
gap: 12px;
}
.lookup-form input {
flex: 1;
padding: 14px 16px;
font-size: 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
} .dashboard-login {
display: flex;
justify-content: center;
} .dspanel-wa-widget {
position: fixed;
bottom: 80px;
right: 20px;
width: 350px;
height: 400px; background: #efeae2; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
border-radius: 16px;
overflow: hidden;
z-index: 9999;
display: flex;
flex-direction: column;
animation: slideUp 0.3s ease;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .wa-header {
background: #008069;
color: white;
padding: 10px 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.wa-header-info {
display: flex;
align-items: center;
gap: 10px;
}
.wa-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.wa-header-text {
display: flex;
flex-direction: column;
}
.wa-title {
font-weight: 600;
font-size: 16px;
line-height: 1.2;
}
.wa-status {
font-size: 12px;
opacity: 0.9;
font-weight: 400;
}
.wa-close {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
}
.wa-close:hover {
opacity: 1;
} .wa-chat-body {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #efeae2; background-image: url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png); background-size: 300px;
background-repeat: repeat;
}
.wa-message-received {
display: flex;
justify-content: flex-start;
margin-bottom: 10px;
}
.wa-message-bubble {
background: white;
color: #111b21;
padding: 8px 12px;
border-radius: 0 12px 12px 12px;
font-size: 14px;
line-height: 1.4;
position: relative;
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
max-width: 85%;
} .wa-message-bubble::before {
content: "";
position: absolute;
top: 0;
left: -8px;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: white;
border-right-color: white;
border-bottom: 0;
border-left: 0;
}
.wa-time {
display: block;
text-align: right;
font-size: 10px;
color: #8696a0;
margin-top: 4px;
margin-bottom: -4px;
margin-right: -4px;
} .wa-footer-input {
background: #f0f2f5;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.wa-input {
flex: 1;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
outline: none;
background: white;
}
.wa-send-btn-icon {
background: none;
border: none;
color: #8696a0;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.wa-send-btn-icon:hover {
color: #008069;
}
.wa-input:not(:placeholder-shown)+.wa-send-btn-icon {
color: #008069;
}
.login-box {
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
padding: 40px;
max-width: 400px;
width: 100%;
box-shadow: var(--dspanel-shadow);
}
.login-box h2 {
margin: 0 0 8px;
text-align: center;
}
.login-box>p {
color: var(--dspanel-text-muted);
text-align: center;
margin: 0 0 24px;
}
.login-form .form-group {
margin-bottom: 20px;
}
.login-form input {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
transition: border-color 0.2s;
}
.login-form input:focus {
outline: none;
border-color: var(--dspanel-primary);
}
.login-error {
background: #fee2e2;
color: #991b1b;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
} .dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--dspanel-card-bg);
border-radius: 8px;
margin-bottom: 24px;
}
.dashboard-header p {
margin: 0;
}
.dashboard-empty {
text-align: center;
padding: 80px 20px;
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
}
.dashboard-empty svg {
color: var(--dspanel-text-muted);
margin-bottom: 24px;
}
.dashboard-empty h3 {
margin: 0 0 8px;
}
.dashboard-empty p {
color: var(--dspanel-text-muted);
margin: 0 0 24px;
}
.dashboard-info {
margin-bottom: 24px;
padding: 16px;
background: var(--dspanel-card-bg);
border-radius: 8px;
}
.accesses-grid {
display: grid;
gap: 24px;
}
.access-card {
background: var(--dspanel-card-bg);
border-radius: var(--dspanel-radius);
padding: 24px;
box-shadow: var(--dspanel-shadow);
}
.access-card.expired {
opacity: 0.7;
}
.access-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.access-thumb {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
}
.access-title h3 {
margin: 0 0 4px;
font-size: 18px;
}
.access-status {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.access-status.active {
background: #d1fae5;
color: #065f46;
}
.access-status.expired {
background: #fee2e2;
color: #991b1b;
}
.access-dates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 16px;
padding: 16px;
background: var(--dspanel-bg);
border-radius: 8px;
margin-bottom: 20px;
}
.date-item {
text-align: center;
}
.date-label {
display: block;
font-size: 11px;
color: var(--dspanel-text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.date-value {
font-weight: 600;
}
.days-left .date-value {
color: var(--dspanel-primary);
}
.access-credentials h4 {
font-size: 14px;
margin: 0 0 12px;
color: var(--dspanel-text-muted);
}
.credential-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: var(--dspanel-bg);
border-radius: 8px;
margin-bottom: 8px;
}
.credential-label {
font-size: 13px;
font-weight: 600;
min-width: 80px;
}
.credential-value {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.credential-input {
flex: 1;
background: transparent;
border: none;
font-size: 14px;
color: var(--dspanel-text);
padding: 0;
}
.btn-copy,
.btn-toggle {
background: none;
border: none;
cursor: pointer;
color: var(--dspanel-text-muted);
padding: 4px;
border-radius: 4px;
transition: color 0.2s;
}
.btn-copy:hover,
.btn-toggle:hover {
color: var(--dspanel-primary);
} .dspanel-footer {
background: linear-gradient(135deg, var(--dspanel-primary) 0%, var(--dspanel-secondary) 100%);
color: white;
padding: 60px 0 30px;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-logo {
height: 36px;
margin-bottom: 16px;
filter: brightness(0) invert(1);
}
.footer-logo-text {
font-size: 20px;
font-weight: 700;
}
.footer-desc {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.dspanel-footer h4,
.dspanel-footer h2,
.dspanel-footer h3,
.dspanel-footer .widget-title {
color: white !important; font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 16px;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 8px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
.whatsapp-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: white;
text-decoration: none;
padding: 10px 16px;
background: #25d366;
border-radius: 6px;
font-weight: 500;
transition: background 0.2s;
}
.whatsapp-link:hover {
background: #128c7e;
}
.footer-terms {
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 30px;
}
.footer-terms p {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.7;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
margin: 0;
} @media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
}
.modal-product {
flex-direction: column;
align-items: center;
text-align: center;
}
.modal-meta {
grid-template-columns: 1fr;
}
.payment-methods {
grid-template-columns: 1fr;
}
} .dspanel-binance-payment {
text-align: center;
}
.dspanel-binance-payment h3 {
margin: 0 0 20px;
}
.payment-summary {
background: var(--dspanel-bg);
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
text-align: left;
}
.payment-summary p {
margin: 4px 0;
font-size: 14px;
}
.qr-code {
margin: 20px 0;
}
.qr-code img {
border-radius: 8px;
box-shadow: var(--dspanel-shadow);
}
.wallet-address {
margin: 20px 0;
}
.wallet-address label {
display: block;
font-size: 13px;
color: var(--dspanel-text-muted);
margin-bottom: 8px;
}
.address-copy {
display: flex;
gap: 8px;
}
.address-copy input {
flex: 1;
padding: 12px;
font-size: 12px;
border: 2px solid var(--dspanel-border);
border-radius: 6px;
font-family: monospace;
}
.copy-btn {
padding: 12px 16px;
background: var(--dspanel-primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.instructions {
text-align: left;
margin: 20px 0;
}
.instructions h4 {
margin: 0 0 8px;
font-size: 14px;
}
.instructions p {
color: var(--dspanel-text-muted);
font-size: 14px;
line-height: 1.7;
}
.dspanel-binance-payment .notice,
.dspanel-whatsapp-payment .notice {
background: #fef3c7;
color: #92400e;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
margin-top: 16px;
} .dspanel-whatsapp-payment {
text-align: center;
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: #25d366;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
margin: 16px 0;
transition: background 0.2s;
}
.whatsapp-btn:hover {
background: #128c7e;
color: white;
} .stripe-elements-container {
margin-top: 12px;
}
.stripe-card-element {
padding: 14px 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
background: white;
transition: border-color 0.2s;
}
.stripe-card-element:focus-within,
.stripe-card-element.StripeElement--focus {
border-color: var(--dspanel-primary);
}
.stripe-card-element.StripeElement--invalid {
border-color: var(--dspanel-error);
}
.stripe-errors {
color: var(--dspanel-error);
font-size: 13px;
margin-top: 8px;
min-height: 20px;
} .quantity-selector-group {
background: var(--dspanel-bg);
padding: 16px;
border-radius: var(--dspanel-radius);
margin-bottom: 16px;
}
.quantity-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 12px;
}
.qty-btn {
width: 44px;
height: 44px;
border: 2px solid var(--dspanel-border);
border-radius: 50%;
background: white;
font-size: 20px;
font-weight: bold;
color: var(--dspanel-primary);
cursor: pointer;
transition: all 0.2s;
}
.qty-btn:hover {
background: var(--dspanel-primary);
color: white;
border-color: var(--dspanel-primary);
}
.qty-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.qty-value {
font-size: 28px;
font-weight: bold;
min-width: 60px;
text-align: center;
color: var(--dspanel-primary);
}
.stock-info {
text-align: center;
font-size: 13px;
color: var(--dspanel-text-muted);
margin-top: 12px;
margin-bottom: 0;
}
.stock-info.low-stock {
color: var(--dspanel-warning);
}
.stock-info.out-of-stock {
color: var(--dspanel-error);
} .price-summary {
background: white;
border: 2px solid var(--dspanel-border);
border-radius: var(--dspanel-radius);
padding: 16px;
margin-bottom: 16px;
}
.price-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.price-row:not(:last-child) {
border-bottom: 1px solid var(--dspanel-border);
}
.total-row {
font-size: 18px;
color: var(--dspanel-primary);
padding-top: 12px;
border-top: 2px solid var(--dspanel-primary);
}
.savings-value {
color: var(--dspanel-success);
font-weight: bold;
} .dspanel-header {
background: #fff;
border-bottom: 1px solid var(--dspanel-border);
padding: 12px 0;
margin-bottom: -1px; position: relative;
z-index: 10;
}
.dspanel-nav {
display: flex;
gap: 24px;
justify-content: flex-end;
}
.dspanel-nav a {
color: var(--dspanel-text);
font-weight: 500;
text-decoration: none;
font-size: 14px;
transition: color 0.2s;
}
.dspanel-nav a:hover {
color: var(--dspanel-primary);
} .dspanel-extra-content {
padding: 80px 0;
background: #fff;
border-bottom: 1px solid var(--dspanel-border);
}
.extra-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.extra-text h2 {
font-size: 36px;
font-weight: 700;
color: var(--dspanel-text);
margin-bottom: 24px;
line-height: 1.2;
}
.extra-body {
color: var(--dspanel-text-muted);
font-size: 18px;
line-height: 1.6;
}
.extra-image img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.dspanel-extra-content {
padding: 40px 0;
}
.extra-content-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.extra-text h2 {
font-size: 28px;
}
.extra-body {
font-size: 16px;
}
} .dspanel-search-wrapper {
margin-bottom: 40px;
text-align: center;
}
.dspanel-search-input {
width: 100%;
max-width: 500px;
padding: 16px 24px;
border-radius: 12px;
border: 2px solid var(--dspanel-border);
font-size: 16px;
transition: all 0.2s;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat;
background-position: left 16px center;
background-size: 20px;
padding-left: 48px;
}
.dspanel-search-input:focus {
border-color: var(--dspanel-primary);
box-shadow: 0 0 0 4px var(--dspanel-primary-light);
outline: none;
} .star-rating-input {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
}
.star-rating-input input {
display: none;
}
.star-rating-input label {
font-size: 28px;
color: #cbd5e1;
cursor: pointer;
transition: color 0.1s;
line-height: 1;
}
.star-rating-input input:checked~label,
.star-rating-input label:hover,
.star-rating-input label:hover~label {
color: #fbbf24;
}
.dspanel-rating {
display: flex;
align-items: center;
gap: 6px;
} .credentials-table {
margin-top: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.credentials-table th {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.credentials-table td {
color: #1f2937;
}
.btn-copy-simple:hover {
color: #3b82f6 !important;
transform: scale(1.1);
transition: all 0.2s ease;
}
.btn-copy-simple:active {
transform: scale(0.95);
} .modal-container.small-modal {
max-width: 450px;
}
.modal-container.small-modal .modal-content {
padding: 30px;
}
.modal-header h3 {
margin: 0;
font-size: 20px;
} .binance-pay-details {
padding: 10px 0;
}
.binance-pay-details h4 {
margin: 0 0 10px;
color: var(--dspanel-primary);
font-size: 20px;
}
.binance-pay-details .order-ref {
color: var(--dspanel-text-muted);
font-size: 14px;
margin-bottom: 20px;
}
.binance-info-box {
background: #f8fafc;
border: 1px solid var(--dspanel-border);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.info-item {
margin-bottom: 15px;
}
.info-item:last-child {
margin-bottom: 0;
}
.info-item label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--dspanel-text-muted);
margin-bottom: 4px;
font-weight: 600;
}
.info-item code {
display: block;
background: white;
padding: 10px;
border: 1px dashed var(--dspanel-primary);
border-radius: 6px;
font-family: monospace;
font-size: 14px;
color: var(--dspanel-text);
word-break: break-all;
}
.binance-instructions {
margin-bottom: 25px;
font-size: 15px;
line-height: 1.6;
}
.binance-instructions h5 {
margin: 0 0 10px;
font-size: 16px;
font-weight: 700;
}
.binance-footer {
text-align: center;
border-top: 1px solid var(--dspanel-border);
padding-top: 20px;
}
.btn-whatsapp {
background: #25D366 !important;
color: white !important;
width: 100%;
margin-top: 15px;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
border-radius: 8px;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.btn-whatsapp:hover {
background: #128c7e !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:active {
transform: translateY(0);
} .dspanel-support {
padding: 80px 0;
background: var(--dspanel-bg);
}
.support-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.support-info h2 {
margin-bottom: 24px;
text-align: left;
}
.support-features {
margin-top: 32px;
display: grid;
gap: 20px;
}
.s-feature {
padding: 16px;
background: var(--dspanel-card-bg);
border-radius: 8px;
border-left: 4px solid var(--dspanel-primary);
}
.s-feature strong {
display: block;
color: var(--dspanel-primary);
font-size: 14px;
margin-bottom: 4px;
}
.support-form-wrapper {
background: var(--dspanel-card-bg);
padding: 40px;
border-radius: var(--dspanel-radius);
box-shadow: var(--dspanel-shadow-lg);
}
.support-form .form-group label {
font-weight: 500;
}
.dspanel-input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
font-family: inherit;
font-size: 15px;
transition: all 0.2s;
}
.dspanel-input:focus {
outline: none;
border-color: var(--dspanel-primary);
}
.form-response.success {
color: var(--dspanel-success);
font-weight: 600;
}
.form-response.error {
color: var(--dspanel-error);
font-weight: 600;
}
@media (max-width: 768px) {
.support-grid {
grid-template-columns: 1fr;
gap: 40px;
}
} .dspanel-phone-group {
display: flex;
gap: 10px;
align-items: center;
position: relative;
}
.dspanel-custom-select {
position: static; width: 38%; max-width: 140px; }
.selected-flag {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
font-size: 20px;
border: 2px solid var(--dspanel-border);
border-radius: 8px;
background-color: white;
cursor: pointer;
transition: all 0.2s;
height: 52px;
color: var(--dspanel-text); z-index: 101; }
.selected-flag:hover {
border-color: var(--dspanel-primary);
}
.selected-flag .arrow-icon {
font-size: 10px;
color: var(--dspanel-text-muted);
margin-left: 6px;
}
.country-list {
position: absolute;
top: calc(100% + 4px); left: 0;
width: 100%;  max-height: 250px;
overflow-y: auto;
background: white;
border: 1px solid var(--dspanel-border);
border-radius: 8px;
box-shadow: var(--dspanel-shadow-lg);
z-index: 99999; margin-top: 0; scrollbar-width: thin;
scrollbar-color: var(--dspanel-border) transparent;
}
.country-list::-webkit-scrollbar {
width: 6px;
}
.country-list::-webkit-scrollbar-thumb {
background-color: var(--dspanel-border);
border-radius: 3px;
}
.country-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid var(--dspanel-border);
transition: background 0.2s;
}
.country-option:last-child {
border-bottom: none;
}
.country-option:hover {
background: var(--dspanel-bg);
}
.country-option.selected {
background: rgba(59, 130, 246, 0.1);
font-weight: 500;
}
.country-flag {
font-size: 20px;
}
.country-name {
flex: 1;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.country-dial {
font-size: 12px;
color: var(--dspanel-text-muted);
background: var(--dspanel-bg);
padding: 2px 6px;
border-radius: 4px;
}
.dspanel-phone-group input {
flex: 1;
} .dspanel-category-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
padding: 0 10px;
}
.category-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e2e8f0;
cursor: pointer;
padding: 12px 20px;
min-width: 80px;
border-radius: 12px;
transition: all 0.3s ease;
color: var(--dspanel-text-muted, #64748b);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.category-tab:hover {
background: rgba(0, 0, 0, 0.03);
color: var(--dspanel-primary, #3b82f6);
}
.category-tab.active {
background: white;
color: var(--dspanel-primary, #3b82f6);
border-color: var(--dspanel-primary, #3b82f6);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-2px);
font-weight: 600;
}
.tab-icon {
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.tab-icon svg {
width: 24px;
height: 24px;
stroke-width: 2;
}
.tab-label {
font-size: 0.9rem;
font-weight: 500;
} .services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.service-wrapper {
display: block; transition: all 0.3s ease;
} .service-wrapper.hidden {
display: none;
} .service-wrapper.fade-in {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}