/**

 * PerfectFinish Reservations ? Public Styles v2 (CORRECT CLASSES)

 * ALINHADO com as classes REAIS dos templates PHP e JS.

 * Tema: DetailX scheme_dark (preto + vermelho #EA0A0B)

 *

 * @package PerfectFinish_Reservations

 * @version 2.0.1

 */



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

   DESIGN TOKENS ? DetailX Scheme Dark

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

:root {

    --pf-bg-dark: #232225;

    --pf-bg-darker: #18171A;

    --pf-bg-card: #2a292d;

    --pf-bg-input: #1e1d20;

    --pf-bg-hover: #333236;

    --pf-accent: #EA0A0B;

    --pf-accent-hover: #FF2020;

    --pf-accent-gradient: linear-gradient(133deg, #EA0A0B 2%, #FF4311 100%);

    --pf-accent-subtle: rgba(234,10,11,0.12);

    --pf-accent-muted: rgba(234,10,11,0.06);

    --pf-secondary: #c5a48e;

    --pf-secondary-hover: #d4b8a4;

    --pf-text: #FFFFFF;

    --pf-text-secondary: #b0aeac;

    --pf-text-muted: #7a7875;

    --pf-text-dark: #949087;

    --pf-border: rgba(255,255,255,0.08);

    --pf-border-hover: rgba(255,255,255,0.15);

    --pf-border-accent: rgba(234,10,11,0.3);

    --pf-success: #00b894;

    --pf-warning: #fdcb6e;

    --pf-danger: #e17055;

    --pf-info: #74b9ff;

    --pf-error: #EA0A0B;

    --pf-status-pre-reserva: #fdcb6e;

    --pf-status-confirmado: #74b9ff;

    --pf-status-em_andamento: #00b894;

    --pf-status-concluido: #a29bfe;

    --pf-status-entregue: #55efc4;

    --pf-status-cancelado: #EA0A0B;

    --pf-font-heading: 'Barlow Condensed', sans-serif;

    --pf-font-body: 'DM Sans', sans-serif;

    --pf-shadow: 0 4px 30px rgba(0,0,0,0.3);

    --pf-shadow-sm: 0 2px 8px rgba(0,0,0,0.2);

    --pf-transition: 0.3s ease;

    --pf-space-xs: 4px;

    --pf-space-sm: 8px;

    --pf-space-md: 16px;

    --pf-space-lg: 24px;

    --pf-space-xl: 40px;

}



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

   RESET / BASE

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

body .pf-booking-wrapper,
body .pf-lead-form-wrapper,
body .pf-my-bookings-wrapper {
    font-family: var(--pf-font-body);

    color: var(--pf-text);

    background: var(--pf-bg-darker);

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

    position: relative;

}



body .pf-booking-wrapper *,
body .pf-lead-form-wrapper *,
body .pf-my-bookings-wrapper * {
    box-sizing: border-box;

}



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

   BOOKING WRAPPER

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

body .pf-booking-wrapper {
    max-width: 820px;

    margin: 0 auto;

}



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

   HEADER

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

body .pf-booking-header {
    background: var(--pf-bg-dark);

    padding: 50px 50px 0;

    text-align: center;

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

}



body .pf-booking-header h2 {
    font-family: var(--pf-font-heading);

    font-size: 48px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--pf-text);

    margin: 0 0 10px;

    line-height: 1.1;

}



body .pf-booking-header p {
    font-family: var(--pf-font-body);

    font-size: 16px;

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

    margin: 0 0 40px;

    font-weight: 400;

}



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

   STEPS INDICATOR

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

body .pf-steps {
    display: flex;

    justify-content: center;

    list-style: none;

    margin: 0;

    padding: 0;

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

}



body .pf-step {
    flex: 1;

    text-align: center;

    padding: 18px 10px;

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

    font-size: 14px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--pf-text-muted);

    border-bottom: 3px solid transparent;

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

    background: var(--pf-bg-darker);

}



body .pf-step.active {
    color: var(--pf-text);

    border-bottom-color: var(--pf-accent);

    background: var(--pf-bg-dark);

}



body .pf-step.completed {
    color: var(--pf-secondary);

    border-bottom-color: var(--pf-secondary);

}



body .pf-step-number {
    display: block;

    font-size: 11px;

    color: var(--pf-text-dark);

    margin-bottom: 4px;

    letter-spacing: 2px;

}



body .pf-step.active .pf-step-number {
    color: var(--pf-accent);

}



body .pf-step-label {
    display: inline;

}



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

   FORM STEPS

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

body .pf-form-step {
    display: none;

    padding: 40px 50px;

    animation: pfFadeIn 0.4s ease;

}



body .pf-form-step.active {
    display: block;

}



@keyframes pfFadeIn {

    from { opacity: 0; transform: translateY(12px); }

    to { opacity: 1; transform: translateY(0); }

}



body .pf-form-step h3 {
    font-family: var(--pf-font-heading);

    font-size: 28px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text);

    margin: 0 0 8px;

}



body .pf-step-subtitle {
    font-family: var(--pf-font-body);

    font-size: 15px;

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

    margin: 0 0 30px;

}



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

   FORM FIELDS

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

body .pf-form-fields {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



body .pf-field {
    margin-bottom: 0;

}



body .pf-field.pf-field-half {
    grid-column: span 1;

}



body .pf-field label {
    display: block;

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

    font-size: 13px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

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

    margin-bottom: 8px;

}



body .pf-field label .required {
    color: var(--pf-accent);

}



body .pf-field input,
body .pf-field select,
body .pf-field textarea {
    width: 100%;

    padding: 14px 16px;

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

    font-size: 15px;

    color: var(--pf-text);

    background: var(--pf-bg-input);

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

    outline: none;

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

    line-height: 1.4;

    border-radius: 0;

}



body .pf-field input:focus,
body .pf-field select:focus,
body .pf-field textarea:focus {
    border-color: var(--pf-accent);

    background: var(--pf-bg-hover);

    box-shadow: 0 0 0 2px var(--pf-accent-subtle);

}



body .pf-field input::placeholder,
body .pf-field textarea::placeholder {
    color: var(--pf-text-muted);

    opacity: 0.7;

}



body .pf-field 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='%23b0aeac' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 16px center;

    padding-right: 40px;

    cursor: pointer;

}



body .pf-field textarea {
    min-height: 100px;

    resize: vertical;

}



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

   BUTTONS

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

body .pf-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

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

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    padding: 18px 36px;

    border: none;

    cursor: pointer;

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

    line-height: 1;

    border-radius: 0;

    text-decoration: none;

}



body .pf-btn-next,
body .pf-btn-submit,
body .pf-btn-new-booking,
body .pf-btn-push-yes {
    background: var(--pf-accent-gradient);

    color: #fff;

}



body .pf-btn-next:hover,
body .pf-btn-submit:hover,
body .pf-btn-new-booking:hover,
body .pf-btn-push-yes:hover {
    filter: brightness(1.1);

    transform: translateY(-1px);

    box-shadow: 0 4px 20px rgba(234,10,11,0.3);

}



body .pf-btn-prev,
body .pf-btn-push-no {
    background: transparent;

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

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

}



body .pf-btn-prev:hover,
body .pf-btn-push-no:hover {
    border-color: var(--pf-text);

    color: var(--pf-text);

}



body .pf-btn:disabled {
    opacity: 0.4;

    cursor: not-allowed;

    filter: none;

    transform: none;

}



body .pf-btn .pf-spinner {
    width: 16px;

    height: 16px;

    border: 2px solid rgba(255,255,255,0.3);

    border-top-color: #fff;

    border-radius: 50%;

    animation: pfSpin 0.6s linear infinite;

    display: inline-block;

}



@keyframes pfSpin {

    to { transform: rotate(360deg); }

}



/* Navigation */

body .pf-form-navigation {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 32px;

    padding-top: 24px;

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

}



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

   SERVICES GRID

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

body .pf-services-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 24px;

}



body .pf-service-card {
    position: relative;

    background: var(--pf-bg-card);

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

    padding: 28px 24px;

    cursor: pointer;

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

    text-align: center;

}



body .pf-service-card:hover {
    border-color: var(--pf-border-hover);

    background: var(--pf-bg-hover);

}



body .pf-service-card.selected {
    border-color: var(--pf-accent);

    background: var(--pf-accent-muted);

    box-shadow: inset 0 0 0 1px var(--pf-accent);

}



body .pf-service-check {
    display: none;

}



body .pf-service-card.selected .pf-service-check {
    display: block;

    position: absolute;

    top: 10px;

    right: 10px;

    width: 20px;

    height: 20px;

    background: var(--pf-accent);

    color: #fff;

    font-size: 12px;

    line-height: 20px;

    text-align: center;

}



body .pf-service-icon {
    font-size: 36px;

    margin-bottom: 12px;

    display: block;

    color: var(--pf-accent);

}



body .pf-service-name,
body .pf-service-card h4 {
    font-family: var(--pf-font-heading);

    font-size: 20px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text);

    margin: 0 0 6px;

}



body .pf-service-meta {
    font-size: 13px;

    color: var(--pf-text-muted);

    margin-bottom: 8px;

}



body .pf-service-duration {
    display: inline-block;

    margin-right: 8px;

}



body .pf-service-price {
    font-family: var(--pf-font-heading);

    font-size: 22px;

    font-weight: 700;

    color: var(--pf-accent);

}



body .pf-service-desc {
    font-size: 13px;

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

    margin-top: 10px;

    line-height: 1.5;

}



body .pf-service-badge {
    position: absolute;

    top: -1px;

    right: -1px;

    background: var(--pf-accent);

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 4px 12px;

}



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

   CALENDAR (JS-generated inside booking form)

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

#pf-calendar-container {

    margin-bottom: 24px;

}



body .pf-calendar {
    background: var(--pf-bg-card);

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

    padding: 24px;

}



body .pf-calendar-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

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

}



body .pf-calendar-header .pf-calendar-month-year {
    font-size: 22px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text);

    margin: 0;

}



body .pf-calendar-nav {
    display: flex;

    gap: 8px;

    align-items: center;

}



body .pf-calendar-prev,
body .pf-calendar-next {
    background: none;

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

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

    width: 36px;

    height: 36px;

    cursor: pointer;

    font-size: 16px;

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

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



body .pf-calendar-prev:hover,
body .pf-calendar-next:hover {
    border-color: var(--pf-accent);

    color: var(--pf-accent);

}



body .pf-calendar-weekdays {
    display: grid;

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

    gap: 2px;

    margin-bottom: 2px;

}



body .pf-calendar-weekday {
    text-align: center;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--pf-text-muted);

    padding: 8px 0;

}



body .pf-calendar-grid {
    display: grid;

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

    gap: 2px;

}



body .pf-calendar-day {
    text-align: center;

    padding: 10px 0;

    font-size: 14px;

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

    cursor: pointer;

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

    border: 1px solid transparent;

    min-height: 42px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



body .pf-calendar-day:hover {
    background: var(--pf-bg-hover);

}



body .pf-calendar-day.pf-day-available {
    color: var(--pf-text);

    font-weight: 500;

}



body .pf-calendar-day.pf-day-available:hover {
    border-color: var(--pf-secondary);

    background: rgba(197,164,142,0.1);

}



body .pf-calendar-day.pf-day-selected {
    background: var(--pf-accent) !important;

    color: #fff !important;

    border-color: var(--pf-accent) !important;

}



body .pf-calendar-day.pf-day-off,
body .pf-calendar-day.pf-day-blackout,
body .pf-calendar-day.pf-day-disabled {
    color: var(--pf-text-muted);

    cursor: not-allowed;

    opacity: 0.4;

}



body .pf-calendar-day.pf-day-today {
    font-weight: 700;

    color: var(--pf-secondary);

    text-decoration: underline;

    text-underline-offset: 3px;

}



body .pf-day-number {
    font-size: 14px;

    line-height: 1;

}



body .pf-slots-count {
    font-size: 8px;

    color: var(--pf-accent);

    margin-top: 1px;

}



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

   STANDALONE CALENDAR (pf-calendar.js widget)

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

body .pf-calendar-standalone {
    background: var(--pf-bg-card);

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

    padding: 24px;

}



body .pf-calendar-standalone .pf-calendar-header h3 {
    font-family: var(--pf-font-heading);

    font-size: 22px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text);

    margin: 0;

}



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

   TIME SLOTS

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

#pf-slots-container {

    margin-bottom: 24px;

}



#pf-slots-container h4 {

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

    font-size: 18px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text);

    margin: 0 0 16px;

}



body .pf-slots-grid {
    display: grid;

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

    gap: 10px;

}



body .pf-slot-item {
    padding: 12px 8px;

    text-align: center;

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

    font-size: 14px;

    font-weight: 500;

    color: var(--pf-text);

    background: var(--pf-bg-card);

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

    cursor: pointer;

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

    border-radius: 0;

}



body .pf-slot-item:hover {
    border-color: var(--pf-border-hover);

    background: var(--pf-bg-hover);

}



body .pf-slot-item.selected {
    border-color: var(--pf-accent);

    background: var(--pf-accent-subtle);

    color: var(--pf-accent);

}



body .pf-slot-item.unavailable {
    opacity: 0.3;

    cursor: not-allowed;

    text-decoration: line-through;

}



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

   CALENDAR LEGEND

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

body .pf-calendar-legend {
    display: flex;

    gap: 20px;

    margin-top: 16px;

    padding-top: 16px;

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

    flex-wrap: wrap;

}



body .pf-legend-item {
    font-size: 12px;

    color: var(--pf-text-muted);

    display: flex;

    align-items: center;

    gap: 8px;

}



body .pf-legend-item::before {
    content: '';

    width: 12px;

    height: 12px;

    display: inline-block;

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

    flex-shrink: 0;

}



body .pf-legend-available::before {
    background: var(--pf-bg-hover);

    border-color: var(--pf-secondary);

}



body .pf-legend-unavailable::before {
    background: var(--pf-bg-darker);

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

    opacity: 0.4;

}



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

   LOADING & NO SLOTS

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

body .pf-loading {
    text-align: center;

    padding: 40px 20px;

    color: var(--pf-text-muted);

    font-size: 14px;

}



body .pf-no-slots {
    text-align: center;

    padding: 40px 20px;

    color: var(--pf-text-muted);

    font-size: 14px;

}



body .pf-no-slots strong {
    display: block;

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

    font-size: 18px;

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

    margin-bottom: 6px;

}



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

   CONFIRMATION

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

body .pf-confirm-details {
    margin-bottom: 24px;

}



body .pf-confirm-card {
    background: var(--pf-bg-card);

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

    padding: 16px 24px;

    border-bottom: none;

}



body .pf-confirm-card:last-child {
    border-bottom: 1px solid var(--pf-border);

}



body .pf-confirm-card h4 {
    font-family: var(--pf-font-heading);

    font-size: 12px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--pf-text-muted);

    margin: 0 0 4px;

}



body .pf-confirm-card p {
    font-size: 16px;

    font-weight: 500;

    color: var(--pf-text);

    margin: 0;

}



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

   SUCCESS

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

body .pf-booking-success {
    text-align: center;

    padding: 60px 40px;

}



body .pf-success-animation {
    width: 72px;

    height: 72px;

    margin: 0 auto 24px;

    background: var(--pf-accent);

    display: flex;

    align-items: center;

    justify-content: center;

}



body .pf-success-animation svg {
    width: 32px;

    height: 32px;

    stroke: #fff;

}



body .pf-booking-success h3 {
    font-family: var(--pf-font-heading);

    font-size: 32px;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0 0 12px;

    color: var(--pf-text);

}



body .pf-booking-success p {
    font-size: 15px;

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

    margin: 0 0 32px;

    max-width: 480px;

    margin-left: auto;

    margin-right: auto;

}



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

   PUSH NOTIFICATION PROMPT

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

body .pf-push-prompt {
    background: var(--pf-bg-card);

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

    padding: 24px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin: 0;

}



body .pf-push-prompt p {
    font-size: 14px;

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

    margin: 0;

}



body .pf-push-prompt .pf-btn {
    flex-shrink: 0;

}



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

   LEAD FORM

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

body .pf-lead-form-wrapper {
    max-width: 640px;

    margin: 0 auto;

}



body .pf-lead-form-container {
    padding: 40px;

}



body .pf-lead-form-title {
    font-family: var(--pf-font-heading);

    font-size: 28px;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0 0 8px;

    color: var(--pf-text);

}



body .pf-lead-form-subtitle {
    font-size: 15px;

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

    margin: 0 0 28px;

}



body .pf-lead-form .pf-form-group {
    margin-bottom: 22px;

}



body .pf-lead-form label {
    display: block;

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

    font-size: 13px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

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

    margin-bottom: 8px;

}



body .pf-lead-form .pf-form-control {
    width: 100%;

    padding: 14px 16px;

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

    font-size: 15px;

    color: var(--pf-text);

    background: var(--pf-bg-input);

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

    outline: none;

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

    border-radius: 0;

    line-height: 1.4;

}



body .pf-lead-form .pf-form-control:focus {
    border-color: var(--pf-accent);

    background: var(--pf-bg-hover);

    box-shadow: 0 0 0 2px var(--pf-accent-subtle);

}



body .pf-lead-form .pf-form-control::placeholder {
    color: var(--pf-text-muted);

    opacity: 0.7;

}



body .pf-lead-form select.pf-form-control {
    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='%23b0aeac' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 16px center;

    padding-right: 40px;

    cursor: pointer;

}



body .pf-lead-form textarea.pf-form-control {
    min-height: 100px;

    resize: vertical;

}



body .pf-submit-btn {
    background: var(--pf-accent-gradient);

    color: #fff;

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

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    padding: 18px 36px;

    border: none;

    cursor: pointer;

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

    border-radius: 0;

    width: 100%;

}



body .pf-submit-btn:hover {
    filter: brightness(1.1);

    transform: translateY(-1px);

    box-shadow: 0 4px 20px rgba(234,10,11,0.3);

}



body .pf-submit-btn:disabled {
    opacity: 0.4;

    cursor: not-allowed;

    filter: none;

    transform: none;

}



body .pf-lead-form-messages {
    margin-top: 16px;

}



body .pf-lead-form-messages.pf-success .pf-success-msg {
    padding: 14px 20px;

    background: rgba(0,184,148,0.1);

    border-left: 3px solid var(--pf-success);

    color: var(--pf-success);

    font-size: 14px;

}



body .pf-lead-form-messages.pf-error .pf-error-msg {
    padding: 14px 20px;

    background: var(--pf-accent-subtle);

    border-left: 3px solid var(--pf-accent);

    color: var(--pf-accent);

    font-size: 14px;

}



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

   MY BOOKINGS (Frontend Dashboard)

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

body .pf-my-bookings-wrapper {
    max-width: 900px;

    margin: 0 auto;

}



body .pf-my-bookings-wrapper h2 {
    font-family: var(--pf-font-heading);

    font-size: 32px;

    font-weight: 600;

    text-transform: uppercase;

    color: var(--pf-text);

    margin: 0 0 24px;

    padding: 40px 40px 0;

}



/* Email prompt */

body .pf-email-prompt {
    padding: 0 40px 40px;

    text-align: center;

}



body .pf-email-prompt p {
    font-size: 15px;

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

    margin: 0 0 20px;

}



body .pf-email-form {
    display: flex;

    gap: 12px;

    max-width: 400px;

    margin: 0 auto;

}



body .pf-email-form input {
    flex: 1;

    padding: 14px 16px;

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

    font-size: 15px;

    color: var(--pf-text);

    background: var(--pf-bg-input);

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

    outline: none;

    border-radius: 0;

}



body .pf-email-form input:focus {
    border-color: var(--pf-accent);

}



body .pf-btn-search {
    padding: 14px 24px;

    background: var(--pf-accent-gradient);

    color: #fff;

    border: none;

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

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    cursor: pointer;

    border-radius: 0;

    white-space: nowrap;

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

}



body .pf-btn-search:hover {
    filter: brightness(1.1);

    box-shadow: 0 4px 20px rgba(234,10,11,0.3);

}



/* Bookings list */

body .pf-bookings-list {
    list-style: none;

    padding: 0 40px 40px;

    margin: 0;

}



body .pf-booking-item {
    background: var(--pf-bg-card);

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

    margin-bottom: 16px;

    padding: 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

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

}



body .pf-booking-item:hover {
    border-color: var(--pf-border-hover);

}



body .pf-booking-item h4 {
    font-family: var(--pf-font-heading);

    font-size: 20px;

    font-weight: 600;

    margin: 0 0 4px;

    color: var(--pf-text);

}



body .pf-booking-item p {
    font-size: 14px;

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

    margin: 0;

}



/* No bookings */

body .pf-no-bookings {
    text-align: center;

    padding: 60px 40px;

    color: var(--pf-text-muted);

    font-size: 15px;

}



body .pf-no-bookings strong {
    display: block;

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

    font-size: 20px;

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

    margin-bottom: 8px;

}



body .pf-no-bookings .pf-btn {
    margin-top: 16px;

}



/* Booking Timeline */

body .pf-booking-timeline {
    display: flex;

    gap: 8px;

    padding: 16px 24px;

    background: var(--pf-bg-dark);

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

    align-items: center;

    flex-wrap: wrap;

}



body .pf-timeline-step {
    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--pf-text-muted);

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



body .pf-timeline-step.pf-timeline-done {
    color: var(--pf-secondary);

}



body .pf-timeline-dot {
    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--pf-text-muted);

    display: inline-block;

}



body .pf-timeline-step.pf-timeline-done .pf-timeline-dot {
    background: var(--pf-secondary);

}



body .pf-timeline-step + .pf-timeline-step::before {
    content: '';

    display: inline-block;

    width: 16px;

    height: 1px;

    background: var(--pf-border);

    margin-right: 4px;

}



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

   MODAL

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

body .pf-modal {
    display: none;

    position: fixed;

    z-index: 99999;

    inset: 0;

}



body .pf-modal.active {
    display: flex;

    align-items: center;

    justify-content: center;

}



body .pf-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.8);

}



body .pf-modal-content {
    position: relative;

    background: var(--pf-bg-darker);

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

    max-width: 500px;

    width: 90%;

    max-height: 80vh;

    overflow-y: auto;

    z-index: 2;

}



body .pf-modal-close {
    position: absolute;

    top: 12px;

    right: 16px;

    background: none;

    border: none;

    color: var(--pf-text-muted);

    font-size: 24px;

    cursor: pointer;

    line-height: 1;

    padding: 4px;

}



body .pf-modal-close:hover {
    color: var(--pf-text);

}



body .pf-modal-body {
    padding: 32px;

}



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

   STATUS BADGES

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

body .pf-status-badge {
    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 5px 14px;

    border: 1px solid;

    border-radius: 0;

}



body .pf-status-pre-reserva { color: var(--pf-status-pre-reserva); border-color: var(--pf-status-pre-reserva); }
body .pf-status-confirmado { color: var(--pf-status-confirmado); border-color: var(--pf-status-confirmado); }
body .pf-status-em_andamento { color: var(--pf-status-em_andamento); border-color: var(--pf-status-em_andamento); }
body .pf-status-concluido { color: var(--pf-status-concluido); border-color: var(--pf-status-concluido); }
body .pf-status-entregue { color: var(--pf-status-entregue); border-color: var(--pf-status-entregue); }
body .pf-status-cancelado { color: var(--pf-status-cancelado); border-color: var(--pf-status-cancelado); }


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

   NOTICES

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

body .pf-notice {
    padding: 14px 20px;

    margin-bottom: 16px;

    font-size: 14px;

    border-left: 3px solid;

}



body .pf-notice-success {
    background: rgba(0,184,148,0.1);

    border-color: var(--pf-success);

    color: var(--pf-success);

}



body .pf-notice-error {
    background: var(--pf-accent-subtle);

    border-color: var(--pf-accent);

    color: var(--pf-accent);

}



body .pf-notice-info {
    background: rgba(116,185,255,0.1);

    border-color: var(--pf-info);

    color: var(--pf-info);

}



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

   SERVICES PAGE

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

body .pf-services-page {
    max-width: 1200px;

    margin: 0 auto;

    padding: 40px 20px;

}



body .pf-services-page .pf-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

}



body .pf-service-page-card {
    background: var(--pf-bg-card);

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

    padding: 32px 24px;

    text-align: center;

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

}



body .pf-service-page-card:hover {
    border-color: var(--pf-border-hover);

    transform: translateY(-2px);

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

}



body .pf-service-page-card .pf-svc-icon {
    font-size: 40px;

    color: var(--pf-accent);

    margin-bottom: 16px;

    display: block;

}



body .pf-service-page-card h4 {
    font-family: var(--pf-font-heading);

    font-size: 22px;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0 0 8px;

    color: var(--pf-text);

}



body .pf-service-page-card .pf-svc-price {
    font-family: var(--pf-font-heading);

    font-size: 28px;

    font-weight: 700;

    color: var(--pf-accent);

    margin: 12px 0;

}



body .pf-service-page-card .pf-svc-duration {
    font-size: 14px;

    color: var(--pf-text-muted);

    margin-bottom: 16px;

}



body .pf-service-page-card .pf-svc-desc {
    font-size: 14px;

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

    line-height: 1.6;

    margin-bottom: 20px;

}