/* CampOffice office: the Subscription page and the trial / confirm-your-email notices (docs/architecture/subscription.md). */

.co-sub-plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.co-sub-plan > div:first-child { flex: 1 1 18rem; display: grid; gap: .35rem; }
.co-sub-name { font-size: 1.25rem; font-weight: 700; }
.co-sub-name span { font-weight: 500; color: rgb(71 85 105); }
.co-sub-countdown { display: grid; justify-items: center; align-content: center; gap: .1rem; min-width: 11rem; padding: .9rem 1.2rem; border-radius: .9rem; background: rgb(240 253 244); color: rgb(20 83 45); text-align: center; font-size: .9rem; }
.co-sub-countdown small { color: rgb(71 85 105); }
.co-sub-days { font-size: 2.25rem; font-weight: 800; line-height: 1; }
.co-sub-countdown--ended { background: rgb(255 251 235); color: rgb(120 53 15); }
.co-sub-note { margin-top: .9rem; padding: .55rem .8rem; border-radius: .6rem; background: rgb(241 245 249); font-size: .875rem; }
.co-sub-link { text-decoration: underline; }
.co-sub-studio { font-size: .8rem; color: rgb(100 116 139); }

.co-sub-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; padding: .65rem .9rem; border: 1px solid rgb(147 197 253); border-radius: .75rem; background: rgb(239 246 255); color: rgb(30 58 138); font-size: .875rem; }
.co-sub-banner a { font-weight: 600; text-decoration: underline; }
.co-sub-banner button { border: 1px solid rgb(59 130 246); border-radius: .5rem; padding: .25rem .7rem; font-weight: 600; background: #fff; color: rgb(30 64 175); }

.dark .co-sub-name span, .dark .co-sub-countdown small { color: rgb(148 163 184); }
.dark .co-sub-countdown { background: rgb(34 197 94 / .1); color: rgb(187 247 208); }
.dark .co-sub-countdown--ended { background: rgb(251 191 36 / .08); color: rgb(253 230 138); }
.dark .co-sub-note { background: rgb(255 255 255 / .05); }
.dark .co-sub-banner { background: rgb(59 130 246 / .1); color: rgb(191 219 254); border-color: rgb(59 130 246 / .4); }