/*
@charset "utf-8";*/

a {  text-decoration:none;}
.select2-container {
width: 100% !important;
padding: 0;
}



.clr { clear:both; padding:0; margin:0; font-size:0px; line-height:0px;}
.clear { clear:both;}





/* form */

ol { list-style:none;}

ol li { display:block; clear:both;}

ol li label { display:block; margin:0; padding:16px 0 0 0;}

ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;}

ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}

ol li .send { margin:16px 0 0 0;}




.searchclass
{
color:#2A74BD;
  font-size:14px;
  font-family:Verdana;
  font-weight:bold;
}
.matchesbig{
  font-size:20px;
  font-weight:bold;
  color:#2A74BD;
}
.searchhead{
 font-weight:bold;
 font-family:Verdana;
 font-size:14px;
 color:#2A74BD  !important;
}
.mybuttonclass{
background-color:#2A74BD; 
color:#fff; 
}
.mybuttonclass:hover{
background-color:#2A74BD; 
color:#ccc; 
}

.mybackground {
	background-color:#2A74BD;
}

.boxxed
{
	overflow:hidden;
	background-color:#f5f5f5;
	padding:20px 30px;
	border:solid 1px #dddddd;
}



/***2024 ***/

@font-face {
    font-family: baskerville;
    src: url(/font/baskerville-old-face.ttf);
}


.bg-primary {
    background-color: #2A74BD !important;
}
.border-primary {
    border-color: #2A74BD !important;
}
.btn-primary {
    background-color: #2A74BD !important;

}
.btn-primary:hover {
    background-color: #2A74BD !important;
}

.custom-bg-primary {
    background-color: #2A74BD !important;
    /* Custom primary color */
}

.custom-text-primary {
    color: #2A74BD;
    /* Custom primary text color */
}

.custom-bg-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}

.custom-text-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}


.custom-small {
    font-size: small;
}

.custom-text-secondary {
    color: #EF8613;
    /* Custom primary text color */
}

.navbar {
     background-color: #FFFFFF; /* Cambia este color al que prefieras */
    }
/* Custom style to make all navbar text white */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
    color: black;
    /* Force text color to white */
}

.navbar-toggler-icon {
    filter: invert(1);
    /* Make the hamburger icon white */
}

/* Center the navbar menu on mobile view */
.navbar-collapse {
    justify-content: center;
    /* Center items when collapsed */
}

.banner-text {
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-shadow:
        -4px 4px 0 #000,
        4px 4px 0 #000;

}

.custom-hover:hover {
    background-color:#2A74BD;
	color: #CCCCCC!important;
}

.bg-costom {
    background-color: #2A74BD;
}
.nav-link {
    margin-right: 35px;
}

.primary1 {
    background-color: #2A74BD !;

}

.section {
    margin-top: 50px;
}

.card-border {
    border-color: #FFFFFF;
}

.costom-border {
    border: 1px solid  #2A74BD;
    border-radius: 10px;
}

.btn-primary {
    background-color:  #2A74BD;
}
.text-primary,h2,h3,h4{
	color:  #2A74BD !important;
}
.co-bg-secondary {
    background-color: #2A74BD;
}
.color-menu {
    background-color: #000;
}
.text-c-primary {
    color:  #2A74BD;
}

.text-c-secondary {
    color: #2A74BD;
}

/*accordion Remove focus outline */
.no-focus:focus {
    outline: none;
    box-shadow: none;

}

/* accordion Remove hover effects */
.no-hover:hover {
    background-color: none;
    color: none;
}

/*  accordion items */
.accordion-item {
    border-width: 2px;
    border-style: solid;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

/* booking imge  opacity */
.bg-booking {
    background-color: #2A74BD;
    opacity: 0.9;
}

/* wallet image opacity */
.bg-wallet {
    background-color:#2A74BD;
    opacity: 0.9;
}
.reservation {
    position: relative;
}

.reservation-badge {
    background-color: chartreuse;
    padding: 10px;
    border-radius: 50px;
    height: 5px;
    width: 5px;
    position: absolute;
    left: 30px;
    top: 20px;
}

.pay-btn-shadow {
    background-color: #477DBD;
    border-radius: 12px;
    box-shadow: 0 4px 0 #365a91;
    transition: all 0.2s ease-in-out;
}

.banner-principal {
	height: 270px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* media query */

@media (min-width: 992px) {

    /* Applies from large screens (lg) and up */
    .custom-width {
        max-width: 550px;
        /* Restricts width on larger screens */
    }
	.banner-principal {
		height: 350px;
	}
}

@media (max-width: 767px) {
	.banner-principal {
		height: 160px;
	}
    .banner-text {
        font-size: 36px;

        /* Adjust to fit mobile view */
    }

    .option-section {
        flex-direction: column;
        text-align: center;
    }

    .ranking-section {
        flex-direction: column;
        text-align: center;
    }

    .accept-btn {
        text-align: center;
        margin-bottom: 20px;
    }

    .section {
        margin-top: 100px;

    }

    .dropdown-btn {
        width: 100%;
        margin-bottom: 10px;
    }


}







/*CHATGPT IMPROVE*/
/* Estilos para el menú */
.nav-link {
    transition: color 0.3s, background-color 0.3s; /* Transición suave */
}

.navbar-brand img {
    transition: transform 0.3s; /* Transición para el logo */
}

.navbar-brand img:hover {
    transform: scale(1.4); /* Efecto de zoom al pasar el mouse */
}

.nav-item .nav-link.active {
    font-weight: bold; /* Negrita para el enlace activo */
    color: #2A74BD  !important; /* Color del texto activo */
}
/* Estilo para la cabecera del menú en dispositivos móviles y tablets */
@media (max-width: 992px) {
    .navbar {
        background-color: #FFFFFF; /* Cambia este color al que prefieras */
    }
    .navbar .nav-link {
        color: ; /* Cambia el color del texto si es necesario */
    }
}

/* Texto responsivo */
.responsive-text {
    font-size: min(4vw, 40px); /* Máximo 40px, ajustado según el ancho disponible */
    font-size: clamp(18px, 2.5vw, 36px); /* Ajuste adaptable */
    width: 100%; /* Asegura que no se desborde */
    white-space: normal; /* Permite saltos de línea */
    text-align: center; /* Centrado */
    line-height: 1.2; /* Mejora la legibilidad */
}

.responsive-img {
    width: clamp(35px, 8vw, 70px); /* Mínimo 40px, Máximo 70px, Escala con el ancho de la pantalla */
    transition: width 0.3s ease-in-out; /* Animación suave */
}

/* HOVER ON BOOK ONLINE */
.card-link {
        text-decoration: none;
    }

    .hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-effect:hover {
        transform: scale(1.05);  /* Aumenta ligeramente el tamaño */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);  /* Sombra para un efecto de "clickeable" */
    }

    .hover-effect:active {
        transform: scale(0.98);  /* Efecto de pulsación, reduce el tamaño */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  /* Sombra más suave al hacer clic */
    }







	/*** MATCHES  ****/
	
/* ═══ Design Tokens ═══ */
:root {
    --pm-primary: #2A74BD ;
    --pm-primary-dark:#2A74BD ;
    --pm-primary-light: #e0f7f6;
    --pm-primary-glow: rgba(0,180,171,0.15);
    --pm-accent: #ff6b35;
    --pm-accent-light: #fff1eb;
    --pm-dark: #1a1f36;
    --pm-gray-900: #2d3348;
    --pm-gray-700: #4a5068;
    --pm-gray-500: #8b90a0;
    --pm-gray-300: #d1d5e0;
    --pm-gray-200: #e8eaef;
    --pm-gray-100: #f4f5f7;
    --pm-white: #ffffff;
    --pm-success: #22c55e;
    --pm-success-light: #dcfce7;
    --pm-warning: #f59e0b;
    --pm-warning-light: #fef3c7;
    --pm-danger: #ef4444;
    --pm-danger-light: #fee2e2;
    --pm-competitive: #7c3aed;
    --pm-competitive-light: #ede9fe;
    --pm-friendly: #06b6d4;
    --pm-friendly-light: #e0f7fa;
    --pm-radius: 16px;
    --pm-radius-sm: 10px;
    --pm-radius-xs: 6px;
    --pm-shadow: 0 1px 3px rgba(26,31,54,0.05), 0 4px 12px rgba(26,31,54,0.06);
    --pm-shadow-hover: 0 4px 12px rgba(26,31,54,0.08), 0 16px 32px rgba(26,31,54,0.1);
    --pm-shadow-modal: 0 20px 60px rgba(26,31,54,0.2);
    --pm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pm-wrapper { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.pm-wrapper * { font-family: inherit; }

/* ═══ Page Header ═══ */
.pm-page-header {
    background: linear-gradient(135deg, var(--pm-dark) 0%, #2d3348 60%, #3a405e 100%);
    border-radius: var(--pm-radius); padding: 2rem 2.5rem; margin-bottom: 1.75rem;
    position: relative; overflow: hidden;
}
.pm-page-header::before { content:''; position:absolute; top:-50%; right:-8%; width:280px; height:280px; background:radial-gradient(circle,var(--pm-primary-glow) 0%,transparent 70%); border-radius:50%; }
.pm-page-header::after { content:''; position:absolute; bottom:-40%; left:15%; width:200px; height:200px; background:radial-gradient(circle,rgba(255,107,53,0.08) 0%,transparent 70%); border-radius:50%; }
.pm-page-header h2 { color:var(--pm-white); font-weight:800; font-size:1.6rem; margin:0; position:relative; z-index:1; letter-spacing:-0.02em; }
.pm-page-header h2 i { color:var(--pm-primary); }
.pm-header-meta { display:flex; align-items:center; gap:1rem; margin-top:0.5rem; position:relative; z-index:1; }
.pm-header-meta span { color:rgba(255,255,255,0.55); font-size:0.9rem; font-weight:500; }
.pm-header-count { background:rgba(0,180,171,0.2); color:var(--pm-primary)!important; padding:0.2rem 0.7rem; border-radius:20px; font-weight:700!important; font-size:0.8rem!important; }

/* ═══ Filter toggle mobile ═══ */
.pm-filter-toggle { display:none; width:100%; padding:0.75rem; border:1px solid var(--pm-gray-300); border-radius:var(--pm-radius-sm); background:var(--pm-white); color:var(--pm-dark); font-weight:600; font-size:0.9rem; font-family:inherit; cursor:pointer; margin-bottom:1rem; align-items:center; justify-content:center; gap:0.5rem; box-shadow:var(--pm-shadow); transition:var(--pm-transition); }
.pm-filter-toggle:hover { border-color:var(--pm-primary); color:var(--pm-primary); }

/* ═══ Sidebar ═══ */
.pm-sidebar-wrap { position:sticky; top:100px; }
.pm-sidebar-card { border:1px solid var(--pm-gray-200); border-radius:var(--pm-radius); box-shadow:var(--pm-shadow); overflow:hidden; background:var(--pm-white); }
.pm-sidebar-header { background:var(--pm-gray-100); border-bottom:1px solid var(--pm-gray-200); padding:1rem 1.25rem; font-weight:700; font-size:0.92rem; color:var(--pm-dark); display:flex; align-items:center; gap:0.5rem; }
.pm-sidebar-header i { color:var(--pm-primary); }
.pm-sidebar-body { padding:1.25rem; }

/* Offcanvas */
.pm-offcanvas .offcanvas-header { background:var(--pm-gray-100); border-bottom:1px solid var(--pm-gray-200); padding:1rem 1.25rem; }
.pm-offcanvas .offcanvas-title { font-family:inherit; font-weight:700; color:var(--pm-dark); display:flex; align-items:center; gap:0.5rem; }
.pm-offcanvas .offcanvas-title i { color:var(--pm-primary); }

/* ═══ Match Card ═══ */
.pm-match-card { background:var(--pm-white); border:1px solid var(--pm-gray-200); border-radius:var(--pm-radius); overflow:hidden; transition:var(--pm-transition); box-shadow:var(--pm-shadow); margin-bottom:1.15rem; animation:pmFadeUp 0.4s ease both; }
.pm-match-card:nth-child(2){animation-delay:.04s} .pm-match-card:nth-child(3){animation-delay:.08s}
.pm-match-card:nth-child(4){animation-delay:.12s} .pm-match-card:nth-child(5){animation-delay:.16s}
.pm-match-card:hover { border-color:var(--pm-primary); box-shadow:var(--pm-shadow-hover); transform:translateY(-2px); }

/* Type ribbon */
.pm-type-ribbon {
    position:absolute; top:12px; left:-6px; z-index:2;
    padding:0.2rem 0.65rem 0.2rem 0.5rem;
    font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    border-radius:0 var(--pm-radius-xs) var(--pm-radius-xs) 0;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.pm-type-ribbon::before {
    content:''; position:absolute; left:0; bottom:-6px;
    border-width:3px 0 3px 6px; border-style:solid;
}
.pm-type-competitive { background:var(--pm-competitive); color:#fff; }
.pm-type-competitive::before { border-color:transparent transparent transparent #5b21b6; }
.pm-type-friendly { background:var(--pm-friendly); color:#fff; }
.pm-type-friendly::before { border-color:transparent transparent transparent #0891b2; }

.pm-card-top { display:flex; align-items:stretch; }
.pm-card-sport-img { width:115px; min-height:140px; flex-shrink:0; background-size:cover; background-position:center; position:relative; }
.pm-card-sport-img::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,180,171,0.25),rgba(26,31,54,0.35)); }

.pm-card-body { flex:1; padding:1.1rem 1.3rem; display:flex; flex-direction:column; justify-content:center; gap:0.5rem; min-width:0; }

.pm-card-date-row { display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; }
.pm-card-date { display:inline-flex; align-items:center; gap:0.3rem; font-weight:700; font-size:0.9rem; color:var(--pm-dark); }
.pm-card-date i { color:var(--pm-primary); }
.pm-card-time { display:inline-flex; align-items:center; gap:0.25rem; background:var(--pm-primary-light); color:var(--pm-primary-dark); padding:0.2rem 0.6rem; border-radius:var(--pm-radius-xs); font-weight:700; font-size:0.82rem; }
.pm-card-price { font-weight:800; font-size:1.1rem; color:var(--pm-primary-dark); margin-left:auto; white-space:nowrap; }

.pm-card-info-row { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.pm-badge { display:inline-flex; align-items:center; gap:0.2rem; padding:0.18rem 0.55rem; border-radius:var(--pm-radius-xs); font-size:0.75rem; font-weight:600; }
.pm-badge-sport { background:var(--pm-dark); color:var(--pm-white); }
.pm-badge-level { background:#ede9fe; color:#7c3aed; }
.pm-badge-category { background:var(--pm-warning-light); color:#b45309; }
.pm-badge-duration { background:var(--pm-gray-100); color:var(--pm-gray-700); }

.pm-card-venue { display:flex; align-items:center; gap:0.3rem; font-size:0.82rem; color:var(--pm-gray-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Cancellation warning */
.pm-cancel-warning {
    display:flex; align-items:center; gap:0.35rem;
    font-size:0.75rem; font-weight:600; padding:0.25rem 0.6rem;
    border-radius:var(--pm-radius-xs);
}
.pm-cancel-warning-urgent { background:var(--pm-danger-light); color:var(--pm-danger); }
.pm-cancel-warning-normal { background:var(--pm-warning-light); color:#92400e; }

/* Slots */
.pm-slots-row { display:flex; align-items:center; gap:0.5rem; }
.pm-slots-dots { display:flex; gap:0.25rem; }
.pm-slot-dot { width:8px; height:8px; border-radius:50%; background:var(--pm-gray-300); transition:var(--pm-transition); }
.pm-slot-dot.filled { background:var(--pm-success); }
.pm-slots-text { font-size:0.76rem; color:var(--pm-gray-500); font-weight:600; }

/* ═══ Players strip ═══ */
.pm-players-strip { display:flex; align-items:stretch; border-top:1px solid var(--pm-gray-200); background:var(--pm-gray-100); }
.pm-player-slot { flex:1; display:flex; flex-direction:column; align-items:center; padding:0.8rem 0.4rem; gap:0.35rem; text-decoration:none!important; color:inherit; transition:var(--pm-transition); border-right:1px solid rgba(209,213,224,0.5); cursor:default; }
.pm-player-slot:last-child { border-right:none; }
.pm-player-avatar { width:62px; height:62px; border-radius:50%; object-fit:cover; border:2px solid var(--pm-white); box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.pm-player-name { font-size:0.73rem; font-weight:600; color:var(--pm-gray-700); text-align:center; max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-player-ranking { font-size:0.66rem; font-weight:700; color:var(--pm-primary-dark); background:var(--pm-primary-light); padding:0.08rem 0.4rem; border-radius:4px; }

/* Empty slot */
.pm-player-slot-empty { cursor:pointer; }
.pm-player-slot-empty:hover { background:var(--pm-white); }
.pm-player-avatar-placeholder { width:62px; height:62px; border-radius:50%; border:2px dashed var(--pm-primary); background:var(--pm-primary-light); display:flex; align-items:center; justify-content:center; transition:var(--pm-transition); }
.pm-player-avatar-placeholder i { color:var(--pm-primary); font-size:1.15rem; }
.pm-player-slot-empty:hover .pm-player-avatar-placeholder { background:var(--pm-primary); border-color:var(--pm-primary); }
.pm-player-slot-empty:hover .pm-player-avatar-placeholder i { color:var(--pm-white); }
.pm-player-slot-empty .pm-player-name { color:var(--pm-primary); font-weight:700; }

/* Request slot */
.pm-player-slot-request .pm-player-avatar-placeholder { border-color:var(--pm-warning); background:var(--pm-warning-light); }
.pm-player-slot-request .pm-player-avatar-placeholder i { color:var(--pm-warning); }
.pm-player-slot-request:hover .pm-player-avatar-placeholder { background:var(--pm-warning); border-color:var(--pm-warning); }
.pm-player-slot-request:hover .pm-player-avatar-placeholder i { color:#fff; }
.pm-player-slot-request .pm-player-name { color:#b45309; }

/* Pending request */
.pm-player-slot-pending .pm-player-avatar-placeholder { border-color:var(--pm-gray-300); background:var(--pm-gray-100); border-style:dotted; animation:pmPulse 2s infinite; }
.pm-player-slot-pending .pm-player-name { color:var(--pm-gray-500); }

/* ═══ Action strip (chat + share) ═══ */
.pm-action-strip { display:flex; border-top:1px solid var(--pm-gray-200); }
.pm-action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:0.35rem; padding:0.55rem; font-size:0.78rem; font-weight:600; color:var(--pm-gray-500); background:none; border:none; cursor:pointer; transition:var(--pm-transition); font-family:inherit; border-right:1px solid var(--pm-gray-200); text-decoration:none!important; position:relative; }
.pm-action-btn:last-child { border-right:none; }
.pm-action-btn:hover { color:var(--pm-primary); background:var(--pm-primary-light); }
.pm-action-btn i { font-size:0.95rem; }
.pm-action-btn-wa:hover { color:#25d366; background:#e6faf0; }
.pm-action-btn-chat { color:var(--pm-primary-dark); font-weight:700; }
.pm-action-btn-chat:hover { background:var(--pm-primary-light); }
.pm-chat-badge { position:absolute; top:6px; right:calc(50% - 30px); background:var(--pm-accent); color:#fff; font-size:0.6rem; font-weight:800; padding:0.1rem 0.35rem; border-radius:8px; min-width:16px; text-align:center; line-height:1.3; }

/* ═══ Chat Drawer (offcanvas right) ═══ */
.pm-chat-offcanvas { max-width:400px; font-family:'Plus Jakarta Sans',sans-serif; }
.pm-chat-offcanvas .offcanvas-header { background:var(--pm-dark); padding:1rem 1.25rem; }
.pm-chat-offcanvas .offcanvas-title { color:#fff; font-weight:700; font-size:0.95rem; display:flex; align-items:center; gap:0.5rem; }
.pm-chat-offcanvas .offcanvas-title i { color:var(--pm-primary); }
.pm-chat-offcanvas .btn-close { filter:invert(1); opacity:0.6; }

.pm-chat-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.6rem; background:var(--pm-gray-100); }
.pm-chat-empty { text-align:center; padding:3rem 1rem; color:var(--pm-gray-500); }
.pm-chat-empty i { font-size:2rem; display:block; margin-bottom:0.5rem; color:var(--pm-gray-300); }

.pm-chat-msg { max-width:80%; display:flex; flex-direction:column; gap:0.15rem; }
.pm-chat-msg-other { align-self:flex-start; }
.pm-chat-msg-mine { align-self:flex-end; }
.pm-chat-msg-name { font-size:0.68rem; font-weight:700; color:var(--pm-gray-500); padding:0 0.35rem; }
.pm-chat-msg-mine .pm-chat-msg-name { text-align:right; }
.pm-chat-bubble { padding:0.55rem 0.85rem; border-radius:14px; font-size:0.85rem; line-height:1.4; word-break:break-word; }
.pm-chat-msg-other .pm-chat-bubble { background:var(--pm-white); color:var(--pm-dark); border:1px solid var(--pm-gray-200); border-bottom-left-radius:4px; }
.pm-chat-msg-mine .pm-chat-bubble { background:var(--pm-primary); color:#fff; border-bottom-right-radius:4px; }
.pm-chat-msg-time { font-size:0.62rem; color:var(--pm-gray-500); padding:0 0.35rem; }
.pm-chat-msg-mine .pm-chat-msg-time { text-align:right; }

.pm-chat-footer { display:flex; gap:0.5rem; padding:0.85rem 1rem; border-top:1px solid var(--pm-gray-200); background:var(--pm-white); }
.pm-chat-input { flex:1; border:1px solid var(--pm-gray-300); border-radius:20px; padding:0.55rem 1rem; font-size:0.85rem; font-family:inherit; outline:none; transition:var(--pm-transition); resize:none; }
.pm-chat-input:focus { border-color:var(--pm-primary); box-shadow:0 0 0 3px var(--pm-primary-glow); }
.pm-chat-send { width:38px; height:38px; border-radius:50%; border:none; background:var(--pm-primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--pm-transition); flex-shrink:0; }
.pm-chat-send:hover { background:var(--pm-primary-dark); transform:scale(1.05); }
.pm-chat-send:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

/* ═══ Modals ═══ */
.pm-modal .modal-content { border:none; border-radius:var(--pm-radius); box-shadow:var(--pm-shadow-modal); overflow:hidden; font-family:inherit; }
.pm-modal .modal-header { background:linear-gradient(135deg,var(--pm-dark),#2d3348); border:none; padding:1.3rem 1.5rem; }
.pm-modal .modal-title { color:var(--pm-white); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:0.5rem; }
.pm-modal .modal-title i { color:var(--pm-primary); }
.pm-modal .btn-close { filter:invert(1); opacity:0.6; }
.pm-modal .modal-body { padding:1.5rem; }
.pm-modal .modal-footer { border-top:1px solid var(--pm-gray-100); padding:1rem 1.5rem; gap:0.75rem; }

.pm-modal-summary { display:flex; flex-direction:column; gap:0.75rem; }
.pm-modal-row { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0; border-bottom:1px solid var(--pm-gray-100); }
.pm-modal-row:last-child { border-bottom:none; }
.pm-modal-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.pm-modal-icon-sport { background:var(--pm-primary-light); color:var(--pm-primary-dark); }
.pm-modal-icon-date { background:#ede9fe; color:#7c3aed; }
.pm-modal-icon-venue { background:var(--pm-accent-light); color:var(--pm-accent); }
.pm-modal-icon-level { background:var(--pm-warning-light); color:#b45309; }
.pm-modal-label { font-size:0.78rem; color:var(--pm-gray-500); font-weight:500; margin-bottom:0.1rem; }
.pm-modal-value { font-size:0.92rem; color:var(--pm-dark); font-weight:700; }

.pm-modal-price-highlight { background:var(--pm-success-light); border:1px solid #bbf7d0; border-radius:var(--pm-radius-sm); padding:0.85rem 1rem; text-align:center; margin-top:0.5rem; }
.pm-modal-price-amount { font-size:1.6rem; font-weight:800; color:#16a34a; }
.pm-modal-price-label { font-size:0.78rem; color:var(--pm-gray-500); }

/* Request modal extras */
.pm-request-textarea { width:100%; border:1px solid var(--pm-gray-300); border-radius:var(--pm-radius-sm); padding:0.75rem 1rem; font-size:0.88rem; font-family:inherit; resize:vertical; min-height:70px; outline:none; transition:var(--pm-transition); margin-top:0.75rem; }
.pm-request-textarea:focus { border-color:var(--pm-primary); box-shadow:0 0 0 3px var(--pm-primary-glow); }
.pm-request-hint { font-size:0.78rem; color:var(--pm-gray-500); margin-top:0.35rem; }

/* Buttons */
.pm-btn-cancel { background:var(--pm-gray-100); color:var(--pm-gray-700); border:1px solid var(--pm-gray-300); border-radius:var(--pm-radius-sm); padding:0.6rem 1.3rem; font-weight:600; font-size:0.88rem; cursor:pointer; transition:var(--pm-transition); font-family:inherit; }
.pm-btn-cancel:hover { background:var(--pm-gray-200); }
.pm-btn-join { background:var(--pm-primary); color:#fff; border:none; border-radius:var(--pm-radius-sm); padding:0.6rem 1.8rem; font-weight:700; font-size:0.92rem; cursor:pointer; transition:var(--pm-transition); font-family:inherit; display:inline-flex; align-items:center; gap:0.4rem; }
.pm-btn-join:hover { background:var(--pm-primary-dark); transform:scale(1.02); }
.pm-btn-join:disabled { opacity:0.65; cursor:not-allowed; transform:none; }
.pm-btn-join .spinner-border { width:1rem; height:1rem; border-width:2px; }
.pm-btn-request { background:var(--pm-warning); color:#fff; border:none; border-radius:var(--pm-radius-sm); padding:0.6rem 1.5rem; font-weight:700; font-size:0.92rem; cursor:pointer; transition:var(--pm-transition); font-family:inherit; display:inline-flex; align-items:center; gap:0.4rem; }
.pm-btn-request:hover { background:#d97706; }
.pm-btn-request:disabled { opacity:0.65; cursor:not-allowed; }

/* ═══ Toast ═══ */
.pm-toast-container { position:fixed; top:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; }
.pm-toast { background:var(--pm-white); border-radius:var(--pm-radius-sm); box-shadow:var(--pm-shadow-hover); padding:1rem 1.25rem; display:flex; align-items:center; gap:0.75rem; min-width:300px; max-width:420px; animation:pmSlideIn 0.35s ease; font-family:inherit; border-left:4px solid var(--pm-success); }
.pm-toast-error { border-left-color:var(--pm-danger); }
.pm-toast-warning { border-left-color:var(--pm-warning); }
.pm-toast-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pm-toast-icon-success { background:var(--pm-success-light); color:var(--pm-success); }
.pm-toast-icon-error { background:var(--pm-danger-light); color:var(--pm-danger); }
.pm-toast-icon-warning { background:var(--pm-warning-light); color:var(--pm-warning); }
.pm-toast-msg { font-size:0.88rem; font-weight:600; color:var(--pm-dark); flex:1; }
.pm-toast-close { background:none; border:none; color:var(--pm-gray-500); cursor:pointer; padding:0; font-size:1.1rem; }

/* ═══ Empty State ═══ */
.pm-empty-state { text-align:center; padding:4rem 2rem; background:var(--pm-white); border:2px dashed var(--pm-gray-300); border-radius:var(--pm-radius); }
.pm-empty-icon { width:80px; height:80px; border-radius:50%; background:var(--pm-gray-100); display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.pm-empty-icon i { font-size:2rem; color:var(--pm-gray-500); }
.pm-empty-state h3 { font-weight:700; color:var(--pm-dark); margin-bottom:0.5rem; }
.pm-empty-state p { color:var(--pm-gray-500); font-size:0.92rem; }

/* ═══ Animations ═══ */
@keyframes pmFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes pmSlideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes pmSlideOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }
@keyframes pmPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ═══ Responsive ═══ */
@media(max-width:991px){ .pm-filter-toggle{display:flex} .pm-sidebar-desktop{display:none} }
@media(max-width:767px){
    .pm-card-sport-img{width:80px;min-height:110px} .pm-card-body{padding:0.85rem 0.9rem;gap:0.4rem}
    .pm-card-price{font-size:0.95rem} .pm-player-avatar,.pm-player-avatar-placeholder{width:36px!important;height:36px!important}
    .pm-player-slot{padding:0.6rem 0.2rem} .pm-page-header{padding:1.4rem 1.25rem}
    .pm-page-header h2{font-size:1.3rem} .pm-badge{font-size:0.7rem;padding:0.15rem 0.4rem}
    .pm-toast{min-width:260px;max-width:90vw} .pm-chat-offcanvas{max-width:100%}
}





/***** ACCEPT/DECLINE MATCH */
.pm-invite { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; }
.pm-invite * { font-family:inherit; box-sizing:border-box; }

/* ═══ Hero banner ═══ */
.pm-invite-hero {
    background:linear-gradient(135deg,var(--pm-dark) 0%,#2d3348 50%,#3a405e 100%);
    border-radius:var(--pm-radius); padding:2.5rem; margin-bottom:2rem;
    position:relative; overflow:hidden; text-align:center;
}
.pm-invite-hero::before { content:''; position:absolute; top:-60%; right:-15%; width:350px; height:350px; background:radial-gradient(circle,var(--pm-primary-glow) 0%,transparent 70%); border-radius:50%; }
.pm-invite-hero::after { content:''; position:absolute; bottom:-50%; left:10%; width:250px; height:250px; background:radial-gradient(circle,rgba(255,107,53,0.08) 0%,transparent 70%); border-radius:50%; }
.pm-invite-hero-content { position:relative; z-index:1; }
.pm-invite-hero .pm-invite-emoji { font-size:2.5rem; margin-bottom:0.75rem; display:block; }
.pm-invite-hero h1 { color:#fff; font-weight:800; font-size:1.5rem; margin:0 0 0.35rem; letter-spacing:-0.02em; }
.pm-invite-hero p { color:rgba(255,255,255,0.6); font-size:0.92rem; margin:0; }

/* ═══ Type badge ═══ */
.pm-type-badge {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.3rem 0.8rem; border-radius:20px;
    font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    margin-bottom:1rem;
}
.pm-type-badge-competitive { background:var(--pm-competitive-light); color:var(--pm-competitive); }
.pm-type-badge-friendly { background:var(--pm-friendly-light); color:var(--pm-friendly); }

/* ═══ Match detail card ═══ */
.pm-detail-card {
    background:var(--pm-white); border:1px solid var(--pm-gray-200);
    border-radius:var(--pm-radius); box-shadow:var(--pm-shadow);
    overflow:hidden; max-width:560px; margin:0 auto 1.5rem;
}
.pm-detail-rows { padding:1.25rem 1.5rem; }
.pm-detail-row {
    display:flex; align-items:center; gap:0.85rem;
    padding:0.75rem 0; border-bottom:1px solid var(--pm-gray-100);
}
.pm-detail-row:last-child { border-bottom:none; }
.pm-detail-icon {
    width:40px; height:40px; border-radius:var(--pm-radius-sm);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:1.05rem;
}
.pm-detail-icon-sport { background:var(--pm-primary-light); color:var(--pm-primary-dark); }
.pm-detail-icon-date { background:#ede9fe; color:#7c3aed; }
.pm-detail-icon-time { background:#fef3c7; color:#b45309; }
.pm-detail-icon-venue { background:var(--pm-accent-light); color:var(--pm-accent); }
.pm-detail-icon-level { background:#e0f7fa; color:#0891b2; }
.pm-detail-icon-cat { background:#fce7f3; color:#db2777; }
.pm-detail-label { font-size:0.75rem; color:var(--pm-gray-500); font-weight:500; }
.pm-detail-value { font-size:0.92rem; color:var(--pm-dark); font-weight:700; }

/* Price highlight */
.pm-price-bar {
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border-top:1px solid #bbf7d0;
    padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
}
.pm-price-bar-label { font-size:0.82rem; color:#166534; font-weight:600; }
.pm-price-bar-amount { font-size:1.5rem; font-weight:800; color:#16a34a; }

/* ═══ Players section ═══ */
.pm-players-section { max-width:560px; margin:0 auto 1.5rem; }
.pm-players-title { font-size:0.85rem; font-weight:700; color:var(--pm-dark); margin-bottom:0.75rem; display:flex; align-items:center; gap:0.4rem; }
.pm-players-grid { display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center; }
.pm-player-chip {
    display:flex; align-items:center; gap:0.5rem;
    background:var(--pm-white); border:1px solid var(--pm-gray-200);
    border-radius:30px; padding:0.4rem 0.85rem 0.4rem 0.4rem;
    box-shadow:var(--pm-shadow);
}
.pm-player-chip img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--pm-white); }
.pm-player-chip-name { font-size:0.8rem; font-weight:600; color:var(--pm-dark); }
.pm-player-chip-empty {
    border:2px dashed var(--pm-primary); background:var(--pm-primary-light);
}
.pm-player-chip-empty .pm-player-chip-name { color:var(--pm-primary); }

/* ═══ Slots indicator ═══ */
.pm-invite-slots {
    display:flex; align-items:center; justify-content:center; gap:0.5rem;
    margin-bottom:1.5rem;
}
.pm-invite-slots-dots { display:flex; gap:0.3rem; }
.pm-invite-slot-dot { width:10px; height:10px; border-radius:50%; background:var(--pm-gray-300); transition:var(--pm-transition); }
.pm-invite-slot-dot.filled { background:var(--pm-success); }
.pm-invite-slots-text { font-size:0.82rem; color:var(--pm-gray-500); font-weight:600; }

/* ═══ Action area ═══ */
.pm-action-area { max-width:560px; margin:0 auto 2rem; }

/* CTA button */
.pm-cta-join {
    display:flex; align-items:center; justify-content:center; gap:0.5rem;
    width:100%; padding:0.9rem; border:none; border-radius:var(--pm-radius-sm);
    background:var(--pm-primary); color:#fff; font-size:1rem; font-weight:700;
    font-family:inherit; cursor:pointer; transition:var(--pm-transition);
    box-shadow:0 4px 14px rgba(0,180,171,0.3);
}
.pm-cta-join:hover { background:var(--pm-primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,180,171,0.35); }
.pm-cta-decline {
    display:flex; align-items:center; justify-content:center; gap:0.4rem;
    width:100%; padding:0.65rem; border:1px solid var(--pm-gray-300); border-radius:var(--pm-radius-sm);
    background:var(--pm-white); color:var(--pm-gray-500); font-size:0.85rem; font-weight:600;
    font-family:inherit; cursor:pointer; transition:var(--pm-transition); margin-top:0.65rem;
}
.pm-cta-decline:hover { border-color:var(--pm-danger); color:var(--pm-danger); background:var(--pm-danger-light); }

/* Status messages */
.pm-status-card {
    max-width:560px; margin:0 auto 1.5rem;
    border-radius:var(--pm-radius); padding:1.5rem; text-align:center;
}
.pm-status-success { background:var(--pm-success-light); border:1px solid #bbf7d0; }
.pm-status-warning { background:var(--pm-warning-light); border:1px solid #fde68a; }
.pm-status-error { background:var(--pm-danger-light); border:1px solid #fecaca; }
.pm-status-full { background:var(--pm-gray-100); border:1px solid var(--pm-gray-200); }
.pm-status-icon { font-size:2rem; margin-bottom:0.5rem; }
.pm-status-text { font-size:0.95rem; font-weight:700; color:var(--pm-dark); }
.pm-status-sub { font-size:0.85rem; color:var(--pm-gray-500); margin-top:0.25rem; }

/* ═══ Auth section ═══ */
.pm-auth-section { max-width:560px; margin:0 auto 2rem; }
.pm-auth-tabs {
    display:flex; border-bottom:2px solid var(--pm-gray-200); margin-bottom:1.25rem;
}
.pm-auth-tab {
    flex:1; padding:0.75rem; text-align:center; font-size:0.88rem; font-weight:600;
    color:var(--pm-gray-500); cursor:pointer; border-bottom:2px solid transparent;
    margin-bottom:-2px; transition:var(--pm-transition); background:none; border-top:none;
    border-left:none; border-right:none; font-family:inherit;
}
.pm-auth-tab.active { color:var(--pm-primary-dark); border-bottom-color:var(--pm-primary); }
.pm-auth-tab:hover { color:var(--pm-primary); }

.pm-auth-panel { display:none; }
.pm-auth-panel.active { display:block; }

.pm-auth-card {
    background:var(--pm-white); border:1px solid var(--pm-gray-200);
    border-radius:var(--pm-radius); padding:1.5rem;
    box-shadow:var(--pm-shadow);
}
.pm-auth-card h3 {
    font-size:1rem; font-weight:700; color:var(--pm-dark);
    margin:0 0 0.25rem; display:flex; align-items:center; gap:0.4rem;
}
.pm-auth-card h3 i { color:var(--pm-primary); }
.pm-auth-card p { font-size:0.82rem; color:var(--pm-gray-500); margin:0 0 1rem; }

.pm-form-group { margin-bottom:0.85rem; }
.pm-form-label { display:block; font-size:0.78rem; font-weight:600; color:var(--pm-gray-700); margin-bottom:0.3rem; }
.pm-form-input {
    width:100%; padding:0.65rem 0.9rem; border:1px solid var(--pm-gray-300);
    border-radius:var(--pm-radius-xs); font-size:0.88rem; font-family:inherit;
    outline:none; transition:var(--pm-transition); background:var(--pm-white);
}
.pm-form-input:focus { border-color:var(--pm-primary); box-shadow:0 0 0 3px var(--pm-primary-glow); }
.pm-form-input::placeholder { color:var(--pm-gray-300); }

.pm-form-submit {
    width:100%; padding:0.7rem; border:none; border-radius:var(--pm-radius-sm);
    font-size:0.92rem; font-weight:700; font-family:inherit; cursor:pointer;
    transition:var(--pm-transition); display:flex; align-items:center; justify-content:center; gap:0.4rem;
    margin-top:0.5rem;
}
.pm-form-submit-primary { background:var(--pm-primary); color:#fff; }
.pm-form-submit-primary:hover { background:var(--pm-primary-dark); }

.pm-or-divider {
    display:flex; align-items:center; gap:0.75rem; margin:1.25rem 0;
    font-size:0.78rem; color:var(--pm-gray-500); font-weight:500;
}
.pm-or-divider::before, .pm-or-divider::after { content:''; flex:1; height:1px; background:var(--pm-gray-200); }

/* ═══ Animations ═══ */
@keyframes pmFadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.pm-invite-hero { animation:pmFadeUp 0.5s ease; }
.pm-detail-card { animation:pmFadeUp 0.5s ease 0.1s both; }
.pm-players-section { animation:pmFadeUp 0.5s ease 0.15s both; }
.pm-action-area, .pm-auth-section { animation:pmFadeUp 0.5s ease 0.2s both; }

/* ═══ Responsive ═══ */
@media(max-width:600px) {
    .pm-invite-hero { padding:1.75rem 1.25rem; }
    .pm-invite-hero h1 { font-size:1.25rem; }
    .pm-detail-rows { padding:1rem 1.15rem; }
    .pm-detail-row { gap:0.65rem; }
    .pm-price-bar { padding:0.85rem 1.15rem; }
    .pm-auth-card { padding:1.15rem; }
}