.opc-block-2 {
  width: 50%;
  float: left;
}

.opc-block-3 {
  width: 33.33%;
  float: left;
}

.opc-block > div,
.opc-block > label {
  padding: 7px;
}

.opc-block hr {
  width: 95%;
}

.opc-head {
  font-size: larger;
  font-weight: bold;
}

.opc-label {
  padding-top: 5px;
}

.clearBoth {
  clear: both;
}

@media (max-width: 767px) {
  .opc-block {
    width: 100%;
  }
}

#loginOpcDefault #loginForm input[type="password"],
#loginOpcDefault #login-password {
  color: #000;
}

@media (prefers-color-scheme: light) {
  #loginOpcDefault input[type="text"],
  #loginOpcDefault input[type="email"],
  #loginOpcDefault input[type="password"] {
    color: #000;
  }
}

[data-theme="light"] #loginOpcDefault input[type="text"],
[data-theme="light"] #loginOpcDefault input[type="email"],
[data-theme="light"] #loginOpcDefault input[type="password"],
.theme-light #loginOpcDefault input[type="text"],
.theme-light #loginOpcDefault input[type="email"],
.theme-light #loginOpcDefault input[type="password"] {
  color: #000 !important;
  background-color: #fff !important;
}

@media (prefers-color-scheme: light) {
  #loginOpcDefault input[type="text"],
  #loginOpcDefault input[type="email"],
  #loginOpcDefault input[type="password"] {
    color: #000 !important;
    background-color: #fff !important;
  }
}

/* ============================================
   MOBILE & TABLET DARK MODE ENHANCEMENTS
   ============================================ */

/* Mobile Dark Mode (max-width: 767px) */
@media (max-width: 767px) {
    /* Dark mode login form */
    html[data-theme="dark"] #loginOpcDefault,
    .theme-dark #loginOpcDefault {
        background: var(--theme-bg-primary);
        color: var(--theme-text-primary);
    }
    
    /* Form inputs */
    html[data-theme="dark"] #loginOpcDefault input[type="text"],
    html[data-theme="dark"] #loginOpcDefault input[type="email"],
    html[data-theme="dark"] #loginOpcDefault input[type="password"],
    .theme-dark #loginOpcDefault input[type="text"],
    .theme-dark #loginOpcDefault input[type="email"],
    .theme-dark #loginOpcDefault input[type="password"] {
        background-color: var(--theme-input-bg) !important;
        color: var(--theme-input-text) !important;
        border-color: var(--theme-input-border) !important;
    }
    
    /* Form labels and headings */
    html[data-theme="dark"] .opc-head,
    .theme-dark .opc-head {
        color: var(--theme-text-primary);
    }
    
    html[data-theme="dark"] .opc-label,
    .theme-dark .opc-label {
        color: var(--theme-text-secondary);
    }
    
    /* Form cards/blocks */
    html[data-theme="dark"] .opc-block,
    .theme-dark .opc-block {
        background: var(--theme-bg-card);
        border-color: var(--theme-border-light);
    }
    
    /* Buttons */
    html[data-theme="dark"] #loginOpcDefault button,
    html[data-theme="dark"] #loginOpcDefault .btn,
    .theme-dark #loginOpcDefault button,
    .theme-dark #loginOpcDefault .btn {
        background-color: var(--theme-btn-primary-bg) !important;
        color: var(--theme-btn-primary-text) !important;
        border-color: var(--theme-btn-primary-border) !important;
    }
    
    html[data-theme="dark"] #loginOpcDefault button:hover,
    html[data-theme="dark"] #loginOpcDefault .btn:hover,
    .theme-dark #loginOpcDefault button:hover,
    .theme-dark #loginOpcDefault .btn:hover {
        background-color: var(--theme-btn-primary-hover-bg) !important;
        border-color: var(--theme-btn-primary-hover-border) !important;
        color: var(--theme-accent-gold) !important;
    }
    
    /* Links */
    html[data-theme="dark"] #loginOpcDefault a,
    .theme-dark #loginOpcDefault a {
        color: var(--theme-link-color);
    }
    
    html[data-theme="dark"] #loginOpcDefault a:hover,
    .theme-dark #loginOpcDefault a:hover {
        color: var(--theme-link-hover);
    }
    
    /* Horizontal rules */
    html[data-theme="dark"] .opc-block hr,
    .theme-dark .opc-block hr {
        border-color: var(--theme-border-light);
    }
}

/* Tablet Dark Mode (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Dark mode login form */
    html[data-theme="dark"] #loginOpcDefault,
    .theme-dark #loginOpcDefault {
        background: var(--theme-bg-primary);
        color: var(--theme-text-primary);
    }
    
    /* Form inputs */
    html[data-theme="dark"] #loginOpcDefault input[type="text"],
    html[data-theme="dark"] #loginOpcDefault input[type="email"],
    html[data-theme="dark"] #loginOpcDefault input[type="password"],
    .theme-dark #loginOpcDefault input[type="text"],
    .theme-dark #loginOpcDefault input[type="email"],
    .theme-dark #loginOpcDefault input[type="password"] {
        background-color: var(--theme-input-bg) !important;
        color: var(--theme-input-text) !important;
        border-color: var(--theme-input-border) !important;
    }
    
    /* Form labels and headings */
    html[data-theme="dark"] .opc-head,
    .theme-dark .opc-head {
        color: var(--theme-text-primary);
    }
    
    html[data-theme="dark"] .opc-label,
    .theme-dark .opc-label {
        color: var(--theme-text-secondary);
    }
    
    /* Form cards/blocks */
    html[data-theme="dark"] .opc-block,
    .theme-dark .opc-block {
        background: var(--theme-bg-card);
        border-color: var(--theme-border-light);
    }
    
    /* Buttons */
    html[data-theme="dark"] #loginOpcDefault button,
    html[data-theme="dark"] #loginOpcDefault .btn,
    .theme-dark #loginOpcDefault button,
    .theme-dark #loginOpcDefault .btn {
        background-color: var(--theme-btn-primary-bg) !important;
        color: var(--theme-btn-primary-text) !important;
        border-color: var(--theme-btn-primary-border) !important;
    }
    
    html[data-theme="dark"] #loginOpcDefault button:hover,
    html[data-theme="dark"] #loginOpcDefault .btn:hover,
    .theme-dark #loginOpcDefault button:hover,
    .theme-dark #loginOpcDefault .btn:hover {
        background-color: var(--theme-btn-primary-hover-bg) !important;
        border-color: var(--theme-btn-primary-hover-border) !important;
        color: var(--theme-accent-gold) !important;
    }
    
    /* Links */
    html[data-theme="dark"] #loginOpcDefault a,
    .theme-dark #loginOpcDefault a {
        color: var(--theme-link-color);
    }
    
    html[data-theme="dark"] #loginOpcDefault a:hover,
    .theme-dark #loginOpcDefault a:hover {
        color: var(--theme-link-hover);
    }
    
    /* Horizontal rules */
    html[data-theme="dark"] .opc-block hr,
    .theme-dark .opc-block hr {
        border-color: var(--theme-border-light);
    }
}

/* Prefers Color Scheme Dark - Mobile & Tablet */
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
    #loginOpcDefault {
        background: var(--theme-bg-primary);
        color: var(--theme-text-primary);
    }
    
    #loginOpcDefault input[type="text"],
    #loginOpcDefault input[type="email"],
    #loginOpcDefault input[type="password"] {
        background-color: var(--theme-input-bg) !important;
        color: var(--theme-input-text) !important;
        border-color: var(--theme-input-border) !important;
    }
    
    .opc-head {
        color: var(--theme-text-primary);
    }
    
    .opc-label {
        color: var(--theme-text-secondary);
    }
    
    .opc-block {
        background: var(--theme-bg-card);
        border-color: var(--theme-border-light);
    }
    
    #loginOpcDefault button,
    #loginOpcDefault .btn {
        background-color: var(--theme-btn-primary-bg) !important;
        color: var(--theme-btn-primary-text) !important;
        border-color: var(--theme-btn-primary-border) !important;
    }
    
    #loginOpcDefault button:hover,
    #loginOpcDefault .btn:hover {
        background-color: var(--theme-btn-primary-hover-bg) !important;
        border-color: var(--theme-btn-primary-hover-border) !important;
        color: var(--theme-accent-gold) !important;
    }
    
    #loginOpcDefault a {
        color: var(--theme-link-color);
    }
    
    #loginOpcDefault a:hover {
        color: var(--theme-link-hover);
    }
    
    .opc-block hr {
        border-color: var(--theme-border-light);
    }
}