/**
 * Lanys Static Pages Styles
 * Стили для статичных страниц портала
 * 
 * Использует CSS-переменные из темы lanys.css
 */

/* =============================================================================
   CSS VARIABLES (fallback если тема не загружена)
   ============================================================================= */
:root {
    --static-body-bg: #1f1b46;
    --static-panel-bg: #2b2c5f;
    --static-text: #ffffff;
    --static-text-muted: #8283ac;
    --static-border: #3d3a6d;
    --static-accent: #6b5fdd;
    --static-success: #20e762;
    --static-success-text: #1f1b46;
}

/* =============================================================================
   CONTAINERS
   ============================================================================= */
.static-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--static-panel-bg);
    padding: 40px;
    border-radius: 12px;
}

.static-section {
    margin-bottom: 20px;
}

.static-section:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */
.static-title {
    font-size: 18pt;
    font-weight: 800;
    color: var(--static-text);
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.4;
}

.static-subtitle {
    font-size: 14pt;
    font-weight: 700;
    color: var(--static-text);
    margin-top: 25px;
    margin-bottom: 15px;
}

.static-text {
    font-size: 11pt;
    color: var(--static-text);
    margin-bottom: 12px;
    line-height: 1.6;
}

.static-text-intro {
    font-size: 12pt;
    color: var(--static-text);
    margin-bottom: 25px;
    line-height: 1.6;
}

.static-text-sm {
    font-size: 10pt;
    color: var(--static-text-muted);
    line-height: 1.6;
}

.static-text-bold {
    font-weight: 700;
    color: var(--static-text);
}

.static-text-accent {
    color: var(--static-accent);
}

.static-text-highlight {
    font-weight: 700;
}

.static-text-underline {
    text-decoration: underline;
}

/* Numbered list items */
.static-list-item {
    font-size: 11pt;
    color: var(--static-text);
    line-height: 1.6;
    margin-bottom: 15px;
}

.static-list-item strong {
    color: var(--static-accent);
}

.static-list-nested {
    margin-left: 30px;
    margin-top: 15px;
}

.static-list-nested .static-list-item {
    margin-bottom: 10px;
}

/* =============================================================================
   PACKAGES GRID (Adaptive Cards)
   ============================================================================= */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PACKAGE CARD
   ============================================================================= */
.package-card {
    background-color: var(--static-panel-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--static-border);
}

/* Card Header */
.package-header {
    padding: 20px 15px;
    text-align: center;
    background: linear-gradient(135deg, var(--static-accent) 0%, #8b7fef 100%);
}

.package-header--basic {
    background: linear-gradient(135deg, #6b5fdd 0%, #8b7fef 100%);
}

.package-header--advanced {
    background: linear-gradient(135deg, var(--static-success) 0%, #1cd357 100%);
}

.package-header--max {
    background: linear-gradient(135deg, #a595c9 0%, #8b7fef 100%);
}

.package-title {
    font-size: 16pt;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.package-header--advanced .package-title {
    color: var(--static-success-text);
}

.package-header--max .package-title {
    color: var(--static-success-text);
}

.package-period {
    font-size: 10pt;
    color: rgba(255, 255, 255, 0.9);
}

.package-header--advanced .package-period,
.package-header--max .package-period {
    color: rgba(31, 27, 70, 0.8);
}

/* Card Body */
.package-body {
    padding: 20px 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.package-deposit {
    font-size: 11pt;
    font-weight: 700;
    color: var(--static-text);
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--static-border);
}

/* Package Rows */
.package-row {
    margin-bottom: 15px;
}

.package-row:last-of-type {
    margin-bottom: 20px;
}

.package-row-label {
    font-size: 9pt;
    color: var(--static-text-muted);
    margin-bottom: 5px;
    text-align: center;
}

.package-row-value {
    font-size: 10pt;
    color: var(--static-text);
    text-align: center;
    line-height: 1.5;
}

/* Commission */
.package-commission {
    font-size: 14pt;
    font-weight: 700;
    color: var(--static-text);
    text-align: center;
}

.package-commission-currency {
    font-size: 10pt;
    font-weight: 600;
}

/* Card Footer */
.package-footer {
    padding: 15px;
    margin-top: auto;
}

/* =============================================================================
   LANYS BUTTONS (unified)
   ============================================================================= */
.lanys-btn {
    display: block;
    border: none;
    padding: 15px 20px;
    font-size: 11pt;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.4;
}

/* Success - зелёный радиальный градиент */
.lanys-btn--success {
    background: radial-gradient(circle at 0% 50%, #CEE969 0%, #1EBF56 100%);
    color: var(--static-success-text);
}

.lanys-btn--success:hover {
    background: radial-gradient(circle at 0% 50%, #def979 0%, #2ecf66 100%);
    transform: translateY(-1px);
}

.lanys-btn--success:active {
    background: radial-gradient(circle at 0% 50%, #bed959 0%, #0eaf46 100%);
    transform: translateY(0);
}

/* Primary - фиолетовый радиальный градиент */
.lanys-btn--primary {
    background: radial-gradient(circle at 0% 50%, #5B5C9D 0%, #43447F 100%);
    color: var(--static-text);
}

.lanys-btn--primary:hover {
    background: radial-gradient(circle at 0% 50%, #6b6cad 0%, #53548f 100%);
    transform: translateY(-1px);
}

.lanys-btn--primary:active {
    background: radial-gradient(circle at 0% 50%, #4b4c8d 0%, #33346f 100%);
    transform: translateY(0);
}

/* Secondary - приглушённый */
.lanys-btn--secondary {
    background-color: var(--static-border);
    color: var(--static-text);
}

.lanys-btn--secondary:hover {
    background-color: #4a4778;
    transform: translateY(-1px);
}

.lanys-btn--secondary:active {
    background-color: #3d3a6d;
    transform: translateY(0);
}

/* Size modifiers */
.lanys-btn--full {
    width: 100%;
}

.lanys-btn--fixed {
    width: 250px;
}

/* =============================================================================
   REFERRAL LINK
   ============================================================================= */
.ref-link-container {
    background-color: var(--static-body-bg);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--static-border);
    margin-top: 10px;
}

.ref-link-text {
    font-size: 11pt;
    color: var(--static-accent);
    word-break: break-all;
}

/* =============================================================================
   NOTICE / WARNING
   ============================================================================= */
.static-notice {
    font-size: 12pt;
    font-weight: 700;
    color: var(--static-success);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */
@media (max-width: 768px) {
    .static-container {
        padding: 25px 20px;
        border-radius: 8px;
    }
    
    .static-title {
        font-size: 16pt;
    }
    
    .static-subtitle {
        font-size: 13pt;
    }
}

@media (max-width: 480px) {
    .static-container {
        padding: 20px 15px;
    }
    
    .package-header {
        padding: 15px 10px;
    }
    
    .package-title {
        font-size: 14pt;
    }
    
    .lanys-btn--full {
        padding: 12px 15px;
        font-size: 11pt;
    }
}

/* =============================================================================
   DASHLETS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Balance Cards Dashlet
   ----------------------------------------------------------------------------- */
.balance-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.balance-card {
    background-color: var(--static-panel-bg);
    border-radius: 12px;
    padding: 25px 30px;
    border: 1px solid var(--static-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.balance-card-content {
    flex: 1;
    min-width: 0;
}

.balance-card-label {
    font-size: 11pt;
    color: var(--static-text-muted);
    margin-bottom: 8px;
}

.balance-card-value {
    font-size: 36pt;
    font-weight: 800;
    color: var(--static-text);
    line-height: 1.2;
}

.balance-card-currency {
    font-size: 14pt;
    color: var(--static-text-muted);
    margin-top: 5px;
}

.balance-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Contact ID Dashlet
   ----------------------------------------------------------------------------- */
.contact-id-container {
    /* контейнер уже существует */
}

.contact-id-card {
    background-color: var(--static-panel-bg);
    border-radius: 12px;
    padding: 25px 30px;
    border: 1px solid var(--static-border);
}

.contact-id-label {
    font-size: 11pt;
    color: var(--static-text-muted);
    margin-bottom: 8px;
}

.contact-id-value {
    font-size: 24pt;
    font-weight: 800;
    color: var(--static-text);
    line-height: 1.2;
}

.contact-id-empty {
    font-size: 14pt;
    color: var(--static-text-muted);
}

/* -----------------------------------------------------------------------------
   Dashlets Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .balance-card {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }
    
    .balance-card-content {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .balance-card-value {
        font-size: 32pt;
    }
    
    .balance-card-actions {
        width: 100%;
    }
    
    .lanys-btn--fixed {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .balance-card {
        padding: 15px;
    }
    
    .balance-card-value {
        font-size: 28pt;
    }
    
    .balance-card-label {
        font-size: 10pt;
    }
    
    .balance-card-currency {
        font-size: 12pt;
    }
    
    .lanys-btn--fixed {
        padding: 12px 15px;
        font-size: 10pt;
    }
    
    .contact-id-card {
        padding: 20px;
    }
    
    .contact-id-value {
        font-size: 20pt;
    }
}


.main-portal .dashlet:hover .panel-heading {
    display: none;
}

/* =============================================================================
   LANYS CUSTOM ICONS
   ============================================================================= */

/* Base icon styles */
.lanys-icon {
    display: inline-block;
    width: 1.5em !important;
    height: 1.5em !important;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon classes */
.lanys-icon-home {
    background-image: url('/client/custom/img/home.svg');
}

.lanys-icon-package {
    background-image: url('/client/custom/img/package.svg');
}

.lanys-icon-howto {
    background-image: url('/client/custom/img/how to.svg');
}

.lanys-icon-referal {
    background-image: url('/client/custom/img/referal.svg');
}

.lanys-icon-agreement {
    background-image: url('/client/custom/img/agreement.svg');
}

.lanys-icon-logo {
    background-image: url('/client/custom/img/logo.svg');
}