:root {
   /* Brand / theme bindings (respect Astra if present) */
   --wpc-primary: var(--ast-global-color-0, #046bd2);
   --wpc-primary-hover: var(--ast-global-color-1, #045cb4);

   /* Core palette */
   --wpc-white: var(--ast-global-color-4, #ffffff);
   --wpc-black: var(--ast-global-color-8, #000000);

   /* Accent */
   --wpc-accent: var(--ast-global-color-0, #046bd2);
   --wpc-accent-rgb: 4, 107, 210;

   /* Success */
   --wpc-success: #28a745;
   --wpc-success-rgb: 40, 167, 69;
   --wpc-success-bg: #d4edda;
   --wpc-success-border: #c3e6cb;
   --wpc-success-text: #155724;

   /* Error */
   --wpc-error: #dc3545;
   --wpc-error-bg: #f8d7da;
   --wpc-error-border: #f5c6cb;
   --wpc-error-text: #a3202c;

   /* Warning */
   --wpc-warning-bg: #fff3cd;
   --wpc-warning-border: #ffeaa7;
   --wpc-warning-text: #856404;

   /* Info */
   --wpc-info-bg: #e7f3ff;
   --wpc-info-border: #b8daff;
   --wpc-info-text: #004085;

   /* Greys */
   --wpc-gray-100: #f8f9fa;
   --wpc-gray-150: #f3f3f3; /* for spinner base */
   --wpc-gray-200: #e0e0e0;
   --wpc-gray-300: #eeeeee;
   --wpc-gray-400: #cccccc;
   --wpc-gray-500: #999999;
   --wpc-gray-600: #666666;
   --wpc-gray-700: #555555;
   --wpc-gray-800: #333333;

   /* Overlays / shadows */
   --wpc-overlay: rgba(0, 0, 0, 0.6);
   --wpc-shadow-rgb: 0, 0, 0;
}

/* Кнопка "Купить в кредит" */
.single-product.woocommerce-js div.product form.cart {
   display: flex;
   flex-wrap: wrap;
   column-gap: 15px;
   align-items: baseline;
   margin-bottom: 1em;
}

.single-product.woocommerce-js div.product form.cart > * {
   margin-bottom: 0;
}

body.woocommerce-js div.product form.cart::after,
body.woocommerce-js div.product form.cart::before {
   content: none;
}

.wpc-credit-button {
   background: transparent;
   border: solid 1px var(--wpc-primary);
   color: var(--wpc-primary);
   padding: 10px 20px;
   font-size: 16px;
   font-weight: 600;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.wpc-credit-button:hover {
   background: var(--wpc-primary-hover);
   color: var(--wpc-white);
   text-decoration: none;
}

.wpc-credit-button:active {
   transform: translateY(0);
}

.wpc-credit-button::before {
   content: '💳';
   position: relative;
   top: -3px;
   margin-right: 8px;
}

/* Модальное окно */
.wpc-modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--wpc-overlay);
   z-index: 9999;
   padding: 20px;
   box-sizing: border-box;
}

.wpc-modal-content {
   background: var(--wpc-white);
   border-radius: 8px;
   max-width: 500px;
   width: 100%;
   margin: 20px auto;
   max-height: 90vh;
   overflow-y: auto;
   position: relative;
   box-shadow: 0 10px 25px rgba(var(--wpc-shadow-rgb), 0.2);
}

.wpc-modal-header {
   padding: 20px 30px;
   border-bottom: 1px solid var(--wpc-gray-200);
   background: var(--wpc-gray-100);
   border-radius: 8px 8px 0 0;
}

.wpc-modal-overlay .wpc-modal-header h2 {
   margin: 0;
   color: var(--wpc-gray-800);
   font-size: 24px;
}

.wpc-modal-close {
   position: absolute;
   top: 15px;
   right: 20px;
   padding: 0;
   border: none;
   font-size: 22px;
   cursor: pointer;
   width: 32px;
   height: 32px;
   display: grid;
   align-items: center;
   padding-bottom: 4px;
   transition: all 0.2s ease;
}

.wpc-modal-body {
   padding: 30px;
}

/* Блокировка прокрутки body при открытом модальном окне */
body.wpc-modal-open {
   overflow: hidden;
}

/* Форма */
.wpc-credit-form {
   display: grid;
   gap: 20px;
}

.wpc-credit-form > * {
   display: grid;
   gap: 10px;
}

.wpc-form-section {
   margin-bottom: 0;
}

.wpc-form-section h3 {
   margin: 0;
   color: var(--wpc-gray-800);
   font-size: 18px;
}

.wpc-form-group {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
}

.wpc-form-group label {
   display: block;
   margin-bottom: 5px;
   font-weight: 600;
   color: var(--wpc-gray-700);
}

.wpc-form-group input,
.wpc-form-group select,
.wpc-form-group textarea {
   width: 100%;
   padding: 12px 15px;
   border: 2px solid var(--wpc-gray-200);
   border-radius: 4px;
   font-size: 16px;
   transition: border-color 0.3s ease;
   box-sizing: border-box;
}

.wpc-form-group input:focus,
.wpc-form-group select:focus,
.wpc-form-group textarea:focus {
   outline: none;
   border-color: var(--wpc-accent);
   box-shadow: 0 0 0 3px rgba(var(--wpc-accent-rgb), 0.1);
}

.prefix-error {
   color: var(--wpc-error-text);
}

#wpc-calculator-result p {
   margin-bottom: 0;
}

/* Калькулятор кредита */
.wpc-calculator-results {
   background: var(--wpc-gray-100);
   border: 1px solid var(--wpc-gray-200);
   border-radius: 6px;
   padding: 20px;
}

.wpc-calc-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid var(--wpc-gray-300);
}

.wpc-calc-row:last-child {
   border-bottom: none;
}

.wpc-calc-label {
   font-weight: 500;
   color: var(--wpc-gray-700);
}

.wpc-calc-value {
   font-weight: 600;
   color: var(--wpc-gray-800);
}

.wpc-calc-highlight {
   background: rgba(var(--wpc-accent-rgb), 0.1);
   margin: 0 -10px;
   padding: 12px 10px;
   border-radius: 4px;
}

.wpc-calc-highlight .wpc-calc-value {
   color: var(--wpc-accent);
   font-size: 18px;
}

.wpc-calc-total {
   font-size: 16px;
   font-weight: 700;
   background: rgba(var(--wpc-success-rgb), 0.1);
   margin: 5px -10px 0;
   padding: 12px 10px;
   border-radius: 4px;
}

.wpc-calc-total .wpc-calc-value {
   color: var(--wpc-success);
}

.wpc-calc-overpay .wpc-calc-value {
   color: var(--wpc-error);
}

/* Загрузка документов */
.wpc-document-upload {
   grid-row: 1 / span 1;
   grid-column: 1 / span 1;
   border: 2px dashed var(--wpc-gray-200);
   border-radius: 6px;
   padding: 20px 30px;
   text-align: center;
   background: #fafafa;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative;
}

.wpc-document-upload:hover {
   border-color: var(--wpc-accent);
   background: rgba(var(--wpc-accent-rgb), 0.05);
}

.wpc-document-upload.dragover {
   border-color: var(--wpc-accent);
   background: rgba(var(--wpc-accent-rgb), 0.1);
}

.wpc-document-upload input[type='file'] {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   width: 100%;
   height: 100%;
   cursor: pointer;
   padding: 0;
   border: none;
}

.wpc-upload-icon {
   font-size: 48px;
   line-height: 0;
   color: var(--wpc-gray-400);
   margin-bottom: 15px;
   display: block;
}

.wpc-upload-text {
   color: var(--wpc-gray-600);
   font-size: 16px;
   margin-bottom: 10px;
}

.wpc-upload-hint {
   color: var(--wpc-gray-500);
   font-size: 14px;
}

/* Предпросмотр документов */
.wpc-document-preview {
   grid-row: 1 / span 1;
   grid-column: 1 / span 1;
   display: grid;
   gap: 15px;
}

.wpc-doc-preview-item {
   position: relative;
   border: 1px solid var(--wpc-gray-200);
   border-radius: 6px;
   overflow: hidden;
   background: var(--wpc-white);
}

.wpc-doc-preview-item img {
   width: 100%;
   height: 120px;
   object-fit: cover;
   display: block;
}

.wpc-doc-info {
   padding: 10px;
   background: var(--wpc-gray-100);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.wpc-doc-name {
   font-size: 12px;
   color: var(--wpc-gray-600);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
   margin-right: 10px;
}

.wpc-remove-doc {
   background: var(--wpc-error);
   color: var(--wpc-white);
   border: none;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   padding: 0;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease;
}

.wpc-remove-doc:hover {
   background: #c82333; /* slightly darker; could also be another var if needed */
}

/* OTP форма */
.wpc-otp-form {
   display: none;
   text-align: center;
}

.wpc-otp-info {
   background: var(--wpc-info-bg);
   border: 1px solid var(--wpc-info-border);
   border-radius: 6px;
   padding: 15px;
   margin-top: 10px;
   margin-bottom: 20px;
   color: var(--wpc-info-text);
}

.wpc-otp-input {
   font-size: 24px;
   text-align: center;
   letter-spacing: 5px;
   font-weight: bold;
   max-width: 200px;
   margin: 0 auto 20px;
}

.wpc-otp-actions {
   display: grid;
   gap: 15px;
   justify-content: center;
}

/* Кнопки */
.wpc-button {
   background: var(--wpc-primary);
   color: var(--wpc-white);
   border: none;
   padding: 12px 24px;
   font-size: 16px;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   transition: all 0.3s ease;
   font-weight: 600;
}

.wpc-button:hover {
   background: var(--wpc-primary-hover);
   color: var(--wpc-white);
   text-decoration: none;
}

.wpc-button:disabled {
   background: var(--wpc-gray-400);
   cursor: not-allowed;
   transform: none;
}

.wpc-button-secondary {
   background: #6c757d;
}

.wpc-button-secondary:hover {
   background: #5a6268;
}

.wpc-button-outline {
   background: transparent;
   border: 2px solid var(--wpc-accent);
   color: var(--wpc-accent);
}

.wpc-button-outline:hover {
   background: var(--wpc-accent);
   color: var(--wpc-white);
}

/* Уведомления */
.wpc-notices.massage_ {
   margin-bottom: 20px;
}

.wpc-notice {
   padding: 12px 15px;
   border-radius: 4px;
   margin-bottom: 10px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.wpc-notice p {
   margin: 0;
   flex: 1;
}

.wpc-notice-success {
   background: var(--wpc-success-bg);
   border: 1px solid var(--wpc-success-border);
   color: var(--wpc-success-text);
}

.wpc-notice-error {
   background: var(--wpc-error-bg);
   border: 1px solid var(--wpc-error-border);
   color: var(--wpc-error-text);
}

.wpc-notice-warning {
   background: var(--wpc-warning-bg);
   border: 1px solid var(--wpc-warning-border);
   color: var(--wpc-warning-text);
}

.wpc-notice-close {
   background: none;
   border: none;
   font-size: 18px;
   cursor: pointer;
   color: inherit;
   opacity: 0.7;
   margin-left: 15px;
}

.wpc-notice-close:hover {
   opacity: 1;
}

/* Модальное окно успеха */
.wpc-success-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--wpc-overlay);
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.wpc-success-modal-content {
   background: var(--wpc-white);
   border-radius: 8px;
   padding: 40px;
   text-align: center;
   max-width: 500px;
   width: 100%;
   box-shadow: 0 10px 25px rgba(var(--wpc-shadow-rgb), 0.2);
}

.wpc-success-icon {
   font-size: 64px;
   color: var(--wpc-success);
   margin-bottom: 20px;
   animation: success-bounce 0.6s ease-out;
}

.wpc-success-modal-content h3 {
   color: var(--wpc-gray-800);
   margin-bottom: 15px;
   font-size: 24px;
}

.wpc-success-modal-content p {
   color: var(--wpc-gray-600);
   margin-bottom: 25px;
   line-height: 1.6;
}

@keyframes success-bounce {
   0% {
      transform: scale(0);
   }
   50% {
      transform: scale(1.1);
   }
   100% {
      transform: scale(1);
   }
}

/* Валидация телефона */
.wpc-invalid-prefix {
   border-color: var(--wpc-error) !important;
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important; /* could be derived from error rgb if needed */
}

.wpc-valid-prefix {
   border-color: var(--wpc-success) !important;
   box-shadow: 0 0 0 3px rgba(var(--wpc-success-rgb), 0.1) !important;
}

/* Анимация загрузки */
.wpc-loading {
   text-align: center;
   padding: 20px;
   color: var(--wpc-gray-600);
}

.wpc-loading::after {
   content: '';
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid var(--wpc-gray-150);
   border-top: 3px solid var(--wpc-accent);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-left: 10px;
   vertical-align: middle;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* Адаптивность */
@media (max-width: 768px) {
   .wpc-modal-content {
      margin: 10px auto;
      max-height: 95vh;
   }

   .wpc-modal-body {
      padding: 20px;
   }

   .wpc-modal-header {
      padding: 15px 20px;
   }

   .wpc-modal-header h2 {
      font-size: 20px;
   }

   .wpc-calc-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
   }

   .wpc-calc-label,
   .wpc-calc-value {
      width: 100%;
   }

   .wpc-otp-actions {
      flex-direction: column;
   }

   .wpc-document-upload {
      padding: 20px;
   }

   .wpc-upload-icon {
      font-size: 36px;
   }

   .wpc-doc-preview-item img {
      height: 100px;
   }

   .wpc-success-modal-content {
      padding: 30px 20px;
   }

   .wpc-success-icon {
      font-size: 48px;
   }
}

@media (max-width: 480px) {
   .wpc-modal-overlay {
      padding: 10px;
   }

   .wpc-form-group input,
   .wpc-form-group select {
      font-size: 16px; /* Предотвращает зум на iOS */
   }

   .wpc-credit-button {
      width: 100%;
      text-align: center;
   }
}