/* ==========================================================================
   RatePing — Inner pages (login.html, why-rateping.html)
   Loaded after app.css; reuses its tokens and components. Same conventions:
   plx- prefix, px units, CSS variables, mobile-first min-width queries,
   state via data-* attributes.
   ========================================================================== */

/* ==========================================================================
   1. SHARED — form fields, dialog
   ========================================================================== */

.plx-field {
  margin-bottom: var(--space-5);
}

.plx-field-control {
  position: relative;
}

.plx-field .plx-form-input {
  background:  #FFFFFF;
  font-size:   var(--font-size-base);
  min-height:  52px;
}

.plx-field .plx-form-input:focus-visible {
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.plx-field[data-plx-invalid="true"] .plx-form-input {
  border-color: var(--color-danger);
}

.plx-field[data-plx-invalid="true"] .plx-form-input:focus-visible {
  box-shadow: 0 0 0 4px var(--color-danger-bg);
}

.plx-field-error {
  color:      var(--color-danger);
  display:    block;
  font-size:  var(--font-size-sm);
  margin-top: var(--space-2);
  min-height: 0;
}

.plx-field-error:empty {
  display: none;
}

.plx-field-toggle {
  align-items:     center;
  background:      none;
  border:          0;
  border-radius:   var(--radius-md);
  bottom:          0;
  color:           var(--color-text-muted);
  cursor:          pointer;
  display:         flex;
  justify-content: center;
  position:        absolute;
  right:           var(--space-1);
  top:             0;
  width:           48px;
}

.plx-field-toggle:hover {
  color: var(--color-text-primary);
}

.plx-field-toggle:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: -4px;
}

.plx-field-toggle svg {
  height: 20px;
  width:  20px;
}

.plx-field-toggle [data-plx-icon="hide"] {
  display: none;
}

.plx-field-toggle[aria-pressed="true"] [data-plx-icon="show"] {
  display: none;
}

.plx-field-toggle[aria-pressed="true"] [data-plx-icon="hide"] {
  display: block;
}

.plx-field-control--toggle .plx-form-input {
  padding-right: 56px;
}

.plx-form-alert {
  background:    var(--color-danger-bg);
  border:        1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color:         var(--color-danger);
  font-size:     var(--font-size-sm);
  margin-bottom: var(--space-5);
  padding:       var(--space-3) var(--space-4);
}

.plx-form-alert:empty {
  display: none;
}

.plx-spinner {
  animation:     plx-spin 700ms linear infinite;
  border:        2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  border-top-color: #FFFFFF;
  display:       none;
  height:        16px;
  width:         16px;
}

.plx-btn[data-plx-loading="true"] .plx-spinner {
  display: inline-block;
}

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

.plx-dialog {
  background:    #FFFFFF;
  border:        0;
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-xl);
  color:         var(--color-text-primary);
  margin:        auto;
  max-height:    calc(100vh - 32px);
  max-width:     480px;
  overflow:      auto;
  padding:       0;
  width:         calc(100% - 32px);
}

.plx-dialog::backdrop {
  background:      var(--color-bg-overlay);
  backdrop-filter: blur(2px);
}

.plx-dialog-head {
  align-items:     flex-start;
  background:      var(--color-bg-tint);
  display:         flex;
  gap:             var(--space-4);
  justify-content: space-between;
  padding:         var(--space-6);
}

.plx-dialog-title {
  font-size: var(--font-size-xl);
  margin:    0;
}

.plx-dialog-close {
  background:    #FFFFFF;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  color:         var(--color-text-secondary);
  cursor:        pointer;
  flex-shrink:   0;
  font-size:     var(--font-size-lg);
  height:        36px;
  line-height:   1;
  width:         36px;
}

.plx-dialog-close:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

.plx-dialog-body {
  padding: var(--space-6);
}

.plx-dialog-text {
  color:         var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.plx-dialog-body--center {
  padding:    var(--space-10) var(--space-6);
  text-align: center;
}

.plx-dialog[open] {
  animation: plx-dialog-in var(--transition-base);
}

@keyframes plx-dialog-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* ==========================================================================
   2. LOGIN
   ========================================================================== */

.plx-login {
  background: #FFFFFF;
  display:    grid;
  min-height: 100vh;
  min-height: 100dvh;
}

.plx-login-panel {
  display:        flex;
  flex-direction: column;
  padding:        clamp(16px, 3vh, 32px) var(--space-5);
}

.plx-login-main {
  align-self: center;
  flex:       1;
  margin:     0 auto;
  max-width:  420px;
  padding:    clamp(16px, 4vh, 48px) 0;
  width:      100%;
}

.plx-login-main .plx-field {
  margin-bottom: clamp(12px, 2.4vh, 20px);
}

.plx-login-main .plx-form-input {
  min-height: clamp(44px, 6.4vh, 52px);
}

.plx-login-title {
  font-size:     var(--font-size-3xl);
  letter-spacing:-0.02em;
  margin:        clamp(12px, 4vh, 32px) 0 clamp(12px, 3vh, 24px);
}

.plx-login-submit {
  margin-top: var(--space-2);
  padding:    var(--space-4) var(--space-6);
  width:      100%;
}

.plx-login-visual {
  display: none;
}

.plx-login-visual-frame {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-xl);
  height:        100%;
  overflow:      hidden;
  position:      relative;
}

.plx-login-visual-frame > img {
  height:     100%;
  inset:      0;
  object-fit: cover;
  position:   absolute;
  width:      100%;
}

.plx-login-visual-frame::after {
  background: linear-gradient(180deg, rgba(20, 18, 15, 0) 35%, rgba(20, 18, 15, 0.7) 100%);
  content:    "";
  inset:      0;
  position:   absolute;
}

.plx-login-preview {
  background:    rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-lg);
  bottom:        var(--space-5);
  box-shadow:    var(--shadow-lg);
  left:          var(--space-5);
  padding:       var(--space-4);
  position:      absolute;
  right:         var(--space-5);
  z-index:       1;
}

.plx-login-preview .plx-rate-compare-list {
  margin-bottom: 0;
}

.plx-login-preview-head {
  align-items:     center;
  display:         flex;
  gap:             var(--space-3);
  justify-content: space-between;
  margin-bottom:   var(--space-3);
}

.plx-login-preview-score {
  color:       var(--color-success);
  font-family: var(--font-family-heading);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.plx-login-preview-extra {
  display: flex;
}

@media (min-width: 992px) {
  .plx-login {
    grid-template-columns: minmax(440px, 5fr) 6fr;
  }

  .plx-login-panel {
    padding: clamp(16px, 3vh, 32px) var(--space-10);
  }

  .plx-login-visual {
    display: block;
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
  }

  .plx-login-preview {
    bottom:    clamp(16px, 4vh, 40px);
    left:      clamp(16px, 4vh, 40px);
    max-width: 420px;
    right:     auto;
    width:     calc(100% - 80px);
  }
}

@media (min-width: 992px) and (max-height: 760px) {
  .plx-login-preview-extra {
    display: none;
  }
}

@media (min-width: 992px) {
  .plx-login {
    height: 100vh;
    height: 100dvh;
  }
}

/* ==========================================================================
   3. WHY RATEPING — header state
   ========================================================================== */

.plx-nav-link[aria-current="page"] {
  color: var(--color-primary);
}

/* ==========================================================================
   4. WHY RATEPING — about hero
   ========================================================================== */

.plx-about {
  background:     radial-gradient(ellipse 900px 500px at 12% 0%, var(--color-bg-tint) 0%, rgba(252, 240, 236, 0) 60%), #FFFFFF;
  padding-bottom: var(--space-16);
  padding-top:    var(--space-12);
}

.plx-about-title {
  font-size:     var(--font-size-4xl);
  letter-spacing:-0.02em;
  margin:        var(--space-5) 0 var(--space-6);
}

.plx-about-text {
  color:         var(--color-text-secondary);
  font-size:     var(--font-size-md);
  margin-bottom: var(--space-5);
}

.plx-about-text strong {
  color:       var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  background:  linear-gradient(transparent 62%, var(--color-primary-light) 62%);
}

.plx-about-actions {
  margin-top: var(--space-8);
}

.plx-about-visual {
  background:    var(--color-bg-dark);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-xl);
  height:        440px;
  overflow:      hidden;
  position:      relative;
}

.plx-about-visual > img:first-child {
  height:     100%;
  object-fit: cover;
  opacity:    0.85;
  width:      100%;
}

.plx-about-visual::after {
  background: linear-gradient(160deg, rgba(20, 18, 15, 0.1) 20%, rgba(226, 63, 36, 0.35) 100%);
  content:    "";
  inset:      0;
  position:   absolute;
}

.plx-about-phone {
  border-radius: 22px;
  box-shadow:    var(--shadow-xl);
  height:        auto;
  left:          50%;
  position:      absolute;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         180px;
  z-index:       1;
}

@media (min-width: 768px) {
  .plx-about {
    padding-bottom: var(--space-24);
    padding-top:    var(--space-16);
  }

  .plx-about-visual {
    height: 560px;
  }

  .plx-about-phone {
    width: 220px;
  }
}

@media (min-width: 1200px) {
  .plx-about-visual {
    height: 620px;
  }

  .plx-about-phone {
    width: 250px;
  }
}

/* ==========================================================================
   5. WHY RATEPING — six reasons
   ========================================================================== */

.plx-reasons {
  background: var(--color-bg-muted);
}

.plx-reasons-title {
  font-size:     var(--font-size-2xl);
  letter-spacing:-0.01em;
  margin:        var(--space-4) 0 var(--space-8);
}

.plx-reasons-photo {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
  height:        240px;
  overflow:      hidden;
}

.plx-reasons-photo img {
  height:     100%;
  object-fit: cover;
  width:      100%;
}

.plx-reasons-list {
  counter-reset: reason;
  display:       grid;
  gap:           var(--space-4);
}

.plx-reason {
  align-items:   start;
  background:    #FFFFFF;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  counter-increment: reason;
  display:       grid;
  gap:           var(--space-2) var(--space-5);
  grid-template-columns: 56px 1fr;
  padding:       var(--space-5);
  position:      relative;
  transition:    border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.plx-reason:hover {
  border-color: var(--color-primary);
  box-shadow:   var(--card-shadow-hover);
  transform:    translateY(-2px);
}

.plx-reason-icon {
  align-items:     center;
  background:      var(--color-primary-light);
  border-radius:   var(--radius-lg);
  display:         flex;
  grid-row:        span 2;
  height:          56px;
  justify-content: center;
  width:           56px;
}

.plx-reason-icon img {
  height: 32px;
  width:  32px;
}

.plx-reason-title {
  font-size:   var(--font-size-lg);
  margin:      0;
  padding-right: var(--space-8);
}

.plx-reason-text {
  color: var(--color-text-secondary);
}

.plx-reason::after {
  color:       var(--color-gray-300);
  content:     "0" counter(reason);
  font-family: var(--font-family-heading);
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  position:    absolute;
  right:       var(--space-5);
  top:         var(--space-5);
}

.plx-reason--feature {
  background:   var(--color-bg-dark);
  border-color: var(--color-bg-dark);
}

.plx-reason--feature .plx-reason-title {
  color: #FFFFFF;
}

.plx-reason--feature .plx-reason-text {
  color: var(--color-gray-300);
}

.plx-reason--feature .plx-reason-icon {
  background: #FFFFFF;
}

@media (min-width: 992px) {
  .plx-reasons-aside {
    position: sticky;
    top:      calc(var(--header-height) + var(--space-8));
  }

  .plx-reasons-photo {
    height: 380px;
  }

  .plx-reason {
    padding: var(--space-6) var(--space-8);
  }
}

/* ==========================================================================
   7. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .plx-dialog[open],
  .plx-spinner {
    animation: none;
  }

  .plx-reason {
    transition: none;
  }

  .plx-reason:hover {
    transform: none;
  }
}