/* ==========================================================
   GA TP Package – Frontend Styles  (light + blue)
   ========================================================== */

.dp-tp-packages {
	--dp-blue:        #2563eb;
	--dp-blue-mid:    #3b82f6;
	--dp-blue-light:  #eff6ff;
	--dp-blue-border: #bfdbfe;
	--dp-border:      #e2e8f0;
	--dp-bg:          #f8fafc;
	--dp-white:       #ffffff;
	--dp-text:        #0f172a;
	--dp-text-sub:    #334155;
	--dp-text-muted:  #475569;
	--dp-green:       #15803d;
	--dp-green-bg:    #f0fdf4;
	--dp-green-bdr:   #bbf7d0;
	--dp-radius:      12px;
	--dp-radius-sm:   7px;
	--dp-shadow:      0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
	--dp-shadow-lg:   0 8px 24px rgba(15,23,42,.10);
	--dp-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	font-family:  var(--dp-font);
	color:        var(--dp-text);
	line-height:  1.6;
	margin:       2rem 0;
	display:      flex;
	flex-direction: column;
	gap:          .75rem;
}

/* ── Card ──────────────────────────────────────────────────── */
.dp-pkg-card {
	background:    var(--dp-white);
	border:        1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	box-shadow:    var(--dp-shadow);
	overflow:      hidden;
	transition:    box-shadow .2s, border-color .2s;
}

.dp-pkg-card:hover {
	border-color: var(--dp-blue-border);
	box-shadow:   var(--dp-shadow-lg);
}

/* ── Summary row (collapsed header) ────────────────────────── */
.dp-pkg-summary {
	display:        flex;
	align-items:    center;
	gap:            1rem;
	padding:        .95rem 1.25rem;
	cursor:         pointer;
	user-select:    none;
	transition:     background .15s;
}

.dp-pkg-summary:hover {
	background: var(--dp-blue-light);
}

.dp-pkg-summary:focus-visible {
	outline:        2px solid var(--dp-blue);
	outline-offset: -2px;
	border-radius:  var(--dp-radius);
}

/* expanded state */
.dp-pkg-card.dp-is-open .dp-pkg-summary {
	background:    var(--dp-blue-light);
	border-bottom: 1px solid var(--dp-blue-border);
}

/* ── Info block ─────────────────────────────────────────────── */
.dp-pkg-info {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            .3rem;
}

.dp-pkg-name {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--dp-text);
	line-height: 1.3;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.dp-pkg-meta {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         .45rem;
}

/* type pill */
.dp-pkg-type-pill {
	display:       inline-flex;
	font-size:     .68rem;
	font-weight:   600;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding:       .18rem .6rem;
	border-radius: 999px;
	background:    var(--dp-blue-light);
	color:         #1d4ed8;
	border:        1px solid var(--dp-blue-border);
	white-space:   nowrap;
}

/* item count */
.dp-pkg-count {
	font-size:  .8rem;
	color:      var(--dp-text-sub);
	font-weight: 500;
}

/* updated date */
.dp-pkg-updated {
	font-size:  .78rem;
	color:      var(--dp-text-muted);
}

.dp-pkg-updated::before {
	content: "·";
	margin-right: .35rem;
}

/* ── Toggle button ──────────────────────────────────────────── */
.dp-pkg-toggle-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            .35rem;
	padding:        .42rem .9rem;
	background:     var(--dp-white);
	color:          var(--dp-blue);
	border:         1.5px solid var(--dp-blue-border);
	border-radius:  var(--dp-radius-sm);
	font-size:      .8rem;
	font-weight:    600;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     background .15s, color .15s, border-color .15s;
	flex-shrink:    0;
}

.dp-pkg-toggle-btn:hover {
	background:   var(--dp-blue);
	color:        #fff;
	border-color: var(--dp-blue);
}

/* chevron rotation */
.dp-pkg-chevron {
	transition: transform .25s ease;
}

.dp-pkg-card.dp-is-open .dp-pkg-chevron {
	transform: rotate(180deg);
}

/* ── Panel (items list) ─────────────────────────────────────── */
.dp-pkg-panel {
	background: var(--dp-bg);
}

.dp-pkg-panel[hidden] {
	display: none;
}

/* slide-in animation */
.dp-pkg-panel.dp-panel-enter {
	animation: dpSlideDown .22s ease forwards;
}

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

/* ── Item list ──────────────────────────────────────────────── */
.dp-pkg-item-list {
	list-style:  none;
	margin:      0;
	padding:     .5rem 0;
}

/* ── Single item row ────────────────────────────────────────── */
.dp-pkg-item {
	display:        flex;
	align-items:    flex-start;
	gap:            1rem;
	padding:        .85rem 1.25rem;
	border-bottom:  1px solid var(--dp-border);
	transition:     background .12s;
}

.dp-pkg-item:last-child {
	border-bottom: none;
}

.dp-pkg-item:hover {
	background: #f1f5f9;
}

/* main info (grows) */
.dp-pkg-item-main {
	flex:    1;
	min-width: 0;
}

/* header row inside item */
.dp-pkg-item-header {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         .5rem;
	margin-bottom: .25rem;
}

/* row number badge */
.dp-pkg-item-num {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      1.5rem;
	height:         1.5rem;
	border-radius:  999px;
	background:     var(--dp-blue-light);
	color:          var(--dp-blue);
	font-size:      .7rem;
	font-weight:    700;
	flex-shrink:    0;
	border:         1px solid var(--dp-blue-border);
}

/* item name */
.dp-pkg-item-name {
	font-size:   .92rem;
	font-weight: 600;
	color:       var(--dp-text);
	line-height: 1.3;
}

/* version badge */
.dp-pkg-version {
	display:       inline-flex;
	align-items:   center;
	font-size:     .7rem;
	font-weight:   600;
	color:         var(--dp-green);
	background:    var(--dp-green-bg);
	border:        1px solid var(--dp-green-bdr);
	border-radius: 999px;
	padding:       .1rem .5rem;
	white-space:   nowrap;
}

/* item updated diff */
.dp-pkg-item-updated {
	font-size:   .72rem;
	color:       var(--dp-text-muted);
	font-weight: 500;
	margin-left: .35rem;
	display:     inline-flex;
	align-items: center;
	gap:         3px;
}

.dp-pkg-item-updated svg {
	fill: currentColor;
	vertical-align: -1px;
}

/* description */
.dp-pkg-item-desc {
	font-size:  .83rem;
	color:      var(--dp-text-sub);
	line-height: 1.6;
	margin-top: .1rem;
}

.dp-pkg-item-desc p {
	margin: 0 0 .25rem;
}
.dp-pkg-item-desc p:last-child {
	margin-bottom: 0;
}

/* ── Download links ─────────────────────────────────────────── */
.dp-pkg-item-links {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .4rem;
	flex-shrink: 0;
	align-self:  center;
}

a.dp-link-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            .3rem;
	padding:        .38rem .8rem;
	background:     var(--dp-blue);
	color:          #fff !important;
	border-radius:  var(--dp-radius-sm);
	font-size:      .76rem;
	font-weight:    600;
	text-decoration: none !important;
	white-space:    nowrap;
	transition:     background .15s, transform .12s, box-shadow .15s;
	box-shadow:     0 1px 3px rgba(37,99,235,.3);
}

a.dp-link-btn:hover {
	background:  #1d4ed8;
	transform:   translateY(-1px);
	box-shadow:  0 4px 10px rgba(37,99,235,.35);
}

a.dp-link-btn:active {
	transform: translateY(0);
}

a.dp-link-plain {
	display:        inline-flex;
	align-items:    center;
	gap:            .3rem;
	font-size:      .83rem;
	color:          var(--dp-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.dp-link-plain:hover {
	color: #1d4ed8;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
	.dp-pkg-summary {
		flex-wrap: wrap;
		padding:   .85rem 1rem;
	}

	.dp-pkg-toggle-btn {
		width:           100%;
		justify-content: center;
	}

	.dp-pkg-item {
		flex-direction: column;
		gap:            .6rem;
		padding:        .85rem 1rem;
	}

	.dp-pkg-item-links {
		width: 100%;
	}

	a.dp-link-btn {
		flex: 1;
		justify-content: center;
	}
}

/* ── Access restriction notices ─────────────────────────────── */
.dp-access-notice {
	display:       flex;
	align-items:   center;
	gap:           .6rem;
	font-size:     .8rem;
	padding:       .55rem .85rem;
	border-radius: var(--dp-radius-sm);
	border:        1px solid transparent;
	margin-top:    .25rem;
	line-height:   1.5;
}

.dp-access-notice a {
	font-weight:     600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dp-notice-icon {
	font-style: normal;
	flex-shrink: 0;
	font-size:  1rem;
}

/* Expired – amber */
.dp-notice-expired {
	background:   #fffbeb;
	border-color: #fde68a;
	color:        #92400e;
}
.dp-notice-expired a { color: #b45309; }
.dp-notice-expired a:hover { color: #78350f; }

/* Login / members-only – blue */
.dp-notice-login {
	background:   var(--dp-blue-light);
	border-color: var(--dp-blue-border);
	color:        #1e3a8a;
}
.dp-notice-login a { color: var(--dp-blue); }
.dp-notice-login a:hover { color: var(--dp-primary-dark, #1d4ed8); }

/* Join – green */
.dp-notice-join {
	background:   var(--dp-green-bg);
	border-color: var(--dp-green-bdr);
	color:        #14532d;
}
.dp-notice-join a { color: var(--dp-green); }
.dp-notice-join a:hover { color: #15803d; }