.modern-input{width:100%;padding:16px 20px;font-size:16px;font-weight:500;border:2px solid #e1e8ed;border-radius:12px;background:#fff;color:#2c3e50;transition:all .3s ease;box-shadow:0 2px 4px #0000000d;position:relative}.modern-input:focus{outline:none;border-color:#d63031;box-shadow:0 0 0 3px #d630311a;transform:translateY(-1px)}.modern-input:hover{border-color:#bdc3c7;box-shadow:0 4px 8px #0000001a}.modern-input::placeholder{color:#95a5a6;font-weight:400}.modern-input.error{border-color:#e74c3c;box-shadow:0 0 0 3px #e74c3c1a}.modern-input.error:focus{border-color:#c0392b;box-shadow:0 0 0 3px #c0392b1a}.modern-input.success{border-color:#27ae60;box-shadow:0 0 0 3px #27ae601a}.modern-input.success:focus{border-color:#2ecc71;box-shadow:0 0 0 3px #2ecc711a}:host ::ng-deep .mat-mdc-form-field{width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background:#fff;border-radius:12px;border:2px solid #e1e8ed;transition:all .3s ease;box-shadow:0 2px 4px #0000000d;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover{border-color:#bdc3c7;box-shadow:0 4px 8px #0000001a}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper.mat-focused{border-color:#d63031;box-shadow:0 0 0 3px #d630311a;transform:translateY(-1px)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:16px 20px;min-height:auto}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{padding:0;min-height:auto}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-input-element{font-size:16px;font-weight:500;color:#2c3e50;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-input-element::placeholder{color:#95a5a6;font-weight:400}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix textarea.mat-mdc-input-element{min-height:120px;resize:vertical}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix{padding-right:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#7f8c8d;font-weight:600;font-size:14px;transform:translateY(-1.5em) scale(.75);transform-origin:left top}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label.mat-mdc-floating-label.mat-mdc-form-field-floating-label{transform:translateY(-1.5em) scale(.75)}:host ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#d63031}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-error-wrapper{padding:0;margin-top:8px}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-error-wrapper .mat-mdc-form-field-error{color:#e74c3c;font-size:12px;font-weight:500}.modern-button{padding:14px 28px;font-size:16px;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden}.modern-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;transition:left .3s ease;z-index:-1}.modern-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0003}.modern-button:hover:before{left:0}.modern-button:active{transform:translateY(0)}.modern-button.primary{background:linear-gradient(45deg,#d63031,#f39c12);color:#fff}.modern-button.primary:before{background:linear-gradient(45deg,#c0392b,#e67e22)}.modern-button.secondary{background:linear-gradient(45deg,#95a5a6,#7f8c8d);color:#fff}.modern-button.secondary:before{background:linear-gradient(45deg,#8a9a9b,#6f7c7d)}.modern-button.success{background:linear-gradient(45deg,#27ae60,#2ecc71);color:#fff}.modern-button.success:before{background:linear-gradient(45deg,#229954,#28b463)}.modern-button.danger{background:linear-gradient(45deg,#e74c3c,#c0392b);color:#fff}.modern-button.danger:before{background:linear-gradient(45deg,#d63031,#a93226)}.modern-button.warning{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff}.modern-button.warning:before{background:linear-gradient(45deg,#e67e22,#d35400)}.modern-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.modern-button:disabled:hover{transform:none;box-shadow:none}.modern-select{width:100%;padding:12px 20px;font-size:16px;font-weight:500;border:2px solid #e1e8ed;border-radius:12px;background:#fff;color:#2c3e50;transition:all .3s ease;box-shadow:0 2px 4px #0000000d;cursor:pointer}.modern-select:focus{outline:none;border-color:#d63031;box-shadow:0 0 0 3px #d630311a;transform:translateY(-1px)}.modern-select:hover{border-color:#bdc3c7;box-shadow:0 4px 8px #0000001a}.modern-textarea{width:100%;padding:16px 20px;font-size:16px;font-weight:500;border:2px solid #e1e8ed;border-radius:12px;background:#fff;color:#2c3e50;transition:all .3s ease;box-shadow:0 2px 4px #0000000d;resize:vertical;min-height:120px}.modern-textarea:focus{outline:none;border-color:#d63031;box-shadow:0 0 0 3px #d630311a;transform:translateY(-1px)}.modern-textarea:hover{border-color:#bdc3c7;box-shadow:0 4px 8px #0000001a}.modern-textarea::placeholder{color:#95a5a6;font-weight:400}.form-group{margin-bottom:24px}.form-group .form-label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:14px}.form-group .form-error{color:#e74c3c;font-size:12px;margin-top:4px;font-weight:500}.form-group .form-help{color:#7f8c8d;font-size:12px;margin-top:4px}.form-group .input-wrapper{position:relative}.form-group .input-wrapper .input-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#95a5a6;font-size:20px;width:20px;height:20px;pointer-events:none;transition:color .3s ease}.form-group .input-wrapper .modern-input:focus+.input-icon,.form-group .input-wrapper .modern-select:focus+.input-icon{color:#d63031}.form-group .input-wrapper .modern-input.error+.input-icon{color:#e74c3c}.error-message{background:linear-gradient(45deg,#fee,#fdd);color:#c0392b;padding:14px;border-radius:10px;font-size:.9rem;border:2px solid #fadbd8;display:flex;align-items:center;gap:10px;font-weight:500}.error-message mat-icon{font-size:20px;width:20px;height:20px;color:#e74c3c}.page-container{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:20px}.modern-card{background:#fff;border-radius:16px;padding:30px;box-shadow:0 8px 32px #0000001a;transition:all .3s ease}.modern-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000026}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px}.loading-container .loading-spinner{color:#d63031}.empty-state{text-align:center;padding:40px 20px}.empty-state .empty-icon{font-size:4rem;width:4rem;height:4rem;color:#bdc3c7;margin-bottom:20px}.empty-state h3{font-size:1.5rem;color:#2c3e50;margin-bottom:10px}.empty-state p{color:#7f8c8d;margin:0}@media (max-width: 768px){.modern-input,.modern-select,.modern-textarea{font-size:16px}.modern-button{padding:12px 24px;font-size:14px}.form-group{margin-bottom:20px}}.page-header{background:#fff;border-radius:16px;padding:40px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a;text-align:center}.page-header .page-title{font-size:2.5rem;font-weight:700;color:#2c3e50;margin-bottom:15px;background:linear-gradient(45deg,#d63031,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header .page-subtitle{font-size:1.1rem;color:#7f8c8d;max-width:600px;margin:0 auto}.stats-section{background:#fff;border-radius:16px;padding:30px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a}.stats-section .stats-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.stats-section .stats-container .stat-item{display:flex;align-items:center;gap:15px}.stats-section .stats-container .stat-item mat-icon{font-size:32px;width:32px;height:32px;color:#d63031;background:linear-gradient(45deg,#d63031,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats-section .stats-container .stat-item .stat-info{display:flex;flex-direction:column}.stats-section .stats-container .stat-item .stat-info .stat-number{font-size:2rem;font-weight:700;color:#2c3e50}.stats-section .stats-container .stat-item .stat-info .stat-label{font-size:.9rem;color:#7f8c8d;text-transform:uppercase;letter-spacing:1px}.stats-section .stats-container .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.stats-section .stats-container .actions .view-toggle-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:.9rem}.stats-section .stats-container .actions .view-toggle-btn mat-icon{font-size:18px;width:18px;height:18px}.stats-section .stats-container .actions .form-group{margin-bottom:0;min-width:200px}.content-grid .container{max-width:1200px;margin:0 auto}.content-grid .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;margin-bottom:40px}.content-grid .grid.list-view{grid-template-columns:1fr}.content-grid .grid.list-view .grid-item{display:flex;gap:30px}.content-grid .grid.list-view .grid-item .item-image-container{flex-shrink:0;width:200px;height:200px}.content-grid .grid.list-view .grid-item .item-info{flex:1;display:flex;flex-direction:column;justify-content:space-between}.pagination-container{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #0000001a;display:flex;justify-content:center}@media (max-width: 768px){.page-header{padding:30px 20px}.page-header .page-title{font-size:2rem}.stats-section{padding:20px}.stats-section .stats-container,.stats-section .stats-container .actions{flex-direction:column;align-items:stretch}.stats-section .stats-container .actions .form-group{min-width:auto}.content-grid .grid{grid-template-columns:1fr;gap:20px}.content-grid .grid.list-view .grid-item{flex-direction:column}.content-grid .grid.list-view .grid-item .item-image-container{width:100%;height:200px}}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.flex-grow{flex-grow:1}.flex-shrink{flex-shrink:1}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.align-baseline{align-items:baseline}.flex-row-center{display:flex;flex-direction:row;align-items:center}.flex-row-between{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.flex-column-center{display:flex;flex-direction:column;align-items:center}.flex-center{display:flex;justify-content:center;align-items:center}.gap-5{gap:5px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.gap-25{gap:25px}.flex-20{flex:0 0 20%}.flex-80{flex:0 0 80%}@media (max-width: 768px){.flex-row-mobile{flex-direction:column}.flex-column-mobile{flex-direction:row}}.hero-section{background:linear-gradient(135deg,#d63031,#f39c12);padding:80px 0;text-align:center;color:#fff;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:#ffffff1a;background-size:cover}.hero-section .hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:0 20px}.hero-section .hero-title{font-size:3.5rem;font-weight:700;margin-bottom:20px;text-shadow:0 4px 8px rgba(0,0,0,.2)}@media (max-width: 768px){.hero-section .hero-title{font-size:2.5rem}}@media (max-width: 480px){.hero-section .hero-title{font-size:2rem}}.hero-section .hero-subtitle{font-size:1.3rem;margin-bottom:30px;opacity:.9}@media (max-width: 768px){.hero-section .hero-subtitle{font-size:1.1rem}}.hero-section .hero-actions{display:flex;gap:20px;justify-content:center;margin-bottom:40px}@media (max-width: 768px){.hero-section .hero-actions{flex-direction:column;align-items:center}}.hero-section .hero-stats{display:flex;justify-content:center;gap:60px;margin-top:40px}@media (max-width: 768px){.hero-section .hero-stats{gap:30px;flex-wrap:wrap}}.hero-section .hero-stats .stat-item{text-align:center}.hero-section .hero-stats .stat-item .stat-number{display:block;font-size:2.5rem;font-weight:700;margin-bottom:5px}@media (max-width: 768px){.hero-section .hero-stats .stat-item .stat-number{font-size:2rem}}.hero-section .hero-stats .stat-item .stat-label{font-size:1rem;opacity:.9}.cta-button{padding:12px 30px;font-size:1.1rem;font-weight:600;border-radius:25px;background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;border:none;transition:all .3s ease;box-shadow:0 4px 15px #f39c124d}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f39c1266}.cta-button mat-icon{margin-right:8px}.secondary-button{padding:12px 30px;font-size:1.1rem;font-weight:600;border-radius:25px;color:#fff;border:2px solid white;transition:all .3s ease}.secondary-button:hover{background:#fff;color:#d63031;transform:translateY(-2px)}.secondary-button mat-icon{margin-right:8px}.section{padding:80px 0}.section .container{max-width:1200px;margin:0 auto;padding:0 20px}.section .section-title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:50px;color:#2c3e50;position:relative}.section .section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(45deg,#d63031,#f39c12);border-radius:2px}.feature-card{text-align:center;padding:30px 20px;border-radius:15px;background:#f8f9fa;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.feature-card .feature-icon{font-size:3rem;width:3rem;height:3rem;color:#d63031;margin-bottom:20px}.feature-card .feature-title{font-size:1.3rem;font-weight:600;color:#2c3e50;margin-bottom:15px}.feature-card .feature-description{color:#7f8c8d;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}@media (max-width: 768px){.features-grid{grid-template-columns:1fr;gap:30px}}.newsletter-section{background:linear-gradient(135deg,#d63031,#f39c12);padding:60px 0;text-align:center;color:#fff}.newsletter-section .newsletter-content{max-width:600px;margin:0 auto;padding:0 20px}.newsletter-section .newsletter-title{font-size:2rem;font-weight:700;margin-bottom:15px}.newsletter-section .newsletter-subtitle{font-size:1.1rem;margin-bottom:30px;opacity:.9}.newsletter-section .newsletter-form{display:flex;gap:15px;align-items:flex-end}@media (max-width: 768px){.newsletter-section .newsletter-form{flex-direction:column;width:100%;max-width:400px}}.newsletter-section .newsletter-form .email-field{width:300px}@media (max-width: 768px){.newsletter-section .newsletter-form .email-field{width:100%}}.newsletter-section .newsletter-form .email-field ::ng-deep .mat-form-field-outline{color:#ffffff4d}.newsletter-section .newsletter-form .email-field ::ng-deep .mat-form-field-label{color:#fffc}.newsletter-section .newsletter-form .email-field ::ng-deep .mat-input-element{color:#fff}.newsletter-section .newsletter-form .email-field ::ng-deep .mat-icon{color:#fffc}.newsletter-section .newsletter-form .subscribe-btn{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;padding:12px 24px;border-radius:8px;font-weight:500}@media (max-width: 768px){.newsletter-section .newsletter-form .subscribe-btn{width:100%}}.newsletter-section .newsletter-form .subscribe-btn mat-icon{margin-right:8px}.newsletter-section .newsletter-form .subscribe-btn:hover{background:linear-gradient(45deg,#e67e22,#f39c12)}@media (max-width: 768px){.hero-section,.section{padding:60px 0}.section-title{font-size:2rem}}.table-col,.cart-hcol-1,.cart-col-1,.cart-hcol-2,.cart-col-2,.cart-hcol-3,.cart-col-3,.cart-hcol-4,.cart-col-4,.cart-hcol-5,.cart-col-5,.table-col-data,.table-col-header{padding:7px;font-size:18px;text-align:center}.table-col-header,.cart-hcol-1,.cart-hcol-2,.cart-hcol-3,.cart-hcol-4,.cart-hcol-5{font-weight:500;min-width:110px}.table-col-data,.cart-col-1,.cart-col-2,.cart-col-3,.cart-col-4,.cart-col-5{width:100px}.table-col-wide,.cart-hcol-2,.cart-col-2{min-width:250px}.table-row,.card-hrow,.card-row{background:#fff;padding:4px;border-bottom:1px solid #eee}.summary,.summary-header{padding:7px;font-size:18px;width:100px;text-align:center;background:#fff;border-bottom:1px solid #eee}.summary-header{padding:11px}.orderSummary{font-size:18px}.orderSummary div{margin-bottom:12px}.orderTotal{background:#fff;padding:15px;border-bottom:1px solid #eee;font-size:22px;font-weight:500}.orderTotalValue{font-size:24px;font-weight:700}.paymentNote{font-weight:700}.orderForm{width:400px}.errorMessage{color:red}.orderButton{font-size:22px;width:220px}.quantityInput{width:25px}.shipmentRadioButton{margin:15px 0;font-size:18px}.shipment-2{margin-left:10px;font-weight:bolder}:root{--primary-color: #d63031;--primary-light: #ff7675;--primary-dark: #c0392b;--accent-color: #f39c12;--accent-light: #fdcb6e;--accent-dark: #e67e22;--warn-color: #e74c3c;--warn-light: #fab1a0;--warn-dark: #c0392b;--background-color: #fafafa;--surface-color: #ffffff;--text-primary: rgba(0, 0, 0, .87);--text-secondary: rgba(0, 0, 0, .54);--text-disabled: rgba(0, 0, 0, .38);--shadow-light: 0 2px 4px rgba(0, 0, 0, .1);--shadow-medium: 0 4px 8px rgba(0, 0, 0, .15);--shadow-heavy: 0 8px 16px rgba(0, 0, 0, .2);--border-radius: 8px;--border-radius-large: 12px;--border-radius-small: 4px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px}html,body{height:100%;margin:0;font-family:Roboto,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-attachment:fixed;background-size:cover;background-repeat:no-repeat;color:#2c3e50}*{box-sizing:border-box}.cdk-overlay-container{position:fixed!important;z-index:1000!important}.cdk-overlay-pane{position:fixed!important}.mat-mdc-menu-panel{min-width:140px!important;border-radius:8px!important;box-shadow:0 4px 12px #00000026!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;margin-top:8px!important}.mat-mdc-menu-item{border-radius:4px!important;margin:4px 8px!important;min-height:36px!important;transition:all .3s ease!important}.mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.mat-mdc-button,.mat-mdc-raised-button,.mat-mdc-outlined-button{border-radius:20px!important;font-weight:600!important;transition:all .3s ease!important}.mat-mdc-button:hover,.mat-mdc-raised-button:hover,.mat-mdc-outlined-button:hover{transform:translateY(-2px)!important;box-shadow:0 4px 12px #0000001a!important}.mat-mdc-card{border-radius:16px!important;box-shadow:0 8px 25px #0000001a!important;transition:all .3s ease!important}.mat-mdc-card:hover{transform:translateY(-5px)!important;box-shadow:0 12px 35px #00000026!important}.mat-mdc-form-field,.mat-mdc-form-field .mat-mdc-form-field-flex{border-radius:12px!important}.mat-mdc-dialog-container{border-radius:16px!important;box-shadow:0 12px 35px #00000026!important}.mat-mdc-snack-bar-container{border-radius:12px!important;box-shadow:0 8px 25px #0000001a!important}.mat-mdc-table{border-radius:12px!important;overflow:hidden!important;box-shadow:0 4px 12px #0000001a!important}.primary-gradient{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.success-gradient{background:linear-gradient(45deg,#27ae60,#2ecc71);color:#fff}.warning-gradient{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff}.danger-gradient{background:linear-gradient(45deg,#e74c3c,#c0392b);color:#fff}.info-gradient{background:linear-gradient(45deg,#3498db,#2980b9);color:#fff}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#ffffff1a}.sidebar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff80}.flex-80::-webkit-scrollbar,.content::-webkit-scrollbar{width:8px}.flex-80::-webkit-scrollbar-track,.content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.flex-80::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}.flex-80::-webkit-scrollbar-thumb:hover,.content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}::selection{background:#667eea33;color:#2c3e50}*:focus{outline:2px solid #667eea;outline-offset:2px;border-radius:4px}a{color:#667eea;text-decoration:none;transition:all .3s ease}a:hover{color:#764ba2;text-decoration:underline}.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: #667eea}