/* ==========================================================================
    Cekonay - Page Mon Compte - Styles CSS
    @version 2.0.1
    ========================================================================== */

  /* Variables CSS */
  :root {
    --cekonay-primary: #764ba2;
    --cekonay-primary-dark: #5e3b81;
    --cekonay-secondary: #667eea;
    --cekonay-secondary-dark: #3f56bd;
    --cekonay-gradient: linear-gradient(to right, var(--cekonay-primary), var(--cekonay-secondary));
    --cekonay-success: #22c55e;
    --cekonay-error: #ef4444;
    --cekonay-warning: #fb923c;
    --cekonay-info: #3b82f6;

    /* Light mode */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-tertiary-init: #f3f4f6;
    --text-primary: #111827;
    --link-primary: #5e3b81;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  /* Dark mode */
  body.cekonay-dark-mode {
    --bg-primary: #030712;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-tertiary-init: #5d6777;
    --text-primary: #ffffff;
    --link-primary: #bfb6ec;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --border-color: #374151;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  }

  /* Base styles */
  .cekonay-account-wrapper {
    background-color: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: var(--font-system);
  }

  .cekonay-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 8.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
  }

  /* Header */
  .cekonay-header {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
  }

  .cekonay-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cekonay-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .cekonay-logo {
    width: 3rem;
    height: 3rem;
    background: var(--cekonay-gradient);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .cekonay-brand h1 {
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--cekonay-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
  }
  .cekonay-account-wrapper h2 {
   color: var(--text-primary) !important; 
  }
  .cekonay-brand p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
  }

  /* Dark mode toggle */
  .cekonay-dark-toggle {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .cekonay-dark-toggle:hover {
    background-color: var(--border-color);
  }

  /* Main content area */
  .cekonay-content {
    display: block;
  }

  /* Cards and panels */
  .cekonay-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
  }

  .cekonay-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .cekonay-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .cekonay-card h2, .cekonay-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }

  /* Grid layouts */
  .cekonay-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .cekonay-grid-2 {
    grid-template-columns: 1fr;
  }

  .cekonay-grid-3 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .cekonay-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .cekonay-grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .cekonay-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Menu items */
  .cekonay-menu-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
    color: inherit;
  }

  .cekonay-menu-item:hover {
    background-color: var(--bg-tertiary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
  }

  .cekonay-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .cekonay-menu-icon {
    width: 2rem;
    height: 2rem;
    color: #675ef3;
  }

  body.cekonay-dark-mode .cekonay-menu-icon {
    color: #8e88ed;
  }

  .cekonay-menu-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
  }

  .cekonay-menu-item:hover .cekonay-menu-arrow {
    color: var(--cekonay-primary);
    transform: translateX(4px);
  }

  .cekonay-menu-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }

  .cekonay-menu-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* Back button */
  .cekonay-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cekonay-primary);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color 0.2s ease;
  }

  .cekonay-back-btn:hover {
    color: var(--cekonay-primary-dark);
    text-decoration: none;
  }

  /* Orders */
  .cekonay-order-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    margin-bottom: 1rem;
  }

  .cekonay-order-item:hover {
    background-color: var(--bg-tertiary);
  }

  .cekonay-order-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .cekonay-status-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: none;
  }

  @media (min-width: 768px) {
    .cekonay-status-icon {
      display: flex;
    }
    
    .cekonay-order-item {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .cekonay-status-icon.processing {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--cekonay-info);
  }

  .cekonay-status-icon.completed {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--cekonay-success);
  }

  .cekonay-status-icon.on-hold {
    background-color: rgba(251, 146, 60, 0.1);
    color: var(--cekonay-warning);
  }

  .cekonay-status-icon.cancelled,
  .cekonay-status-icon.refunded {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--cekonay-error);
  }

  body.cekonay-dark-mode .cekonay-status-icon.processing {
    background-color: rgba(37, 99, 235, 0.3);
    color: #60a5fa;
  }

  body.cekonay-dark-mode .cekonay-status-icon.completed {
    background-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
  }

  body.cekonay-dark-mode .cekonay-status-icon.on-hold {
    background-color: rgba(251, 146, 60, 0.3);
    color: #fdba74;
  }

  body.cekonay-dark-mode .cekonay-status-icon.cancelled,
  body.cekonay-dark-mode .cekonay-status-icon.refunded {
    background-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }

  .cekonay-status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .cekonay-status-badge.processing {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--cekonay-info);
  }

  .cekonay-status-badge.completed {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--cekonay-success);
  }

  .cekonay-status-badge.on-hold {
    background-color: rgba(251, 146, 60, 0.1);
    color: var(--cekonay-warning);
  }

  .cekonay-status-badge.cancelled,
  .cekonay-status-badge.refunded {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--cekonay-error);
  }

  body.cekonay-dark-mode .cekonay-status-badge.processing {
    background-color: rgba(37, 99, 235, 0.3);
    color: #60a5fa;
  }

  body.cekonay-dark-mode .cekonay-status-badge.completed {
    background-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
  }

  body.cekonay-dark-mode .cekonay-status-badge.on-hold {
    background-color: rgba(251, 146, 60, 0.3);
    color: #fdba74;
  }

  body.cekonay-dark-mode .cekonay-status-badge.cancelled,
  body.cekonay-dark-mode .cekonay-status-badge.refunded {
    background-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }

  /* Forms */
  .cekonay-form-group {
    margin-bottom: 1.5rem;
  }

  .cekonay-form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .cekonay-form-row {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .cekonay-form-row.three-cols {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .cekonay-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
  }

  .cekonay-input,
  .cekonay-select {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
  }

  .cekonay-input:focus,
  .cekonay-select:focus {
    outline: none;
    border-color: var(--cekonay-primary);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
  }

  .cekonay-input.error {
    border-color: var(--cekonay-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }

  body.cekonay-dark-mode .cekonay-input,
  body.cekonay-dark-mode .cekonay-select {
    background-color: var(--bg-tertiary);
  }

  /* Buttons */
  .cekonay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }

  .cekonay-btn-primary {
    background: var(--cekonay-gradient);
    color: white;
  }

  .cekonay-btn-primary:hover {
    background: linear-gradient(to right, var(--cekonay-primary-dark), var(--cekonay-secondary-dark));
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    color: white;
    text-decoration: none;
  }

  .cekonay-btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
  }

  .cekonay-btn-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
  }

  .cekonay-btn-link {
    color: var(--cekonay-primary);
    font-weight: 500;
    text-decoration: none;
  }

  .cekonay-btn-link:hover {
    color: var(--cekonay-primary-dark);
    text-decoration: underline;
  }

  .cekonay-btn-icon {
    padding: 0.5rem;
    background-color: var(--bg-tertiary);
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .cekonay-btn-icon:hover {
    background-color: var(--border-color);
  }

  /* SMS Toggle */
  .cekonay-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-tertiary);
  }

  .cekonay-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #9ca3af;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .cekonay-toggle.active {
    background-color: var(--cekonay-primary);
  }

  .cekonay-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
  }

  .cekonay-toggle.active .cekonay-toggle-slider {
    transform: translateX(20px);
  }

  /* Cashback specific */
  .cekonay-referral-section {
    margin-top: 1rem;
  }

  .cekonay-referral-code-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-tertiary);
  }

  .cekonay-code {
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
  }

  .cekonay-share-section {
    margin-top: 1rem;
  }

  .cekonay-url-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .cekonay-url-box input {
    flex: 1;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
  }

  .cekonay-social-share {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }

  .cekonay-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: white;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .cekonay-social-btn.whatsapp {
    background-color: #25D366;
  }

  .cekonay-social-btn.whatsapp:hover {
    background-color: #20BA56;
  }

  .cekonay-social-btn.facebook {
    background-color: #1877F2;
  }

  .cekonay-social-btn.facebook:hover {
    background-color: #1566D8;
  }

  .cekonay-social-btn.email {
    background-color: var(--cekonay-primary);
  }

  .cekonay-social-btn.email:hover {
    background-color: var(--cekonay-primary-dark);
  }

  .cekonay-cashback-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
  }

  .cekonay-info-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }

  /* Transaction list */
  .cekonay-transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-tertiary);
    margin-bottom: 0.75rem;
  }

  .cekonay-transaction-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .cekonay-transaction-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }

  .cekonay-transaction-icon.earned,
  .cekonay-transaction-icon.welcome,
  .cekonay-transaction-icon.referral {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--cekonay-success);
  }

  .cekonay-transaction-icon.used {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--cekonay-error);
  }

  body.cekonay-dark-mode .cekonay-transaction-icon.earned,
  body.cekonay-dark-mode .cekonay-transaction-icon.welcome,
  body.cekonay-dark-mode .cekonay-transaction-icon.referral {
    background-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
  }

  body.cekonay-dark-mode .cekonay-transaction-icon.used {
    background-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }

  .cekonay-transaction-amount {
    font-weight: 600;
    font-size: 1rem;
  }

  .cekonay-transaction-amount.positive {
    color: var(--cekonay-success);
  }

  .cekonay-transaction-amount.negative {
    color: var(--cekonay-error);
  }

  .cekonay-transaction-desc {
    font-size: 0.875rem;
    color: var(--text-primary);
  }

  .cekonay-transaction-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  /* Messages */
  .cekonay-messages-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
  }

  .cekonay-messages-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cekonay-message-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-tertiary);
  }

  .cekonay-message-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--cekonay-info);
    border-radius: 0.5rem;
  }

  body.cekonay-dark-mode .cekonay-message-icon {
    background-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
  }

  .cekonay-message-content {
    flex: 1;
  }

  .cekonay-message-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
  }

  .cekonay-link-more {
    display: inline-block;
    margin-top: 1rem;
    color: var(--cekonay-primary);
    text-decoration: none;
    font-weight: 500;
  }

  .cekonay-link-more:hover {
    color: var(--cekonay-primary-dark);
    text-decoration: underline;
  }

  /* Notification types (SMS) */
  .cekonay-notification-types {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cekonay-notification-type {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-tertiary);
  }

  .cekonay-notification-type h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }

  .cekonay-notification-type p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
  }

  .cekonay-icon {
    font-size: 1.5rem;
  }

  /* Stats cards */
  .cekonay-stat-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
  }

  .cekonay-stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .cekonay-stat-header h3{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
  }
  .cekonay-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
  }

  .cekonay-stat-icon.success {
    color: var(--cekonay-success);
  }

  .cekonay-stat-icon.primary {
    color: var(--cekonay-primary);
  }

  .cekonay-stat-icon.info {
    color: var(--cekonay-info);
  }

  body.cekonay-dark-mode .cekonay-stat-icon.success {
    color: #4ade80;
  }

  body.cekonay-dark-mode .cekonay-stat-icon.primary {
    color: #a855f7;
  }

  body.cekonay-dark-mode .cekonay-stat-icon.info {
    color: #60a5fa;
  }

  .cekonay-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
  }

  /* Notices */
  .cekonay-notice {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  .cekonay-notice-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--cekonay-info);
  }

  body.cekonay-dark-mode .cekonay-notice-info {
    background-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
  }

  /* Empty state */
  .cekonay-empty-state {
    text-align: center;
    padding: 2rem;
  }

  .cekonay-empty-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
  }

  /* Tooltips */
  .cekonay-tooltip {
    position: absolute;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    box-shadow: var(--shadow);
    z-index: 1000;
    display: none;
  }

  .cekonay-tooltip.show {
    display: block;
  }

  /* Animations */
  .animate-in {
    animation: fadeInUp 0.5s ease-out;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Notifications */
  .cekonay-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
  }

  .cekonay-notification.show {
    opacity: 1;
    transform: translateX(0);
  }

  .cekonay-notification-success {
    background-color: var(--cekonay-success);
    color: white;
  }

  .cekonay-notification-error {
    background-color: var(--cekonay-error);
    color: white;
  }

  .cekonay-notification-info {
    background-color: var(--cekonay-info);
    color: white;
  }

  .cekonay-notification-icon {
    font-size: 1rem;
  }

  /* Mobile menu */
  .cekonay-mobile-menu-btn {
    display: none;
    padding: 0.5rem;
    background-color: var(--bg-tertiary);
    border: none;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .cekonay-mobile-menu-btn {
      display: block;
    }
    
    .cekonay-grid.mobile-open {
      display: flex;
      flex-direction: column;
    }
  }

  /* Floating action button */
  .cekonay-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--cekonay-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
  }

  .cekonay-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    color: white;
    text-decoration: none;
  }

  /* Responsive adjustments */
  @media (max-width: 767px) {
    .cekonay-container {
      padding: 1rem;
    }
    
    .cekonay-header {
      padding: 1rem;
      margin: 5rem;
    }
    
    .cekonay-card {
      padding: 1rem;
    }
    
    .cekonay-order-item {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* Loading states */
  .cekonay-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .cekonay-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--cekonay-primary);
    border-radius: 50%;
    animation: cekonay-spin 0.8s linear infinite;
  }

  @keyframes cekonay-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* WooCommerce notices */
  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce-notices-wrapper .woocommerce-info {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .woocommerce-message {
    background-color: var(--cekonay-success);
    color: white;
  }

  .woocommerce-error {
    background-color: var(--cekonay-error);
    color: white;
  }

  .woocommerce-info {
    background-color: var(--cekonay-info);
    color: white;
  }

  /* Print styles */
  @media print {
    .cekonay-header,
    .cekonay-back-btn,
    .cekonay-dark-toggle,
    .cekonay-fab,
    .cekonay-btn,
    .cekonay-social-share,
    .cekonay-mobile-menu-btn {
      display: none !important;
    }
    
    .cekonay-card {
      break-inside: avoid;
      box-shadow: none;
      border: 1px solid #000;
    }
  }


  /* ==========================================================================
   CSS WooCommerce personnalisé pour Cekonay
   À ajouter à la fin de votre fichier CSS existant
   ========================================================================== */

/* Mise à jour des variables avec vos nouvelles couleurs */
:root {
  --cekonay-primary: #764ba2;
  --cekonay-primary-dark: #5e3b81;
  --cekonay-secondary: #667eea;
  --cekonay-secondary-dark: #3f56bd;
  --cekonay-gradient: linear-gradient(to right, var(--cekonay-primary), var(--cekonay-secondary));
  --cekonay-success: #22c55e;
  --cekonay-error: #ef4444;
  --cekonay-warning: #fb923c;
  --cekonay-info: #3b82f6;
}

/* ==========================================================================
   FORMULAIRES WOOCOMMERCE
   ========================================================================== */

/* Conteneurs de formulaires */
.woocommerce form,
.woocommerce-form {
  background: transparent;
  border: none;
  padding: 0;
}

/* Groupes de champs */
.woocommerce-form-row,
.woocommerce form .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce form .form-row.form-row-wide {
  width: 100%;
}

.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last {
  width: 48%;
  float: left;
}

.woocommerce form .form-row.form-row-last {
  float: right;
}

@media (max-width: 768px) {
  .woocommerce form .form-row.form-row-first,
  .woocommerce form .form-row.form-row-last {
    width: 100%;
    float: none;
  }
}

/* Labels */
.woocommerce-form-row label,
.woocommerce form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.woocommerce-form-row label abbr,
.woocommerce form label abbr {
  color: var(--cekonay-error);
  text-decoration: none;
  font-weight: bold;
  margin-left: 0.25rem;
}

/* Champs de saisie */
.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper input[type="email"],
.woocommerce-input-wrapper input[type="password"],
.woocommerce-input-wrapper input[type="tel"],
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: none;
  outline: none;
}

.woocommerce-input-wrapper input:focus,
.woocommerce form input:focus,
.woocommerce-input-wrapper select:focus,
.woocommerce form select:focus,
.woocommerce-input-wrapper textarea:focus,
.woocommerce form textarea:focus {
  border-color: var(--cekonay-primary);
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
  background-color: var(--bg-secondary);
}

/* Champs avec erreur */
.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid input {
  border-color: var(--cekonay-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Dark mode pour les champs */
body.cekonay-dark-mode .woocommerce-input-wrapper input,
body.cekonay-dark-mode .woocommerce form input,
body.cekonay-dark-mode .woocommerce-input-wrapper select,
body.cekonay-dark-mode .woocommerce form select,
body.cekonay-dark-mode .woocommerce-input-wrapper textarea,
body.cekonay-dark-mode .woocommerce form textarea {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ==========================================================================
   BOUTONS WOOCOMMERCE
   ========================================================================== */

/* Boutons principaux */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page a.button,
.woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
  
  /* Style primaire identique à .cekonay-btn-primary */
  background: var(--cekonay-gradient);
  color: white !important;
  box-shadow: var(--shadow);
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce .button:hover {
  /* Hover identique à .cekonay-btn-primary:hover */
  background: linear-gradient(to right, var(--cekonay-primary-dark), var(--cekonay-secondary-dark));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  color: white !important;
  text-decoration: none !important;
}

/* Bouton secondaire - identique à .cekonay-btn-secondary */
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .button.alt {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .button.alt:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Bouton de suppression */
.woocommerce .remove,
.woocommerce-remove-link {
  background: var(--cekonay-error) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce .remove:hover,
.woocommerce-remove-link:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

/* ==========================================================================
   MESSAGES ET NOTIFICATIONS
   ========================================================================== */

/* Messages de base */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border: none;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
}

/* Message de succès */
.woocommerce-message,
.woocommerce .woocommerce-message {
  background: rgba(34, 197, 94, 0.1);
  color: var(--cekonay-success);
  border-left: 4px solid var(--cekonay-success);
}

body.cekonay-dark-mode .woocommerce-message,
body.cekonay-dark-mode .woocommerce .woocommerce-message {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* Message d'erreur */
.woocommerce-error,
.woocommerce .woocommerce-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--cekonay-error);
  border-left: 4px solid var(--cekonay-error);
}

body.cekonay-dark-mode .woocommerce-error,
body.cekonay-dark-mode .woocommerce .woocommerce-error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Message d'information */
.woocommerce-info,
.woocommerce .woocommerce-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--cekonay-info);
  border-left: 4px solid var(--cekonay-info);
}

body.cekonay-dark-mode .woocommerce-info,
body.cekonay-dark-mode .woocommerce .woocommerce-info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Boutons dans les messages */
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: 1rem;
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

/* ==========================================================================
   TABLEAUX ET LISTES
   ========================================================================== */

/* Tables WooCommerce */
.woocommerce table.shop_table {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 100%;
  margin-bottom: 1.5rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce table.shop_table tbody tr:last-child th,
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive pour les tables */
@media (max-width: 768px) {
  .woocommerce table.shop_table {
    font-size: 0.875rem;
  }
  
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ==========================================================================
   ADRESSES ET FORMULAIRES SPÉCIAUX
   ========================================================================== */

/* Section d'adresse */
.woocommerce-address-fields {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.woocommerce-address-fields h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Clearfix pour les formulaires flottants */
.woocommerce form::after,
.woocommerce-address-fields::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
  text-align: center;
  margin: 2rem 0;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--cekonay-primary);
  color: white;
  border-color: var(--cekonay-primary);
  transform: translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cekonay-gradient);
  color: white;
  border-color: var(--cekonay-primary);
}

/* ==========================================================================
   ÉLÉMENTS DIVERS
   ========================================================================== */

/* Selecteurs de pays */
.woocommerce .select2-container {
  width: 100% !important;
}

.woocommerce .select2-container .select2-selection--single {
  height: auto !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.woocommerce .select2-container .select2-selection--single:focus {
  border-color: var(--cekonay-primary) !important;
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1) !important;
}

/* Checkboxes et radios personnalisés */
.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  accent-color: var(--cekonay-primary);
  border-radius: 0.25rem;
}

/* Liens WooCommerce */
.woocommerce a {
  color: var(--cekonay-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.woocommerce a:hover {
  color: var(--cekonay-primary-dark);
  text-decoration: underline;
}

/* Loading states */
.woocommerce .blockUI.blockOverlay {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

body.cekonay-dark-mode .woocommerce .blockUI.blockOverlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.woocommerce .loader {
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--cekonay-primary);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
}

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

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 767px) {
  .woocommerce-address-fields {
    padding: 1rem;
  }
  
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce .button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .woocommerce table.shop_table {
    border-radius: 0.75rem;
  }
}

/* ==========================================================================
   INTÉGRATION AVEC LE DESIGN CEKONAY
   ========================================================================== */

/* S'assurer que les éléments WooCommerce héritent des bonnes polices */
.woocommerce,
.woocommerce * {
  font-family: var(--font-system);
}

/* Animation d'apparition pour les éléments WooCommerce */
.woocommerce-address-fields,
.woocommerce table.shop_table,
.woocommerce form {
  animation: fadeInUp 0.5s ease-out;
}

/* Masquer les éléments inutiles */
.woocommerce .woocommerce-breadcrumb {
  display: none;
}

/* Style pour les required fields */
.woocommerce form .required {
  color: var(--cekonay-error);
}

.woocommerce-Address-title.title a {
  color: var(--link-primary) !important;
}

.cekonay-card.cekonay-empty-state p {
  padding-bottom: 17px;
}














/* ==========================================================================
   CEKONAY - FORMULAIRE DÉTAILS DU COMPTE dans .cekonay-card
   CSS spécifique pour votre structure HTML existante
   ========================================================================== */

/* ==========================================================================
   NAVIGATION MY ACCOUNT - Reste identique
   ========================================================================== */

/* Container navigation */
.woocommerce-MyAccount-navigation {
  background: transparent !important;
  margin-bottom: 1.5rem;
  border: none !important;
  padding: 0 !important;
}

/* Layout responsive pour My Account */
.woocommerce-MyAccount {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .woocommerce-MyAccount {
    grid-template-columns: 300px 1fr !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce-MyAccount {
    grid-template-columns: 320px 1fr !important;
  }
}

/* Liste de navigation */
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  background: transparent !important;
  border: none !important;
}

/* Liens de navigation - Style Cekonay */
.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.woocommerce-MyAccount-navigation a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 1rem !important;
  padding: 1rem 1.5rem !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover state */
.woocommerce-MyAccount-navigation a:hover {
  background-color: var(--bg-tertiary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
}

/* États actifs */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account.is-active a {
  background: var(--cekonay-gradient) !important;
  color: white !important;
  border-color: var(--cekonay-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-1px) !important;
}

.woocommerce-MyAccount-navigation li.is-active a:hover {
  background: linear-gradient(to right, var(--cekonay-primary-dark), var(--cekonay-secondary-dark)) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* Flèche de navigation */
.woocommerce-MyAccount-navigation a::after {
  content: '›' !important;
  font-size: 1.25rem !important;
  color: var(--text-tertiary) !important;
  transition: all 0.2s ease !important;
  margin-left: auto !important;
  opacity: 0.6 !important;
}

.woocommerce-MyAccount-navigation a:hover::after {
  color: var(--cekonay-primary) !important;
  transform: translateX(4px) !important;
  opacity: 1 !important;
}

.woocommerce-MyAccount-navigation li.is-active a::after {
  color: rgba(255, 255, 255, 0.9) !important;
  transform: translateX(2px) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   FORMULAIRE DANS CEKONAY-CARD
   ========================================================================== */

/* Le container .cekonay-card garde ses styles existants */
/* On stylise uniquement le contenu du formulaire */

/* Titre du formulaire (si présent) */
.cekonay-card h2,
.cekonay-card h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 1.5rem 0 !important;
}

/* Formulaire principal */
.cekonay-card .woocommerce-EditAccountForm {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Groupes de champs (p.woocommerce-form-row) */
.cekonay-card .woocommerce-form-row {
  margin-bottom: 1.5rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Layout des champs first/last */
.cekonay-card .woocommerce-form-row--first {
  width: 48% !important;
  float: left !important;
  margin-right: 4% !important;
}

.cekonay-card .woocommerce-form-row--last {
  width: 48% !important;
  float: right !important;
}

.cekonay-card .woocommerce-form-row--wide {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Clearfix */
.cekonay-card .clear {
  clear: both !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Labels */
.cekonay-card .woocommerce-form-row label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5rem !important;
  transition: color 0.3s ease !important;
}

/* Étoile obligatoire */
.cekonay-card .required {
  color: var(--cekonay-error) !important;
  text-decoration: none !important;
  font-weight: bold !important;
  margin-left: 0.25rem !important;
}

/* Champs de saisie */
.cekonay-card .woocommerce-Input,
.cekonay-card input[type="text"],
.cekonay-card input[type="email"],
.cekonay-card input[type="password"] {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
}

/* Focus sur les champs */
.cekonay-card .woocommerce-Input:focus,
.cekonay-card input[type="text"]:focus,
.cekonay-card input[type="email"]:focus,
.cekonay-card input[type="password"]:focus {
  border-color: var(--cekonay-primary) !important;
  box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1) !important;
  background-color: var(--bg-secondary) !important;
}

/* Textes d'aide */
.cekonay-card span[id*="description"] {
  display: block !important;
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
  margin-top: 0.5rem !important;
  font-style: italic !important;
}

.cekonay-card span[id*="description"] em {
  font-style: italic !important;
}

/* Fieldset pour changement de mot de passe */
.cekonay-card fieldset {
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem !important;
  margin: 2rem 0 !important;
  background-color: var(--bg-tertiary) !important;
}

.cekonay-card fieldset legend {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 0 0.75rem !important;
  padding-left: 0px !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 46px !important;
}

/* Bouton principal */
.cekonay-card .woocommerce-Button,
.cekonay-card button[type="submit"],
.cekonay-card input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 2rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  text-align: center !important;
  background: var(--cekonay-gradient) !important;
  color: white !important;
  box-shadow: var(--shadow) !important;
  margin-top: 1rem !important;
  font-family: inherit !important;
}

.cekonay-card .woocommerce-Button:hover,
.cekonay-card button[type="submit"]:hover,
.cekonay-card input[type="submit"]:hover {
  background: linear-gradient(to right, var(--cekonay-primary-dark), var(--cekonay-secondary-dark)) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-lg) !important;
  color: white !important;
  text-decoration: none !important;
}

/* Messages de notification dans .cekonay-card */
.cekonay-card .woocommerce-message,
.cekonay-card .woocommerce-error,
.cekonay-card .woocommerce-info {
  padding: 1rem 1.5rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
  font-size: 0.875rem !important;
}

.cekonay-card .woocommerce-message {
  background: rgba(34, 197, 94, 0.1) !important;
  color: var(--cekonay-success) !important;
  border-left: 4px solid var(--cekonay-success) !important;
}

.cekonay-card .woocommerce-error {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--cekonay-error) !important;
  border-left: 4px solid var(--cekonay-error) !important;
}

.cekonay-card .woocommerce-info {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--cekonay-info) !important;
  border-left: 4px solid var(--cekonay-info) !important;
}

/* ==========================================================================
   RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .woocommerce-MyAccount {
    grid-template-columns: 1fr !important;
  }
  
  /* Navigation mobile */
  .woocommerce-MyAccount-navigation {
    position: relative;
    margin-bottom: 1rem;
  }
  
  .woocommerce-MyAccount-navigation::before {
    content: '☰ Menu Mon Compte' !important;
    display: block !important;
    background: var(--cekonay-gradient) !important;
    color: white !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
  }
  
  .woocommerce-MyAccount-navigation ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 100 !important;
  }
  
  .woocommerce-MyAccount-navigation:hover ul,
  .woocommerce-MyAccount-navigation:focus-within ul {
    display: flex !important;
  }
  
  /* Formulaire mobile */
  .cekonay-card .woocommerce-form-row--first,
  .cekonay-card .woocommerce-form-row--last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
  
  .cekonay-card fieldset {
    padding: 1rem !important;
  }
}

/* ==========================================================================
   SUPPORT MODE SOMBRE
   ========================================================================== */

/* Navigation mode sombre */
body.cekonay-dark-mode .woocommerce-MyAccount-navigation a {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.cekonay-dark-mode .woocommerce-MyAccount-navigation a:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Formulaire mode sombre */
body.cekonay-dark-mode .cekonay-card .woocommerce-Input,
body.cekonay-dark-mode .cekonay-card input[type="text"],
body.cekonay-dark-mode .cekonay-card input[type="email"],
body.cekonay-dark-mode .cekonay-card input[type="password"] {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.cekonay-dark-mode .cekonay-card fieldset {
  background-color: var(--bg-tertiary-init) !important;
  border-color: var(--border-color) !important;
}

/* Messages mode sombre */
body.cekonay-dark-mode .cekonay-card .woocommerce-message {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

body.cekonay-dark-mode .cekonay-card .woocommerce-error {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

body.cekonay-dark-mode .cekonay-card .woocommerce-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

/* ==========================================================================
   ANIMATIONS ET EFFETS
   ========================================================================== */

.woocommerce-MyAccount-navigation,
.cekonay-card .woocommerce-EditAccountForm {
  animation: fadeInUp 0.5s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* États de chargement */
.cekonay-card.cekonay-loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* Accessibilité */
.woocommerce-MyAccount-navigation a:focus,
.cekonay-card .woocommerce-Input:focus {
  outline: 2px solid var(--cekonay-primary) !important;
  outline-offset: 2px !important;
}

/* Print styles */
@media print {
  .woocommerce-MyAccount-navigation {
    display: none !important;
  }

  .woocommerce-MyAccount {
    grid-template-columns: 1fr !important;
  }

  .cekonay-card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
}

/* ==========================================================================
   FILTRE TEMPORAIRE NOTIFICATIONS - Masque les cartouches SMS, Messages et Assistant
   Pour réactiver ces fonctionnalités, commentez simplement cette section
   ========================================================================== */

/* Masque les cartouches de notifications avec un overlay élégant */


.cekonay-menu-item-cekonay-messages,

.cekonay-menu-item-cekonay-assistant {

  position: relative;

  pointer-events: none;

  opacity: 0.5;

  filter: grayscale(0.7);

}

 

/* Ajoute un badge "Disponible bientôt" sur les cartouches masquées */



.cekonay-menu-item-cekonay-messages::before,

.cekonay-menu-item-cekonay-assistant::before {

  content: '⏱️ Disponible dans quelques heures';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: linear-gradient(135deg, rgba(118, 75, 162, 0.95), rgba(102, 126, 234, 0.95));

  color: white;

  padding: 0.5rem 1rem;

  border-radius: 0.5rem;

  font-size: 0.75rem;

  font-weight: 600;

  white-space: nowrap;

  z-index: 10;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  pointer-events: none;

  letter-spacing: 0.025em;

}

 

/* Animation subtile pour attirer l'attention */

@keyframes pulse-subtle {

  0%, 100% {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

  }

  50% {

    opacity: 0.9;

    transform: translate(-50%, -50%) scale(1.02);

  }

}

 



.cekonay-menu-item-cekonay-messages::before,

.cekonay-menu-item-cekonay-assistant::before {

  animation: pulse-subtle 3s ease-in-out infinite;

}

 

/* Mode sombre pour le badge */



body.cekonay-dark-mode .cekonay-menu-item-cekonay-messages::before,

body.cekonay-dark-mode .cekonay-menu-item-cekonay-assistant::before {

  background: linear-gradient(135deg, rgba(142, 136, 237, 0.95), rgba(103, 94, 243, 0.95));

}

 

/* Responsive - Ajuste le texte sur mobile */

@media (max-width: 767px) {

 

  .cekonay-menu-item-cekonay-messages::before,

  .cekonay-menu-item-cekonay-assistant::before {

    content: '⏱️ Bientôt disponible';

    font-size: 0.7rem;

    padding: 0.4rem 0.8rem;

  }

}

 

/* FIN DU FILTRE TEMPORAIRE - Pour réactiver, commentez de la ligne 2181 à 2254 */