*, *::before,
*::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
  touch-action: manipulation;
  overscroll-behavior: contain;
} 
    body {
      font-family: 'Montserrat', sans-serif !important;
      background: rgba(252, 243, 227);
      min-height: 100vh;
      color: #333;
      line-height: 1.6;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 4px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
		align-items: center;
    }

    .header {
      text-align: center;
      color: rgba(1, 61, 90, 1);
      margin-bottom: 30px;
      padding: 20px 0;
    }

    .header h1 {
      font-size: 2.2em;
      margin-bottom: 10px;
      text-shadow: 0px 0px 0px rgba(189, 211, 206, 1);
    }

    .header p {
      font-size: 1.1em;
      opacity: 0.9;
    }

    .card {
      background: rgba(252, 243, 227);
      border-radius: 15px;
      padding: 10px;
      margin-bottom: 20px;
      box-shadow: 10px 10px 20px 0px rgba(225, 215, 198), -10px -10px 20px 0px rgba(255, 249, 239);
      backdrop-filter: blur(10px);
		width: 80%;
    }

    .input-group {
      margin-bottom: 25px;
      position: relative;
    }

    .input-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
	  font-size: 0.95rem;
      color: rgba(1,61,90,0.85);
    }

    .input-field {
      width: 100%;
      padding: 15px;
      /*border: 2px solid #e0e0e0;*/
	  border: 1.5px solid rgba(189,211,206,1);
      border-radius: 5px;
      font-size: 1.1em;
      transition: all 0.3s ease;
      background: rgba(252,243,227,1);
	  color: rgba(1,61,90,1);
	  transition:
		  border-color 0.25s ease,
		  box-shadow 0.25s ease;
    }

    .input-field:focus {
      border-color: rgba(112,140,105,1);
      outline: none;
      box-shadow: /*0 0 10px rgba(90, 45, 130, 0.2);*/
		  inset -2px -2px 4px rgba(255,249,239,1),
		  inset  2px  2px 4px rgba(225,215,198,1);
    }

    .input-field.error {
		border-color: rgba(244,162,88,1);
		/*border-color: *#f44336;
      	box-shadow: 0 0 10px rgba(244, 67, 54, 0.2);*/
    }

    .input-field.success {
      /*border-color: #4caf50;
      box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);*/
		border-color: rgba(112,140,105,1);
    }

    .number-counter {
      	position: absolute;
      	right: 15px;
      	top: 0;
      	font-size: 0.9em;
	  	font-weight: 500;
	  	letter-spacing: 0.02em;
      	color: rgba(1,61,90,0.45);
      	pointer-events: none;
	  	transition: color 0.2s ease;
	  	z-index: 1000;
    }

    .number-counter.error {
      	color: rgba(244,162,88,1);
      	font-weight: 600;
    }

    .number-counter.success {
      	color: rgba(112, 140, 105, 1);
      	font-weight: 600;
    }

    .error-message {
      	color: rgba(244, 162, 88, 1);
      	font-size: 0.9em;
      	margin-top: 6px;
      	display: none;
      	font-weight: 500;
		line-height: 1.4;
    }

    .error-message.show {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    .btn {
      background: rgba(252, 243, 227,1);
      color: rgba(1, 61, 90, 1);
      border: 1.5px solid rgba(112,140,105,1);
      padding: 16px 28px;
      border-radius: 5px;
      font-size: 1em;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      transition: /*all 0.3s ease;*/
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		color 0.25s ease;
      /*box-shadow: 0 5px 15px rgba(0,0,0,0.2);*/
    }

    .btn:hover:not(:disabled) {
		border-color: rgba(244, 162, 88, 1);
		box-shadow:
			-4px -4px 10px rgba(255,249,239,1),
			4px  4px 10px rgba(225,215,198,1);
      /*transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);*/
    }

	.btn:focus-visible {
		outline: 2px solid rgba(189,211,206,0.8);
		outline-offset: 3px;
	}

    .btn:active:not(:disabled) {
		box-shadow:
			inset -3px -3px 6px rgba(255,249,239,1),
			inset  3px  3px 6px rgba(225,215,198,1);
      /*transform: translateY(0);*/
    }

    .btn:disabled {
		color: rgba(112,140,105,0.6);
		border-color: rgba(189,211,206,0.8);
		cursor: not-allowed;
		box-shadow: none;
		opacity: 1;
      /*opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      background: #ccc;*/
    }

    .result {
      margin-top: 20px;
      padding: 10px;
      border-radius: 5px;
      animation: slideIn 0.5s ease;
    }

    .result.good {
      background: linear-gradient(135deg,
		  rgba(112, 140, 105, 0.95),
		  rgba(142, 170, 135, 0.95)
	  );
      color: #fff;
    }

    .result.average {
      background: linear-gradient(135deg,
		  rgba(216, 148, 64, 0.95),
		  rgba(244, 182, 96, 0.95)
	  );
      color: #fff;
    }

    .result.bad {
      background: linear-gradient(135deg,
		  rgba(166, 82, 72, 0.95),
		  rgba(198, 108, 96, 0.95)
	  );
      color: #fff;
    }

    .result-title {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 15px;
      text-align: center;
    }

    .result-subtitle {
      font-size: 1.2em;
      margin-bottom: 15px;
      text-align: center;
      opacity: 0.9;
    }

    .result-description {
      font-size: 1.1em;
      line-height: 1.8;
      text-align: justify;
    }

    .pairs-analysis {
      margin-top: 20px;
      padding: 15px;
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
    }

    .pairs-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .pair-item {
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.9em;
      font-weight: 600;
    }

    .pair-item.good {
      background: rgba(255,255,255,0.3);
      color: #fff;
    }

    .pair-item.bad {
      background: rgba(255,255,255,0.2);
      color: #ffcccb;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-2px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
		transform: translateY(-2px);
      }
      to {
        opacity: 1;
		transform: translateY(0);
      }
    }

    .loading {
	  margin-top: 10px;
      text-align: center;
      color: rgba(1, 61, 90, 1);
      font-style: italic;
    }

    .footer {
      text-align: center;
      color: rgba(252, 243, 227, 1);
      margin-top: 25px;
      padding: 20px 0;
      font-size: 0.9em;
	  background: rgba(1, 61, 90, 1);
		z-index: 999;
    }

	/*.footer a {
		text-decoration: none;
		color: rgba(189, 211, 206, 1);
	}*/

    /* Responsive Design */
    @media (max-width: 480px) {
      .container {
        padding: 15px;
      }
      
      .header h1 {
        font-size: 1.8em;
      }
      
      .card {
        padding: 20px;
		  width: 100%;
      }
      
      .number-counter {
        right: 0px;
        top: 1px;
      }
    }

/*Link Decoration*/
.link-decoration {
	text-decoration:none;
	font-weight: 400;
	color: rgba(189,211,206,1);
	transition:
		color 0.25s ease;
}

.link-decoration:hover {
	color: rgba(244,162,88);
}
/*Global animation*/
/*#switch-container {
  position: relative;
  overflow: hidden;
}

#page-transition {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #020b12, #041824);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
  z-index: 10;
}

#page-transition.active {
  opacity: 1;
}*/

.page {
  animation: slideIn .45s cubic-bezier(.4,0,.2,1);
}

.slide-out {
  transform: translateX(-16px);
  opacity: 0;
  transition: .4s cubic-bezier(.4,0,.2,1);
}


@keyframes slideIn {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*CSS NUMEROLOGY*/
/* Numerology Specific Styles */

.numerology-result {
  background: linear-gradient(135deg,
    rgba(112, 140, 105, 0.95),
    rgba(142, 170, 135, 0.95)
  );
  color: #fff;
}

.result-number {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
  animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.numerology-details {
  margin-top: 25px;
}

.traits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.trait-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600;
  display: inline-block;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

.trait-badge:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Details/Summary Styling for both Energy and Numerology */
.wp-block-details {
  margin: 15px 0;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.section-analysis-detail summary {
  padding: 15px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  font-size: 1.05em;
  transition: background 0.3s ease;
}

.section-analysis-detail summary::-webkit-details-marker {
  display: none;
}

.section-analysis-detail summary:hover {
  background: rgba(255,255,255,0.15);
}

.section-analysis-detail[open] summary {
  background: rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.section-detail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-detail::before {
  content: '▶';
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

.section-analysis-detail[open] .section-detail::before {
  transform: rotate(90deg);
}

.analysis-content {
  padding: 20px 15px;
  line-height: 1.8;
}

.analysis-content p {
  margin: 0;
  text-align: justify;
}

/* Date Input Styling */
input[type="date"] {
  width: 100%;
  padding: 15px;
  border: 1.5px solid rgba(189,211,206,1);
  border-radius: 5px;
  font-size: 1.1em;
  transition: all 0.3s ease;
  background: rgba(252,243,227,1);
  color: rgba(1,61,90,1);
  font-family: 'Inter', sans-serif;
}

input[type="date"]:focus {
  border-color: rgba(112,140,105,1);
  outline: none;
  box-shadow:
    inset -2px -2px 4px rgba(255,249,239,1),
    inset  2px  2px 4px rgba(225,215,198,1);
}

input[type="date"].error {
  border-color: rgba(244,162,88,1);
}

input[type="date"].success {
  border-color: rgba(112,140,105,1);
}

/* Calendar icon color */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: opacity(0.6);
  transition: filter 0.3s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: opacity(1);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .result-number {
    font-size: 3em;
  }
  
  .traits-list {
    gap: 8px;
  }
  
  .trait-badge {
    font-size: 0.85em;
    padding: 6px 12px;
  }
  
  .section-analysis-detail summary {
    padding: 12px;
    font-size: 1em;
  }
  
  .analysis-content {
    padding: 15px 12px;
  }
}

/*CSS FENGSHUI*/
/* Feng Shui Specific Styles */

.fengshui-result {
  background: linear-gradient(135deg,
    rgba(189, 211, 206, 0.95),
    rgba(209, 231, 226, 0.95)
  );
  color: rgba(1, 61, 90, 1);
}

.fengshui-header {
  text-align: center;
  padding: 20px 0;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  margin-bottom: 20px;
}

.element-badge {
  display: inline-block;
  background: rgba(112, 140, 105, 0.9);
  color: white;
  padding: 10px 30px;
  border-radius: 25px;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.element-info {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
}

.chinese-element,
.direction-badge,
.season-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600;
  background: rgba(255,255,255,0.5);
  color: rgba(1, 61, 90, 0.9);
  border: 1px solid rgba(189, 211, 206, 0.5);
}

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.color-item {
  flex: 1;
  min-width: 100px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.3);
  border: 2px solid rgba(189, 211, 206, 0.5);
  font-weight: 600;
  text-align: center;
  color: rgba(1, 61, 90, 1);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.color-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.5);
}

.direction-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.direction-badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600;
  display: inline-block;
  transition: all 0.3s ease;
}

.direction-badge.good {
  background: rgba(112, 140, 105, 0.2);
  color: rgba(72, 100, 65, 1);
  border: 1px solid rgba(112, 140, 105, 0.5);
}

.direction-badge.bad {
  background: rgba(244, 162, 88, 0.2);
  color: rgba(194, 112, 38, 1);
  border: 1px solid rgba(244, 162, 88, 0.5);
}

.direction-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fengshui-details {
  margin-top: 25px;
}

.fengshui-details .analysis-content {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(5px);
}

.fengshui-details .section-analysis-detail {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(189, 211, 206, 0.3);
}

.fengshui-details .section-analysis-detail summary {
  color: rgba(1, 61, 90, 1);
}

.fengshui-details .section-analysis-detail[open] summary {
  background: rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(189, 211, 206, 0.4);
}

/* Responsive Feng Shui */
@media (max-width: 480px) {
  .element-badge {
    font-size: 1.1em;
    padding: 8px 20px;
  }
  
  .element-info {
    gap: 8px;
  }
  
  .chinese-element,
  .direction-badge,
  .season-badge {
    font-size: 0.85em;
    padding: 6px 12px;
  }
  
  .color-item {
    min-width: 80px;
    padding: 15px 10px;
    font-size: 0.9em;
  }
  
  .direction-list {
    gap: 8px;
  }
}