/**

 * Component Styles

 *

 * @package Free_Psychicnet

 */



/* ==========================================================================

   Base Reset & Typography

   ========================================================================== */



*,

*::before,

*::after {

	box-sizing: border-box;

}



html {

	-webkit-text-size-adjust: 100%;

	scroll-behavior: smooth;

}



body {

	margin: 0;

	font-family: var(--font-body);

	font-size: var(--text-body);

	line-height: var(--leading-body);

	color: var(--color-text-primary);

	background-color: var(--color-white);

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6 {

	font-family: var(--font-heading);

	letter-spacing: var(--tracking-heading);

	margin-top: 0;

	color: var(--color-text-primary);

}



h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: 700; }

h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 600; }

h3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: 600; }

h4 { font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: 600; }

h5 { font-size: var(--text-h5); line-height: var(--leading-h4); font-weight: 600; }



p {

	margin-top: 0;

	margin-bottom: var(--space-4);

}



a {

	color: var(--color-primary);

	text-decoration: none;

	transition: color var(--transition-fast);

}



a:hover {

	color: var(--color-primary-hover);

}



a:focus-visible {

	outline: 2px solid var(--color-primary);

	outline-offset: 2px;

	border-radius: var(--radius-sm);

}



img {

	max-width: 100%;

	height: auto;

	display: block;

}



/* Skip to content link */

.skip-link {

	position: absolute;

	top: -100%;

	left: var(--space-4);

	z-index: 10000;

	padding: var(--space-3) var(--space-6);

	background: var(--color-primary);

	color: var(--color-white);

	font-weight: 600;

	border-radius: 0 0 var(--radius-md) var(--radius-md);

	transition: top var(--transition-fast);

}



.skip-link:focus {

	top: 0;

	color: var(--color-white);

}



/* ==========================================================================

   Buttons

   ========================================================================== */



.btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: var(--space-2);

	padding: 14px 28px;

	font-family: var(--font-body);

	font-size: var(--text-body);

	font-weight: 600;

	line-height: 1;

	text-align: center;

	text-decoration: none;

	border: 2px solid transparent;

	border-radius: var(--radius-md);

	cursor: pointer;

	transition: all var(--transition-fast);

}



.btn:focus-visible {

	outline: none;

	box-shadow: var(--shadow-focus);

}



.btn-primary {

	background-color: var(--color-primary);

	color: var(--color-white);

}



.btn-primary:hover {

	background-color: var(--color-primary-hover);

	color: var(--color-white);

}



.btn-secondary {

	background-color: var(--color-accent);

	color: var(--color-white);

}



.btn-secondary:hover {

	background-color: var(--color-accent-hover);

	color: var(--color-white);

}



.btn-outline {

	background-color: transparent;

	border-color: var(--color-primary);

	color: var(--color-primary);

}



.btn-outline:hover {

	background-color: var(--color-primary);

	color: var(--color-white);

}



.btn-ghost {

	background-color: transparent;

	color: var(--color-primary);

}



.btn-ghost:hover {

	background-color: var(--color-primary-light);

	color: var(--color-primary);

}



.btn-sm {

	padding: 10px 20px;

	font-size: var(--text-body-sm);

}



.btn-lg {

	padding: 18px 36px;

	font-size: var(--text-body-lg);

}



.btn-white {

	background-color: var(--color-white);

	color: var(--color-primary);

}



.btn-white:hover {

	background-color: var(--color-secondary);

	color: var(--color-primary-hover);

}



/* ==========================================================================

   Cards

   ========================================================================== */



.card {

	background: var(--color-white);

	border-radius: var(--radius-lg);

	overflow: hidden;

	transition: box-shadow var(--transition-normal), transform var(--transition-normal);

}



.card:hover {

	box-shadow: var(--shadow-lg);

	transform: translateY(-2px);

}



/* Psychic Card */

.psychic-card {

	background: var(--color-white);

	border-radius: var(--radius-xl);

	padding: var(--space-6);

	box-shadow: var(--shadow-md);

	text-align: center;

	transition: box-shadow var(--transition-normal), transform var(--transition-normal);

}



.psychic-card:hover {

	box-shadow: var(--shadow-lg);

	transform: translateY(-4px);

}



.psychic-card__image {

	width: 100px;

	height: 100px;

	border-radius: var(--radius-full);

	overflow: hidden;

	margin: 0 auto var(--space-4);

	background: var(--color-secondary);

}



.psychic-card__image img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.psychic-card__status {

	display: inline-flex;

	align-items: center;

	gap: var(--space-1);

	font-size: var(--text-caption);

	font-weight: 500;

	margin-bottom: var(--space-2);

}



.psychic-card__status--online {

	color: var(--color-success);

}



.psychic-card__status--online::before {

	content: '';

	width: 8px;

	height: 8px;

	background: var(--color-success);

	border-radius: var(--radius-full);

	display: inline-block;

}



.psychic-card__name {

	font-family: var(--font-heading);

	font-size: var(--text-h4);

	font-weight: 600;

	margin-bottom: var(--space-1);

}



.psychic-card__tagline {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	margin-bottom: var(--space-3);

}



.psychic-card__specialties {

	display: flex;

	flex-wrap: wrap;

	gap: var(--space-1);

	justify-content: center;

	margin-bottom: var(--space-3);

}



.psychic-card__tag {

	display: inline-block;

	padding: var(--space-1) var(--space-2);

	font-size: var(--text-caption);

	font-weight: 500;

	color: var(--color-primary);

	background: var(--color-primary-light);

	border-radius: var(--radius-full);

}



.psychic-card__rating {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: var(--space-1);

	margin-bottom: var(--space-3);

	font-size: var(--text-body-sm);

}



.psychic-card__stars {

	color: var(--color-warning);

	letter-spacing: 2px;

}



.psychic-card__review-count {

	color: var(--color-text-secondary);

}



.psychic-card__price {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	margin-bottom: var(--space-4);

}



.psychic-card__price strong {

	font-size: var(--text-body-lg);

	color: var(--color-text-primary);

	font-weight: 600;

}



.psychic-card__actions {

	display: flex;

	gap: var(--space-2);

	justify-content: center;

}



/* Service Card */

.service-card {

	background: var(--color-white);

	border-radius: var(--radius-lg);

	padding: var(--space-8);

	box-shadow: var(--shadow-sm);

	transition: box-shadow var(--transition-normal), transform var(--transition-normal);

}



.service-card:hover {

	box-shadow: var(--shadow-md);

	transform: translateY(-2px);

}



.service-card__icon {

	width: 56px;

	height: 56px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--color-primary-light);

	border-radius: var(--radius-lg);

	margin-bottom: var(--space-5);

	font-size: 1.5rem;

	color: var(--color-primary);

}



.service-card__title {

	font-family: var(--font-heading);

	font-size: var(--text-h4);

	font-weight: 600;

	margin-bottom: var(--space-3);

}



.service-card__description {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	line-height: 1.6;

	margin-bottom: var(--space-4);

}



.service-card__link {

	font-size: var(--text-body-sm);

	font-weight: 600;

	color: var(--color-primary);

	display: inline-flex;

	align-items: center;

	gap: var(--space-1);

}



.service-card__link:hover {

	gap: var(--space-2);

}



/* Testimonial Card */

.testimonial-card {

	background: var(--color-secondary);

	border-radius: var(--radius-xl);

	padding: var(--space-8);

}



.testimonial-card__stars {

	color: var(--color-warning);

	margin-bottom: var(--space-4);

	letter-spacing: 2px;

}



.testimonial-card__quote {

	font-family: var(--font-accent);

	font-size: var(--text-body-lg);

	font-style: italic;

	line-height: var(--leading-body-lg);

	color: var(--color-text-primary);

	margin-bottom: var(--space-6);

}



.testimonial-card__author {

	display: flex;

	align-items: center;

	gap: var(--space-3);

}



.testimonial-card__avatar {

	width: 48px;

	height: 48px;

	border-radius: var(--radius-full);

	background: var(--color-primary-light);

	display: flex;

	align-items: center;

	justify-content: center;

	font-weight: 600;

	color: var(--color-primary);

	font-size: var(--text-body-lg);

}



.testimonial-card__name {

	font-weight: 600;

	font-size: var(--text-body-sm);

}



.testimonial-card__location {

	font-size: var(--text-caption);

	color: var(--color-text-secondary);

}



.testimonial-card__service {

	font-size: var(--text-caption);

	color: var(--color-primary);

	font-weight: 500;

}



/* Blog Card */

.blog-card {

	background: var(--color-white);

	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-sm);

	overflow: hidden;

	transition: box-shadow var(--transition-normal), transform var(--transition-normal);

}



.blog-card:hover {

	box-shadow: var(--shadow-md);

	transform: translateY(-2px);

}



.blog-card__image {

	aspect-ratio: 3 / 2;

	overflow: hidden;

	background: var(--color-secondary);

}



.blog-card__image img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	transition: transform var(--transition-slow);

}



.blog-card:hover .blog-card__image img {

	transform: scale(1.05);

}



.blog-card__content {

	padding: var(--space-6);

}



.blog-card__category {

	display: inline-block;

	font-size: var(--text-caption);

	font-weight: 600;

	color: var(--color-primary);

	text-transform: uppercase;

	letter-spacing: 0.05em;

	margin-bottom: var(--space-2);

}



.blog-card__title {

	font-family: var(--font-heading);

	font-size: var(--text-h4);

	font-weight: 600;

	margin-bottom: var(--space-2);

}



.blog-card__title a {

	color: var(--color-text-primary);

}



.blog-card__title a:hover {

	color: var(--color-primary);

}



.blog-card__excerpt {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	margin-bottom: var(--space-4);

}



.blog-card__meta {

	display: flex;

	align-items: center;

	gap: var(--space-3);

	font-size: var(--text-caption);

	color: var(--color-text-light);

}



.blog-card__author {

	font-weight: 500;

	color: var(--color-text-secondary);

}



/* Feature Card */

.feature-card {

	text-align: center;

	padding: var(--space-6);

}



.feature-card__icon {

	width: 64px;

	height: 64px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--color-primary-light);

	border-radius: var(--radius-xl);

	margin: 0 auto var(--space-5);

	font-size: 1.75rem;

	color: var(--color-primary);

}



.feature-card__title {

	font-family: var(--font-heading);

	font-size: var(--text-h5);

	font-weight: 600;

	margin-bottom: var(--space-3);

}



.feature-card__description {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	line-height: 1.6;

}



/* Step Card */

.step-card {

	text-align: center;

	position: relative;

}



.step-card__number {

	width: 56px;

	height: 56px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--color-primary);

	color: var(--color-white);

	font-family: var(--font-heading);

	font-size: var(--text-h4);

	font-weight: 700;

	border-radius: var(--radius-full);

	margin: 0 auto var(--space-5);

}



.step-card__title {

	font-family: var(--font-heading);

	font-size: var(--text-h4);

	font-weight: 600;

	margin-bottom: var(--space-3);

}



.step-card__description {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

	line-height: 1.6;

}



/* ==========================================================================

   Forms

   ========================================================================== */



.form-group {

	margin-bottom: var(--space-5);

}



.form-label {

	display: block;

	font-size: var(--text-body-sm);

	font-weight: 500;

	color: var(--color-text-primary);

	margin-bottom: var(--space-2);

}



.form-input,

.form-textarea,

.form-select {

	width: 100%;

	padding: 14px var(--space-4);

	font-family: var(--font-body);

	font-size: var(--text-body);

	color: var(--color-text-primary);

	background: var(--color-white);

	border: 1px solid var(--color-border);

	border-radius: var(--radius-md);

	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.form-input:focus,

.form-textarea:focus,

.form-select:focus {

	outline: none;

	border-color: var(--color-primary);

	box-shadow: var(--shadow-focus);

}



.form-input::placeholder,

.form-textarea::placeholder {

	color: var(--color-text-light);

}



.form-textarea {

	min-height: 120px;

	resize: vertical;

}



.form-select {

	appearance: none;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6670' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat: no-repeat;

	background-position: right var(--space-4) center;

	padding-right: var(--space-10);

}



/* ==========================================================================

   Accordion

   ========================================================================== */



.accordion {

	border-top: 1px solid var(--color-border);

}



.accordion__item {

	border-bottom: 1px solid var(--color-border);

}



.accordion__trigger {

	display: flex;

	align-items: center;

	justify-content: space-between;

	width: 100%;

	padding: var(--space-5) 0;

	font-family: var(--font-heading);

	font-size: var(--text-body-lg);

	font-weight: 600;

	color: var(--color-text-primary);

	background: none;

	border: none;

	cursor: pointer;

	text-align: left;

	gap: var(--space-4);

	transition: color var(--transition-fast);

}



.accordion__trigger:hover {

	color: var(--color-primary);

}



.accordion__trigger:focus-visible {

	outline: 2px solid var(--color-primary);

	outline-offset: 2px;

	border-radius: var(--radius-sm);

}



.accordion__icon {

	flex-shrink: 0;

	width: 24px;

	height: 24px;

	position: relative;

	transition: transform var(--transition-normal);

}



.accordion__icon::before,

.accordion__icon::after {

	content: '';

	position: absolute;

	top: 50%;

	left: 50%;

	background: var(--color-text-primary);

	transition: transform var(--transition-normal);

}



.accordion__icon::before {

	width: 14px;

	height: 2px;

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

}



.accordion__icon::after {

	width: 2px;

	height: 14px;

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

}



.accordion__item[data-open="true"] .accordion__icon::after {

	transform: translate(-50%, -50%) rotate(90deg);

}



.accordion__panel {

	max-height: 0;

	overflow: hidden;

	transition: max-height var(--transition-normal);

}



.accordion__content {

	padding-bottom: var(--space-6);

	font-size: var(--text-body);

	color: var(--color-text-secondary);

	line-height: var(--leading-body);

}



/* ==========================================================================

   Trust Bar

   ========================================================================== */



.trust-bar {

	background: var(--color-white);

	border-top: 1px solid var(--color-border);

	border-bottom: 1px solid var(--color-border);

	padding: var(--space-8) 0;

}



.trust-bar__grid {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: var(--space-6);

	text-align: center;

}



@media (max-width: 767px) {

	.trust-bar__grid {

		grid-template-columns: repeat(2, 1fr);

	}

}



.trust-bar__item {

	padding: var(--space-2);

}



.trust-bar__value {

	font-family: var(--font-heading);

	font-size: var(--text-h2);

	font-weight: 700;

	color: var(--color-primary);

	line-height: 1;

	margin-bottom: var(--space-1);

}



.trust-bar__label {

	font-size: var(--text-body-sm);

	color: var(--color-text-secondary);

}



/* ==========================================================================

   Section Headings

   ========================================================================== */



.section-header {

	text-align: center;

	max-width: var(--container-narrow);

	margin: 0 auto var(--space-12);

}



.section-header__title {

	margin-bottom: var(--space-4);

}



.section-header__subtitle {

	font-size: var(--text-body-lg);

	color: var(--color-text-secondary);

	line-height: var(--leading-body-lg);

}



/* ==========================================================================

   Pagination

   ========================================================================== */



.nav-links {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: var(--space-2);

	padding: var(--space-8) 0;

}



.nav-links .page-numbers {

	display: flex;

	align-items: center;

	justify-content: center;

	min-width: 40px;

	height: 40px;

	padding: 0 var(--space-3);

	font-size: var(--text-body-sm);

	font-weight: 500;

	color: var(--color-text-secondary);

	border-radius: var(--radius-md);

	transition: all var(--transition-fast);

}



.nav-links .page-numbers:hover {

	background: var(--color-primary-light);

	color: var(--color-primary);

}



.nav-links .page-numbers.current {

	background: var(--color-primary);

	color: var(--color-white);

}



/* ==========================================================================

   Page Content Typography (policies, about, etc.)

   ========================================================================== */



.content-prose h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }

.content-prose h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 2rem 0 0.75rem; }

.content-prose h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin: 1.5rem 0 0.5rem; }

.content-prose h4 { font-size: 1.15rem; margin: 1.25rem 0 0.5rem; }

.content-prose h5 { font-size: 1rem; margin: 1rem 0 0.5rem; }

.content-prose ul, .content-prose ol { margin: 0 0 1rem 1.5rem; }

.content-prose li { margin-bottom: 0.35rem; }