/* WPNearMe Claim/Create Onboarding Flow Styles
================================================== */

/* Progress Stepper */
.claim-progress {display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--color-teal-1); border-top: 1px solid var(--color-teal-1); background: #fff; position: sticky; top: 90px; z-index: 5;}
.claim-progress-step {display: flex; align-items: center; gap: 0.5rem; color: var(--color-teal-2); font-size: 1.5rem;}
.claim-progress-step.active {color: var(--color-main);}
.claim-progress-step.completed {color: var(--color-green-4);}
.claim-progress-number {display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;}
.claim-progress-step.active .claim-progress-number {background: var(--color-main); color: #fff;}
.claim-progress-step.completed .claim-progress-number {background: var(--color-green-4); color: #fff;}
.claim-progress-step:not(.active):not(.completed) .claim-progress-number {background: var(--color-teal-1); color: var(--color-teal-3);}
.claim-progress-arrow {color: var(--color-teal-2); margin: 0 0.25rem;}
.claim-progress-label {display: none;}
.claim-progress-number, .claim-progress-number span {font-size: 1.3rem !important;}
@media (min-width: 768px) {.claim-progress-label {display: inline;}}

/* Main Container */
.claim-page {min-height: 65vh;}
.claim-container, .claim-container-wide {padding: 40px 0;}
.form-shadow {box-shadow: 0 2px 4px rgba(15, 13, 10, .1), 0 0 20px rgba(15, 13, 10, .08);}

/* Step Content */
.claim-step {text-align: center; padding: 2rem 0;}
.claim-step-icon {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin: 0 auto 1.5rem; background: var(--color-green-2); border-radius: 0.75rem;}
.claim-step-icon .material-symbols-outlined {color: var(--color-main);}
.claim-step-title {color: var(--color-teal-4); margin: 0 0 0.5rem; line-height: 1.2;}
.claim-step-subtitle {color: var(--color-teal-3); margin: 0 0 2rem; max-width: 400px; margin-left: auto; margin-right: auto;}

/* Search Input */
.claim-search-wrap {position: relative; max-width: 500px; margin: 0 auto;}
.claim-search-input {width: 100%; padding: 1rem 1.25rem; border: 2px solid var(--color-teal-1); border-radius: 0.75rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;}
.claim-search-input:focus {border-color: var(--color-teal-3);}
.claim-search-input::placeholder {color: var(--color-teal-2);}

/* Search Results Dropdown */
.claim-search-results {position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--color-teal-1); border-radius: 0.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin-top: 0.5rem; z-index: 50; overflow: hidden; display: none;}
.claim-search-results.active {display: block;}
.claim-search-result {display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-green-1); cursor: pointer; transition: background 0.15s;}
.claim-search-result:last-child {border-bottom: none;}
.claim-search-result:hover {background: var(--color-green-1);}
.claim-search-result-create {background: var(--color-teal-1);}
.claim-search-result-create:hover {background: var(--color-teal-1);}
.claim-search-result-info {display: flex; align-items: center; gap: 0.75rem; text-align: left;}
.claim-search-result-icon {display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--color-teal-1); border-radius: 0.5rem; flex-shrink: 0;}
.claim-search-result-icon img {width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem;}
.claim-search-result-icon .material-symbols-outlined {color: var(--color-teal-3);}
.claim-search-result-create .claim-search-result-icon {background: var(--color-teal-1);}
.claim-search-result-create .claim-search-result-icon .material-symbols-outlined {color: var(--color-teal-4);}
.claim-search-result-name {margin: 0;}
.claim-search-result-meta {color: var(--color-teal-3); margin: 0;}
.claim-search-result-btn {display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: background 0.15s, transform 0.15s;}
.claim-search-result-btn:hover {transform: translateX(2px);}
.claim-search-result-btn .material-symbols-outlined {font-size: 1.125rem;}
.btn-create {background: var(--color-teal-1); color: var(--color-teal-4);}
.btn-create:hover {background: var(--color-teal-2); color: #fff;}
.btn-claim {background: var(--color-green-2); color: var(--color-main);}
.btn-claim:hover {background: var(--color-green-3);}
.claim-search-result.claimed {opacity: 0.6; cursor: not-allowed;}
.claim-search-result.claimed:hover {background: #fff;}
.claimed-badge {color: var(--color-teal-2); background: var(--color-green-1); padding: 0.25rem 0.5rem; border-radius: 0.25rem;}

/* Confirm Card */
.claim-confirm-card {background: #fff; border: 1px solid var(--color-teal-1); border-radius: 1rem; padding: 2rem; max-width: 400px; margin: 0 auto; text-align: center;}
.claim-confirm-notice {background: var(--color-green-1); color: var(--color-teal-4); padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;}
.claim-confirm-notice.notice-create {background: var(--color-teal-1); color: var(--color-teal-4);}
.claim-confirm-avatar {width: 5rem; height: 5rem; margin: 0 auto 1rem; border-radius: 1rem; background: var(--color-green-1); display: flex; align-items: center; justify-content: center; overflow: hidden;}
.claim-confirm-avatar img {width: 100%; height: 100%; object-fit: cover;}
.claim-confirm-avatar .initials {color: var(--color-teal-2);}
.claim-confirm-name {color: var(--color-main); margin: 0 0 0.25rem;}
.claim-confirm-url {color: var(--color-teal-3); margin: 0 0 0.25rem;}
.claim-confirm-location {color: var(--color-teal-2); margin: 0 0 1.5rem;}
.claim-confirm-checkbox {display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; margin: 1.5rem 0; padding: 1rem; background: var(--color-green-1); border-radius: 0.5rem;}
.claim-confirm-checkbox input[type="checkbox"] {width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; flex-shrink: 0; accent-color: var(--color-teal-4);}
.claim-confirm-checkbox label {color: var(--color-main); cursor: pointer; line-height: 1.4; font-size: 1.3rem;}
.claim-confirm-btn {width: 100%; padding: 0.875rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.15s, opacity 0.15s;}
.claim-confirm-btn:disabled {opacity: 0.5; cursor: not-allowed;}
.claim-confirm-btn.btn-primary {background: var(--color-teal-4); color: #fff;}
.claim-confirm-btn.btn-primary:not(:disabled):hover {background: var(--color-teal-3);}
.claim-back-link {display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-orange-2); margin-top: 1.5rem; text-decoration: none;}
.claim-back-link:hover {text-decoration: underline;}

/* Form Sections */
.claim-form {text-align: left; max-width: 600px; margin: 0 auto; border-radius: 0.75rem; background: #fff;}
.claim-form-section {border-bottom: 1px solid var(--color-teal-1); padding: 30px;}
.claim-form-row {margin-bottom: 20px;}
.claim-form-row:last-child {margin-bottom: 0;}
.claim-form-row-half {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
@media (max-width: 480px) {.claim-form-row-half {grid-template-columns: 1fr;}}
.claim-form-label {display: block; color: var(--color-main); margin-bottom: 0.5rem;}
.claim-form-label .optional {color: var(--color-teal-2);}
.claim-form-help {color: var(--color-teal-3); margin-top: 0.375rem;}
.claim-form-input, .claim-form-select, .claim-form-textarea {width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-teal-2); border-radius: 0.5rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;}
.claim-form-input:focus, .claim-form-select:focus, .claim-form-textarea:focus {border-color: var(--color-teal-3); box-shadow: 0 0 0 3px rgba(23, 82, 96, 0.1);}
.claim-form-input::placeholder, .claim-form-textarea::placeholder {color: var(--color-teal-2);}
.claim-form-textarea {min-height: 100px; resize: vertical;}
.claim-form-char-count {color: var(--color-teal-2); text-align: right; margin-top: 0.25rem;}
.claim-form-char-count.warning {color: var(--color-orange-2);}
.claim-form-char-count.error {color: var(--color-orange-2);}

/* Radio/Checkbox Options */
.claim-form-options {display: flex; flex-direction: column; gap: 0.75rem;}
.claim-form-option {display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--color-teal-1); border-radius: 0.5rem; cursor: pointer; transition: border-color 0.15s, background 0.15s;}
.claim-form-option:hover {border-color: var(--color-green-3); background: var(--color-green-1);}
.claim-form-option.selected {border-color: var(--color-teal-3); background: var(--color-teal-1);}
.claim-form-option input {width: 1.25rem; height: 1.25rem; accent-color: var(--color-teal-4);}
.claim-form-option-label {color: var(--color-main);}

/* Plan Selection Cards */
.claim-plans {display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 700px; margin: 0 auto;}
@media (max-width: 600px) {.claim-plans {grid-template-columns: 1fr;}}
.claim-plan-card {background: #fff; border: 2px solid var(--color-teal-1); border-radius: 1rem; padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;}
.claim-plan-card:hover {border-color: var(--color-green-3);}
.claim-plan-card.selected {border-color: var(--color-teal-4); box-shadow: 0 0 0 3px rgba(23, 82, 96, 0.15);}
.claim-plan-card.popular {position: relative;}
.claim-plan-badge {position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--color-teal-4); color: #fff; padding: 0.25rem 0.75rem; border-radius: 1rem;}
.claim-plan-name {color: var(--color-main); margin: 0 0 0.5rem;}
.claim-plan-description {color: var(--color-teal-3); margin: 0 0 1.25rem; line-height: 1.5;}
.claim-plan-price {color: var(--color-main); margin: 0 0 0.25rem;}
.claim-plan-price span {color: var(--color-teal-3);}
.claim-plan-period {color: var(--color-teal-3); margin: 0 0 1.5rem;}
.claim-plan-features {list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left;}
.claim-plan-features li {display: flex; align-items: flex-start; gap: 0.5rem; color: var(--color-main); padding: 0.375rem 0;}
.claim-plan-features li .material-symbols-outlined {color: var(--color-green-4); flex-shrink: 0;}
.claim-plan-select-btn {width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--color-teal-1); border-radius: 0.5rem; background: #fff; color: var(--color-main); cursor: pointer; transition: all 0.15s;}
.claim-plan-card.selected .claim-plan-select-btn {background: var(--color-teal-4); border-color: var(--color-teal-4); color: #fff;}
.claim-plan-toggle {display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem;}
.claim-plan-toggle label {display: flex; align-items: center; gap: 0.5rem; color: var(--color-main); cursor: pointer; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.15s;}
.claim-plan-toggle label:hover {background: var(--color-green-1);}
.claim-plan-toggle input:checked + label, .claim-plan-toggle label:has(input:checked) {background: var(--color-teal-1); color: var(--color-teal-4);}
.claim-plan-toggle .save-badge {background: var(--color-green-1); color: var(--color-teal-4); padding: 0.125rem 0.5rem; border-radius: 0.25rem; margin-left: 0.25rem;}

/* Verification Code Input */
.claim-verify-inputs {display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0;}
.claim-verify-input {width: 3rem; height: 3.5rem; text-align: center; border: 2px solid var(--color-teal-1); border-radius: 0.5rem; outline: none; transition: border-color 0.2s;}
.claim-verify-input:focus {border-color: var(--color-teal-3);}
@media (max-width: 400px) {.claim-verify-input {width: 2.5rem; height: 3rem;}}
.claim-verify-resend {color: var(--color-teal-3); margin-top: 1.5rem;}
.claim-verify-resend a {color: var(--color-orange-2); text-decoration: none;}
.claim-verify-resend a:hover {text-decoration: underline;}

/* Buttons */
.claim-buttons {display: flex; justify-content: space-between; align-items: center; padding: 30px;}
.claim-buttons-center {justify-content: center;}
.claim-btn {padding: 0.875rem 1.5rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s; border: none; display: inline-flex; align-items: center; gap: 0.5rem;}
.claim-btn:disabled {opacity: 0.5; cursor: not-allowed;}
.claim-btn-back {background: #fff; color: var(--color-main); border: 1px solid var(--color-teal-2);}
.claim-btn-back:hover:not(:disabled) {background: var(--color-green-1);}
.claim-btn-continue {background: var(--color-teal-4); color: #fff;}
.claim-btn-continue:hover:not(:disabled) {background: var(--color-teal-3);}

/* Account */
.claim-account-form {margin-bottom: 30px; border: none; border-radius: 0.75rem; background: #fff;}

/* Welcome/Complete */
.claim-complete {text-align: center; padding: 3rem 0;}
.claim-complete-icon {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; background: var(--color-green-1); border-radius: 50%;}
.claim-complete-icon .material-symbols-outlined {color: var(--color-green-4);}
.claim-complete-title {color: var(--color-teal-4); margin: 0 0 0.5rem;}
.claim-complete-subtitle {color: var(--color-teal-3); margin: 0 0 2rem;}
.claim-complete-card {background: #fff; border: 1px solid var(--color-teal-1); border-radius: 0.75rem; padding: 1.5rem; max-width: 400px; margin: 0 auto 2rem; text-align: left;}
.claim-complete-card h4 {color: var(--color-main); margin: 0 0 1rem;}
.claim-complete-list {list-style: none; padding: 0; margin: 0;}
.claim-complete-list li {display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; color: var(--color-main);}
.claim-complete-list li .material-symbols-outlined {color: var(--color-green-4); flex-shrink: 0;}

/* Stripe Checkout Container */
.claim-checkout-container {background: #fff; border: 1px solid var(--color-teal-1); border-radius: 0.75rem; min-height: 400px; margin: 2rem auto; max-width: 500px;}
#checkout-element {min-height: 400px;}

/* Error States */
.claim-error {background: var(--color-orange-1); border: 1px solid var(--color-orange-2); color: var(--color-main); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;}
.claim-form-input.error, .claim-form-textarea.error {border-color: var(--color-orange-2);}
.claim-form-error {color: var(--color-orange-2); margin-top: 0.375rem;}

/* Loading State */
.claim-loading {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem;}
.claim-spinner {width: 2.5rem; height: 2.5rem; border: 3px solid var(--color-teal-1); border-top-color: var(--color-teal-4); border-radius: 50%; animation: spin 0.8s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}
.claim-loading-text {margin-top: 1rem; color: var(--color-teal-3);}

/* Domain Mismatch Warning */
.claim-domain-warning {background: var(--color-orange-1); border: 1px solid var(--color-orange-2); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 0.75rem;}
.claim-domain-warning .material-symbols-outlined {color: var(--color-orange-2); flex-shrink: 0;}
.claim-domain-warning-text {color: var(--color-main);}
.claim-domain-warning-text strong {display: block; margin-bottom: 0.25rem;}

/* Footer Text (login/support links at bottom of steps) */
.claim-footer-text {margin: 15px auto; max-width: 400px; font-size: 1.2rem; color: var(--color-teal-3); text-align: center;}
.claim-footer-text a {color: var(--color-orange-2); text-decoration: none;}
.claim-footer-text a:hover {text-decoration: underline;}